Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 158 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

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


Update: In order to use Markdown, you have to indent a minimum of eight spaces. I still stand my ground that this isn't 100% intuitive - you can indent only a single space to continue a list item (see below) - but at least it's good and easy.

1. List item

 Item continued

2. Another list item

Results in:

  1. List item

    Item continued

  2. Another list item

Return to FAQ index

share|improve this question
1  
    
Seems a little silly to close as a dupe a FAQ question, either close in the other direction, or move the FAQ tag. – Lance Roberts Mar 26 '14 at 23:07
up vote 157 down vote accepted

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

  • example

    this.isSomeCode = true;
    
  • addMoreCode();
    
share|improve this answer
3  
I see. Somehow I didn't try that, and I had missed it on the markdown editing help page as well. – lc. Jul 9 '09 at 14:10
2  
That's because it seems very counter-intuitive. Thank you for posting this, I had been despairing of doing the same thing. – fool4jesus Jan 8 '14 at 14:53
    
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 Mar 25 '15 at 0:10
    
@a_m0d, How can we do it without having the first hanging line example? – Pacerier Aug 5 '15 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 Nov 16 '15 at 13:46
    
@a_m0d, Actually the other day Brad had solved it using <!-- --> , but nice, this solution is better and more straightforward. – Pacerier Jan 20 at 9:40

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

share|improve this answer
    
nice example, thx. – quack quixote Dec 10 '09 at 5:44
    
The <p/> trick is brilliant - thanks! – fbrereto Feb 3 '10 at 17:45
    
I now use an HTML comment, instead of <p/> . – Brad Gilbert Feb 3 '10 at 18:34
    
It would be nice if the code button on the format bar above the edit box did that. – Jay Elston May 13 '10 at 17:23
    
+1 : You also have to make sure that you leave a blank line before the code block – Aaron J Lang Sep 10 '13 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 Aug 5 '15 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. ) – Brad Gilbert Aug 5 '15 at 15:25
    
@BradGilbert, Nice, <!-- --> works on Chrome. I think you've just invented the solution to this problem. – Pacerier Aug 11 '15 at 21:13
    
@BradGilbert, I found a better solution: meta.stackexchange.com/questions/3792/… – Pacerier Jan 20 at 9:41

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.

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

share|improve this answer
    
Ok. Now that I look again I see it. Somehow I missed it the first time. – lc. Jul 9 '09 at 14:09
    
Wish I could accept multiple answers because this is really helpful too. – lc. Jul 9 '09 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' – Aaron J Lang Sep 10 '13 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 Sep 18 '13 at 17:34

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.

share|improve this answer
    
The line heights do look a little awkward though... – BoltClock's a Unicorn Dec 25 '11 at 1:13
    
How to show the "dot" (or numeral index)? – Pacerier Aug 5 '15 at 8:36
    
@Pacerier: You mean the dot in "1."? It should be there. – BoltClock's a Unicorn Aug 5 '15 at 9:46
    
Ok, seems to work on FireFox... but this is what Chrome sees: i.stack.imgur.com/yaKGq.png – Pacerier Aug 5 '15 at 10:06
    
Update: Brad has managed to do it, via <!-- --> meta.stackexchange.com/questions/3792/… – Pacerier Aug 11 '15 at 21:15
    
@Pacerier: Wow. Another stupid Chrome bug. – BoltClock's a Unicorn Aug 12 '15 at 4: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

share|improve this answer
    
How can we do it without having the first hanging line? – Pacerier Aug 5 '15 at 8:37
    
@Pacerier What do you mean? – Cees Timmerman Aug 5 '15 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 Aug 5 '15 at 10:03
    
@Pacerier I'm still not sure what you mean by "hanging" but it's possible to remove it. – Cees Timmerman Aug 5 '15 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 Aug 11 '15 at 21:09

You must log in to answer this question.

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