Skip to content

Instantly share code, notes, and snippets.

@clintel
Created August 19, 2011 02:40
Star You must be signed in to star a gist
Save clintel/1155906 to your computer and use it in GitHub Desktop.
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?
@cherrot
Copy link

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
Copy link

bigjosh commented Sep 6, 2016

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

@baipi
Copy link

baipi commented Sep 7, 2016

Very VERY usefull ! 👍

@haat-reassured
Copy link

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

@sfegan
Copy link

sfegan commented Dec 29, 2016

Thank you!

@elquimista
Copy link

Awesome. Thanks for the tip!

@mgalgs
Copy link

mgalgs commented Mar 29, 2017

+1 would fence code blocks again

@mboyar
Copy link

mboyar commented Aug 26, 2017

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

@youknowjack
Copy link

you saved my sanity. thanks.

@danhamill
Copy link

+1

@RichardBronosky
Copy link

You Rock!

@mbigras
Copy link

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
Copy link

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

@rfbryan
Copy link

rfbryan commented Mar 25, 2019

w00t!

@MarkFilus
Copy link

Thanks for posting this!

@mimoo
Copy link

mimoo commented Nov 8, 2019

<3

@physcrowley
Copy link

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
Copy link

Thank you for solving this issue and publishing the results.

@rewitt1
Copy link

rewitt1 commented Sep 16, 2020

Here is one more thank you. 👍

@Frantz-B
Copy link

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!

@managedkaos
Copy link

Even after so many years, this gist is giving hope to those of us struggling with markdown!! thank you!!! 😄 🙏

@tejasvi
Copy link

tejasvi commented May 1, 2021

*
    ```
    Block code
    ```
    *
        ```
        Block code
        ```

gives

  • Block code
    
    • Block code
      

Demo

@wickkidd
Copy link

wickkidd commented May 4, 2021

Ten years ago and the gift keeps on giving. Thanks 👍

@FavorMylikes
Copy link

What if I wanna keep the Fenced block code close to the line above.

There are two way to do that.

One is delete the blank line between last item and the block code, but conflict with MD031

Other way is, delete the blank space before back quote `, but then the code is outside of the list.

Is there any solution to do this?

image

@esdnm
Copy link

esdnm commented Sep 21, 2021

From CommonMark Spec, https://spec.commonmark.org/0.30/#example-254

The most important thing to notice is that the position of the text after the list marker determines how much indentation is needed in subsequent blocks in the list item. If the list marker takes up two spaces of indentation, and there are three spaces between the list marker and the next character other than a space or tab, then blocks must be indented five spaces in order to fall under the list item.

@gpranav88
Copy link

  • Check for code in list

    line1  
    ticked `line2`
    quoted "line3"
    

@fmichaut-diff
Copy link

fmichaut-diff commented Mar 29, 2022

Really helpful !

Altho, a few details of that gist could be updated :

  • You don't need to have empty lines around your indented code block if you are using bullet lists
  • You can use only 2 space * level instead of 4 if you are using bullet lists

Test

  • Line1
    ls
    • Line2
      ls -l
Test
----
- Line1
  ```bash
  ls
  ```
  - Line2
    ```bash
    ls -l
    ```

@caogtaa
Copy link

caogtaa commented Nov 16, 2022

Wow, I love markdown again!

@freeflyclone
Copy link

Still valuable in 2023. Thank you!

@DanKaplanSES
Copy link

DanKaplanSES commented Jan 1, 2024

Thank you for writing this it has helped me. Hopefully you don't mind, but I'd like to make some suggestions:

  1. When you say, The key is to indent your fenced block by (4 * bullet_indent_level) spaces., you should also say this applies to the code within the fenced block. In other words, every line of code in the code block need that same (4 * bullet_indent_level) space prefix.
  2. Explicitly point out the Raw button at the upper right of your gist. Clicking on that helped me learn my first bullet point.

This is not a suggestion but it might be interesting to some: technically, you only need (3 * bullet_indent_level) spaces. This is true for any thing you want to include in your bullet point that is written on a different line.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment