Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fenced code in bullet lists with GitHub-flavoured MarkDown??

Fenced code blocks inside ordered and unordered lists

  1. This is a numbered list.

  2. I'm going to include a fenced code block as part of this bullet:

    Code
    More Code
    
  3. We can put fenced code blocks inside nested bullets, too.

    1. Like this:

      printf("Hello, World!");
    2. The key is to indent your fenced block by (4 * bullet_indent_level) spaces.

    3. Also need to put a separating newline above and below the fenced block.


Failed attempts:

  1. This is a bullet.
  2. This is the end of the first bullet list, with a fenced code block following:
Code
More Code
  1. This is the start of a new bullet list. Hey, where is my fenced code? ``` Code More Code

4. Maybe we can do it with indenting?
    Code
    More Code
5. Did that work? No, so we will try with separation:

    Code
    More Code

6. Now I will try more indenting, to match the bullet margin, plus 4:

       Code
       More Code

7.  Well that was disappointing. How about we indent and use backticks together?
       ```
       Code
       More Code
       ```
8. No such luck.

---

* Oh look, it's some [Apache config](http://pygments.org/docs/lexers/#lexers-for-non-source-code-file-types):

    ```apache
    <Directory /foo/bar>
      Order allow,deny
      Deny from all
    </Directory>
    ```

* Wasn't that fun?
@patcon

This comment has been minimized.

Copy link

@patcon patcon commented Jun 10, 2012

This was so effing helpful! Thanks man

@patcon

This comment has been minimized.

Copy link

@patcon patcon commented Jun 28, 2012

I thinkg they might have fixed this inconsistency and you don't need to fence -- just indent level x 4 spaces. Suddenly, this started working for me:

  • Testing

  • Testing again

    $ indented code
    
@patcon

This comment has been minimized.

Copy link

@patcon patcon commented Jun 28, 2012

Relevant: github/github-flavored-markdown#29

@dergachev

This comment has been minimized.

Copy link

@dergachev dergachev commented Jun 28, 2013

This is the best I could do: https://gist.github.com/dergachev/97ba9add0e27cac38990
Not too happy with how it looks.

@dminkovsky

This comment has been minimized.

Copy link

@dminkovsky dminkovsky commented Sep 20, 2013

Thank you!

@carlsednaoui

This comment has been minimized.

Copy link

@carlsednaoui carlsednaoui commented Nov 29, 2013

Awesome, thanks for sharing this!

@boolpath

This comment has been minimized.

Copy link

@boolpath boolpath commented Apr 9, 2014

👍

@apotonick

This comment has been minimized.

Copy link

@apotonick apotonick commented Apr 16, 2014

👍 Thanks!

@sjackman

This comment has been minimized.

Copy link

@sjackman sjackman commented May 13, 2014

👍 Thanks for taking the time to post this note.

@amitsaurav

This comment has been minimized.

Copy link

@amitsaurav amitsaurav commented May 30, 2014

Thanks for sharing!

@korun

This comment has been minimized.

Copy link

@korun korun commented Jun 6, 2014

👍 Thanks!

@rosexd

This comment has been minimized.

Copy link

@rosexd rosexd commented Jun 13, 2014

Thank you! I was looking for a way to do this inside of my application!

@ceriottm

This comment has been minimized.

Copy link

@ceriottm ceriottm commented Jun 18, 2014

👍 Thanks

@adammagana

This comment has been minimized.

Copy link

@adammagana adammagana commented Jul 11, 2014

+1 👍 thank you!

@steinnes

This comment has been minimized.

Copy link

@steinnes steinnes commented Jul 14, 2014

Best gist ever!

@cm325

This comment has been minimized.

Copy link

@cm325 cm325 commented Nov 18, 2014

😃 +1

@sankalp-khare

This comment has been minimized.

Copy link

@sankalp-khare sankalp-khare commented Nov 25, 2014

Muchas gracias!

@jplehmann

This comment has been minimized.

Copy link

@jplehmann jplehmann commented Jan 12, 2015

+1

@mdminhazulhaque

This comment has been minimized.

Copy link

@mdminhazulhaque mdminhazulhaque commented Feb 8, 2015

Laughed so hard. Thanks.

A new line right after the list entry fixed my problem.

@mhulse

This comment has been minimized.

Copy link

@mhulse mhulse commented Feb 9, 2015

Since Github updated their MarkDown (no longer GHFM???) this no longer works. Frustrating as all my docs are borked.

Another example:

  1. Blah
$ echo $PATH
  1. Foo blah
  2. Blah blah baz

Source:

1. Blah

 ```bash
