326

Oftentimes, I want to include code samples in a list, for example:

  1. Item One
  2. Item Two, for example:

    private bool ItemTwo()
    {
    return this.IFeelLucky;
    }
  3. Item Three

The problem is that there isn't a good and intuitive way to do this using Markdown. It's doable, but you have to do some formatting black-magic to get it that way, which is just not "nice" to deal with.

Source that produces this:

1. Item One
2. Item Two, for example:
<br/><br/><pre><code>private bool ItemTwo()
    {
        return this.IFeelLucky;
    }</code></pre>
3. Item Three

I would love to just be able to do it this way:

1. Item One
2. Item Two, for example:

    private bool Test()
    {
        return this.IFeelLucky;
    }

3. Item Three

Which results in, well, this:

  1. Item One

  2. Item Two, for example:

    private bool Test() { return this.IFeelLucky; }

  3. Item Three


2

5 Answers 5

318

Code is possible in markdown (see here) - you just have to leave a blank line and then indent by 8 spaces as a minimum.

The text below

* example

        this.isSomeCode = true;

*  
        addMoreCode();

will generate this:

  • example

    this.isSomeCode = true;
    
  • addMoreCode();
    
7
  • 3
    I see. Somehow I didn't try that, and I had missed it on the markdown editing help page as well.
    – lc.
    Commented Jul 9, 2009 at 14:10
  • 4
    That's because it seems very counter-intuitive. Thank you for posting this, I had been despairing of doing the same thing.
    – fool4jesus
    Commented Jan 8, 2014 at 14:53
  • 2
    There should be an easier way to increase and decrease indenting then, because all I did was use the predefined Ctrl-J indent mechanism and it didn't work. How is anyone to know that you have to do an extra 4 spaces, and then if you have a lot of lines, you have to insert these for for each and every one. Not only counterintuitive, but annoying. I do know that if you put a single character at the beginning of a line, you can force it to move over, but that is not intuitive either, esp for nubes.
    – Adrian
    Commented Mar 25, 2015 at 0:10
  • @a_m0d, How can we do it without having the first hanging line example?
    – Pacerier
    Commented Aug 5, 2015 at 8:33
  • @Pacerier I've added an example on the last line - basically just add the bullet point, 2 spaces behind it (to make it a list item), and then start your code on the next line
    – a_m0d
    Commented Nov 16, 2015 at 13:46
  • @a_m0d, Actually the other day Brad had solved it using <!-- --> , but nice, this solution is better and more straightforward.
    – Pacerier
    Commented Jan 20, 2016 at 9:40
  • 1
    In my case 4 spaces worked Commented Dec 23, 2022 at 20:27
108

If you want to add a block of code to a list item, you have to add an extra 4 spaces for every level of that list. You also have to make sure that you leave a blank line before the code block.

code block outside of a list
  • Main list

    code block
    
    • sub list

      code block
      
      second code block
      
      • sub2 list

        code block
        
        • sub3 list

          code block
          

      up two list levels
      
# 4↴
    code block outside of a list

- Main list
#     8↴
        code block
# 4↴
    - sub list

#        12↴
            code block
#     8↴
        <!-- --> # can also be used to set highlighting <!-- language: lang-none -->
#        12↴
            second code block
#     8↴
        - sub<sup>2</sup> list

#            16↴
                code block
#        12↴
            - sub<sup>3</sup> list
#                20↴
                    code block
#     8↴
        <!-- -->
#        12↴
            up two list levels

If you need to force the Markdown processor to start a new section, just add a <p/> or <!-- --> on it's own line at the appropriate level. That's how I managed to follow a list with a code block for this answer.
If you do use <!-- --> you can use it to set the highlighting mode for the following code block as well (<!-- language: lang-none -->).

