329

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

Improve this question
2

5 Answers 5

Reset to default
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();
Improve this answer
7
  • 3
    I see. Somehow I didn't try that, and I had missed it on the markdown editing help page as well. 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. 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. Commented Mar 25, 2015 at 0:10
  • @a_m0d, How can we do it without having the first hanging line example? 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 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. Commented Jan 20, 2016 at 9:40
  • 1
    In my case 4 spaces worked Commented Dec 23, 2022 at 20:27
109

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 -->).

Improve this answer
7
  • 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. 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. 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. Commented Aug 11, 2015 at 21:13
  • @BradGilbert, I found a better solution: meta.stackexchange.com/questions/3792/… Commented Jan 20, 2016 at 9:41
21 
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 four more spaces beyond what's needed to indicate that the line is within the list item. In this example, that's 7 spaces: 3 spaces to line the start of the text up with the list item indent (here, the three characters of "2. "), plus 4 additional spaces to indicate the lines are code, for a total of 7 spaces:

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

Improve this answer
5
  • How can we do it without having the first hanging line? 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? 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/… Commented Aug 11, 2015 at 21:09
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

Improve this answer
6
  • Ok. Now that I look again I see it. Somehow I missed it the first time. Commented Jul 9, 2009 at 14:09
  • Wish I could accept multiple answers because this is really helpful too. 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. 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
5

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.

Improve this answer
6
  • The line heights do look a little awkward though... Commented Dec 25, 2011 at 1:13
  • How to show the "dot" (or numeral index)? Commented Aug 5, 2015 at 8:36
  • @Pacerier: You mean the dot in "1."? It should be there. Commented Aug 5, 2015 at 9:46
  • Ok, seems to work on FireFox... but this is what Chrome sees: i.sstatic.net/yaKGq.png Commented Aug 5, 2015 at 10:06
  • Update: Brad has managed to do it, via <!-- --> meta.stackexchange.com/questions/3792/… Commented Aug 11, 2015 at 21:15
  • @Pacerier: Wow. Another stupid Chrome bug. Commented Aug 12, 2015 at 4:16

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.