$ echo $PATH
```

1. Foo blah
1. Blah blah baz

Note the one space before the fenced code block. Much easier to add a single space when in a browser textarea. 👍

@mreid-moz

This comment has been minimized.

Copy link

@mreid-moz mreid-moz commented Feb 17, 2015

Thanks!

@asoplata

This comment has been minimized.

Copy link

@asoplata asoplata commented Mar 13, 2015

This was very frustrating - thanks for pointing out the solution!

@pmccarren

This comment has been minimized.

Copy link

@pmccarren pmccarren commented Mar 21, 2015

👍

@drKnoxy

This comment has been minimized.

Copy link

@drKnoxy drKnoxy commented May 22, 2015

padding is still off between lists that have a codefence, and the list following it

@scheffield

This comment has been minimized.

Copy link

@scheffield scheffield commented May 25, 2015

sweet, thanks man!

@zeusdeux

This comment has been minimized.

Copy link

@zeusdeux zeusdeux commented Jun 22, 2015

Thanks so much man!

@perlun

This comment has been minimized.

Copy link

@perlun perlun commented Aug 13, 2015

Thanks, useful it is!

@vargavince91

This comment has been minimized.

Copy link

@vargavince91 vargavince91 commented Sep 9, 2015

👍

@vajda

This comment has been minimized.

Copy link

@vajda vajda commented Oct 30, 2015

thanks!

@kursion

This comment has been minimized.

Copy link

@kursion kursion commented Dec 15, 2015

Actually, just a white line under the code is enough.

Thanks 👍

@natanavra

This comment has been minimized.

Copy link

@natanavra natanavra commented Dec 28, 2015

Thanks mate, GFM got me frustrated for a moment there.

@codepodu

This comment has been minimized.

Copy link

@codepodu codepodu commented Jan 13, 2016

So frustrating, thank you so much for this!

@sammcj

This comment has been minimized.

Copy link

@sammcj sammcj commented Feb 4, 2016

Massive thank you, this has been grinding my gears for ages

@mikeweilgart

This comment has been minimized.

Copy link

@mikeweilgart mikeweilgart commented Feb 18, 2016

Thanks so much!

@glyph

This comment has been minimized.

Copy link

@glyph glyph commented Feb 20, 2016

why can't you star a gist? this is a great gist. @mhulse's example was particularly helpful ;)

@Saucy

This comment has been minimized.

Copy link

@Saucy Saucy commented Mar 4, 2016

@glyph You can, top of the page.

@yj14n9xyz

This comment has been minimized.

Copy link

@yj14n9xyz yj14n9xyz commented Apr 29, 2016

Thanks!

@aav7fl

This comment has been minimized.

Copy link

@aav7fl aav7fl commented May 2, 2016

This was really helpful. I've been trying to figure out the exact way to have a code block in between ordered lists, and this worked! Thanks!

@lyweiwei

This comment has been minimized.

Copy link

@lyweiwei lyweiwei commented May 5, 2016

Try it

  1. hello
```javascript
console.log('hello world');
```
  1. world
@cherrot

This comment has been minimized.

Copy link

@cherrot cherrot commented Jun 29, 2016

This does not work in GitHub Pages(someuser.github.io), which uses kramdown as the only supported markdown parser.

According to Planet Jekyll FAQ,The key is to indent your fenced code block lined up with the list item. Also need to put a separating newline above and below the fenced block:

Q: How can I get backtick fenced code blocks (e.g. ```) working inside lists (with kramdown)?

