247

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


Return to FAQ index

236

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();
    
  • 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
  • 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 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 '16 at 9:40
89

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

  • 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 '16 at 9:41
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

  • 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 - Reinstate Monica Sep 18 '13 at 17:34
  • While this link may answer the question, (recall the rest of this comment from all your LQP review experiences) – iBug says Reinstate Monica Jan 25 '18 at 18:09
  • this is the specific section of the help docs that explains this particular issue. – erik.weathers May 3 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.

4
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

  • 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
  • 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. – Radon Rosborough Mar 14 '17 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. – Cees Timmerman Mar 15 '17 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. – Radon Rosborough Jul 8 '17 at 22:04

You must log in to answer this question.

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