Skip to content

Instantly share code, notes, and snippets.

@clintel
Created August 19, 2011 02:40
Show Gist options
  • Save clintel/1155906 to your computer and use it in GitHub Desktop.
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?
@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