The gist is that the indentation for the code block in lists is determined by the column number of the first non-space character after the list item marker. Huh?

Let's use some examples (note the leading spaces get replaced with dots e.g. · to help along):

Bulleted List

*·some text     =>  use 2 spaces indentation e.g.

  ```
  $ gem install beerdb
  ```

*···some text   =>  use 4 spaces indentation e.g.

    ```
    $ gem install beerdb
    ```

Numbered List

1.·some text    =>  use 3 spaces indentation e.g.

   ```
   $ gem install beerdb
   ```

==> If you line up the fenced code block with the "natural" list indentation, it will work.

For more examples, see the syntax highlighter sandbox list page - (source).

@bigjosh

This comment has been minimized.

Copy link

@bigjosh bigjosh commented Sep 6, 2016

Wasted 30 mins trying to guess this, you saved me from wasting hours more! Thanks!

@baipi

This comment has been minimized.

Copy link

@baipi baipi commented Sep 7, 2016

Very VERY usefull ! 👍

@haat-reassured

This comment has been minimized.

Copy link

@haat-reassured haat-reassured commented Nov 4, 2016

Can you also add:
4. Also, don't forget to put a space (or 4 spaces for 2nd level) before the number.

@sfegan

This comment has been minimized.

Copy link

@sfegan sfegan commented Dec 29, 2016

Thank you!

@elquimista

This comment has been minimized.

Copy link

@elquimista elquimista commented Mar 6, 2017

Awesome. Thanks for the tip!

@mgalgs

This comment has been minimized.

Copy link

@mgalgs mgalgs commented Mar 29, 2017

+1 would fence code blocks again

@mboyar

This comment has been minimized.

Copy link

@mboyar mboyar commented Aug 26, 2017

you great, unordered lists were problem with code blocks for me, not now.

@youknowjack

This comment has been minimized.

Copy link

@youknowjack youknowjack commented Oct 6, 2017

you saved my sanity. thanks.

@danhamill

This comment has been minimized.

Copy link

@danhamill danhamill commented Nov 29, 2017

+1

@RichardBronosky

This comment has been minimized.

Copy link

@RichardBronosky RichardBronosky commented Apr 7, 2018

You Rock!

@mbigras

This comment has been minimized.

Copy link

@mbigras mbigras commented Jul 14, 2018

Literally scrolled all the way down to say "You rock!" and saw this awesome picture right here at the bottom 🎉

@nolanmoore

This comment has been minimized.

Copy link

@nolanmoore nolanmoore commented Feb 27, 2019

I was searching for this solution for a bit there, thanks much 👍

@rfbryan

This comment has been minimized.

Copy link

@rfbryan rfbryan commented Mar 25, 2019

w00t!

@MarkFilus

This comment has been minimized.

Copy link

@MarkFilus MarkFilus commented Jul 18, 2019

Thanks for posting this!

@mimoo

This comment has been minimized.

Copy link

@mimoo mimoo commented Nov 8, 2019

<3

@physcrowley

This comment has been minimized.

Copy link

@physcrowley physcrowley commented Nov 18, 2019

Thanks. the 4* indent-level number of spaces (with newlines before and after) were the key. Both the Atom editor and Github website are now showing the same format.

@mrcoleman

This comment has been minimized.

Copy link

@mrcoleman mrcoleman commented Jul 16, 2020

Thank you for solving this issue and publishing the results.

@rewitt1

This comment has been minimized.

Copy link

@rewitt1 rewitt1 commented Sep 16, 2020

Here is one more thank you. 👍

@Frantz-B

This comment has been minimized.

Copy link

@Frantz-B Frantz-B commented Sep 25, 2020

I thinkg they might have fixed this inconsistency and you don't need to fence -- just indent level x 4 spaces. Suddenly, this started working for me:

  • Testing
  • Testing again
    $ indented code
    

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.