36

Normally, when I post some code, I can just type the code, highlight it and press Ctrl+K to indent it four spaces to get the markdown code highlighting.

However, when I have a numbered list such as the one below, the code beneath each bullet must be indented by 8 spaces instead of 4. When I press Ctrl+K twice, it just reverses the indentation rather than giving me 8 spaces.

Is there a keyboard shortuct to give me 8 spaces on a highlighted section of code? (I realize going to each line and hitting Space four times will work, but it can slow if one has a lot of code).

  1. This

    Sample code
    
  2. Is

  3. A
  4. List
3
  • 3
    I had no idea you could have indented code blocks inside lists. Every time I write a post with code blocks in lists, I end up scrapping the list and using headings instead since the indentation looks so bad. This is good to know. Commented May 19, 2015 at 14:58
  • Not a keyboard shortcut but this post shows using the tags <pre><code></code></pre> as another approach. That way I can make changes and not have to worry about kludging the indentation again if I make a mistake or need to paste something back in. .
    – Matt
    Commented May 22, 2015 at 2:58
  • I've just spent an hour looking at this exact issue. It is now that I've found the solution. I think the MarkDown used at SO is full of such issues and I would prefer explicit markup in SO posts (at least give us a choice).
    – HankCa
    Commented Jan 29, 2018 at 3:10

4 Answers 4

30

Unfortunately, there is no existing tool to conveniently format code block in ordered/unordered list.

I usually use this trick to apply the formatting, though.

  • Add one line of random text after the block of code to be indented (one non-space character is sufficient).
  • Select the block of code to be indented, Ctrl + K to indent by 4 spaces
  • Extend the selection to the random line of text, Ctrl + K to indent by another 4 spaces
  • Delete the line of random text.

There is also the option of using an external editor like Notepad++, SublimeText or Atom to do the indentation.

1
  • 3
    I've been using an external editor workaround for large code blocks but your trick is a good one to know.
    – merlin2011
    Commented May 19, 2015 at 19:22
8

There are workarounds, but it's not fast enough. You should use the following user script from StackApps: Better handling of indentation and the TAB key when editing posts.

It adds the Tab and Shift+Tab shortcuts to the SE editor.

1
  • Awesome script! Thanks for that. Commented May 21, 2015 at 17:46
4

For large code blocks, nhahtdh's answer works perfectly. For single lines of code, I use this trick:

  • Start and end the line of code with the backtick (grave accent `), just as you would an in-line block of code: `string example = "Like this..." `
  • Then highlight that line and hit Ctrl+K as usual.

This example shows that both solutions line up correctly:

  1. List item

    bool truth = true; // Using grave accents.

    bool lies = false; // Using 8 space indentation.
    if (truth == lies)
    {
        Console.WriteLine("Congrats on your election!");
    }
    
  2. List item

2
  • 5
    The disadvantage of this option is that code highlighting from backticks doesn't get any additional styling, like colored class names. It also looks quite bad for code blocks spanning multiple lines.
    – Cerbrus
    Commented May 20, 2015 at 10:07
  • @Cerbrus Quite so, which is why I only use it on single lines of code as mentioned. I didn't notice the missing styles though, so thanks for pointing that out!
    – OhBeWise
    Commented May 20, 2015 at 14:15
3

You can work around the issue a bit using HTML comments.

These code blocks don't require extra spaces, but they're not in line with the list item above them (which, in my opinion, isn't necessarily a bad thing):


  1. Testing
Code block!
  1. Another numbered line
Code block
    with multiple
lines!
  1. Continuing
  2. The list

Raw code for this example:

1. Testing

<!---->

    Code block!

2. Another numbered line

<!---->

    Code block
        with multiple
    lines!

3. Continuing
4. The list

Please note that all newlines in that source code are mandatory.

7
  • What's with the downvote? This is a working alternative to adding spaces manually, in order to have codeblocks in lists...
    – Cerbrus
    Commented May 19, 2015 at 12:52
  • 5
    Notice the difference of the left-hand border in your answer and the question. If indented using 8 spaces in source, the code block is indented along the list items when rendered, which your solution does not support. Commented May 19, 2015 at 13:21
  • 3
    @Angew: That's a possible downside I explicitly mentioned in my answer. However, if your code is long, the extra available space could be beneficial just as well. How is this answer incorrect or not useful? Copy-pasting some HTML comments isn't more work than the workaround the other answer offers.
    – Cerbrus
    Commented May 19, 2015 at 13:26
  • 4
    @Cerbrus The problem is not how it looks like (which might be beneficial indeed). The problem is that the generated html is semantically wrong.
    – Oriol
    Commented May 19, 2015 at 14:09
  • 1
    @Oriol: Who cares if the HTML is wrong? Actually, how is it wrong? The only thing that matters here is that it's displaying correctly. It's just a way to have a list with code blocks. This workaround allows the user to hit Ctrl+K just once to format the code as a code block.
    – Cerbrus
    Commented May 19, 2015 at 14:11
  • 4
    Maybe it's just my OCD, but "outdented" code blocks are simply wrong. Period. On many levels.
    – deceze Mod
    Commented May 19, 2015 at 14:44
  • 2
    ^ Opinion. Period. Imo, code blocks don't belong in those lists in the first place.
    – Cerbrus
    Commented May 19, 2015 at 14:45

You must log in to answer this question.

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