8
  • nice example, thx. Commented Dec 10, 2009 at 5:44
  • I now use an HTML comment, instead of <p/> . Commented Feb 3, 2010 at 18:34
  • 1
    It would be nice if the code button on the format bar above the edit box did that.
    – Jay Elston
    Commented May 13, 2010 at 17:23
  • +1 : You also have to make sure that you leave a blank line before the code block Commented Sep 10, 2013 at 9:40
  • @BradGilbert, How can we do it without the preceding line? If I use <p>, the "dot" (or numeral) don't appear.
    – Pacerier
    Commented Aug 5, 2015 at 8:35
  • @Pacerier try using <!-- -->. ( That's just a guess, I have no idea what you are talking about. If you post a link to the post I can look at the source and tell you what you need to do. ) Commented Aug 5, 2015 at 15:25
  • 1
    @BradGilbert, Nice, <!-- --> works on Chrome. I think you've just invented the solution to this problem.
    – Pacerier
    Commented Aug 11, 2015 at 21:13
  • @BradGilbert, I found a better solution: meta.stackexchange.com/questions/3792/…
    – Pacerier
    Commented Jan 20, 2016 at 9:41
16
1. Item One
2. Item Two, for example:

    ```private bool Test()
    {
        return this.IFeelLucky;
    }
    ```

3. Item Three

works:

  1. Item One
  2. Item Two, for example:

    private bool Test() { return this.IFeelLucky; }

  3. Item Three

Or indent again to have a prettier code block:

1. Item One
2. Item Two, for example:

        private bool Test()
        {
            return this.IFeelLucky;
        }

3. Item Three

Like this:

  1. Item One
  2. Item Two, for example:

    private bool Test()
    {
        return this.IFeelLucky;
    }
    
  3. Item Three

8
  • How can we do it without having the first hanging line?
    – Pacerier
    Commented Aug 5, 2015 at 8:37
  • @Pacerier What do you mean? Commented Aug 5, 2015 at 9:49
  • Taking your example number "2", the hanging line is Item Two, for example:. How to do it without the hanging line?
    – Pacerier
    Commented Aug 5, 2015 at 10:03
  • @Pacerier I'm still not sure what you mean by "hanging" but it's possible to remove it. Commented Aug 5, 2015 at 11:29
  • If I remove it, the dot disappears in Chrome. See meta.stackexchange.com/questions/3792/… . But thanks anyway, Brad has solved the problem: meta.stackexchange.com/questions/3792/…
    – Pacerier
    Commented Aug 11, 2015 at 21:09
  • 1
    This is wrong. Triple backticks only trigger a code block in Github Flavored Markdown, not in official Markdown (which is [at least currently] used on Stack Exchange). What you have there is four separate pieces of inline code. Commented Mar 14, 2017 at 18:06
  • The triple backticks save 4 spaces per line, at the cost of a unified code block. I don't see why the block is recognized as code yet the lines are rendered separately. Commented Mar 15, 2017 at 15:57
  • @CeesTimmerman This is because Markdown has support for using any number of backticks for inline code formatting. This is to allow for including backticks in your inline code, like ```` ``` `` ``` ```` to give ``` `` ``` (this is not supported in comments though, apparently). Now, Stack Exchange IMO should be using GFM because it's ridiculous to require indentation for code in a web-based editor where nobody views the source and the TAB key doesn't work. But as it stands, this technique is objectively wrong since it does not produce a Markdown code block. Commented Jul 8, 2017 at 22:04
15

This is all documented in the editing help, that little [?] button above the editor.

It's also linked from the sidebar of every edit page.

https://meta.stackoverflow.com/editing-help

6
  • Ok. Now that I look again I see it. Somehow I missed it the first time.
    – lc.
    Commented Jul 9, 2009 at 14:09
  • Wish I could accept multiple answers because this is really helpful too.
    – lc.
    Commented Jul 9, 2009 at 14:11
  • You should edit that guide to include @BradGilbert 'You also have to make sure that you leave a blank line before the code block' Commented Sep 10, 2013 at 9:42
  • 1
    Could you perhaps also add UI support for this? The {} button above the textbox only toggles the indentation on multiple clicks, doesn't increase the indentation. Having to do it manually (or to copy back and forth to a text editor) on long code blocks is pretty tiresome.
    – Sundar R
    Commented Sep 18, 2013 at 17:34
  • While this link may answer the question, (recall the rest of this comment from all your LQP review experiences) Commented Jan 25, 2018 at 18:09
  • this is the specific section of the help docs that explains this particular issue. Commented May 3, 2019 at 19:43
4

If you want to start a list item with a block of code, rather than text, you need to add at least a space character after the bullet or number, then make two line breaks before starting to indent the code block with 8 spaces.

In the following examples, line breaks are denoted by the ↵ symbol.


  • unordered
    
 - ↵
↵
        example

  1. ordered
    
1. ↵
↵
        example

Also see this answer for a real-world example.

6

Not the answer you're looking for? Browse other questions tagged .