Code Block Indentation

Use case or problem

  • The ability to indent code blocks.
  • For example, I’m trying to have a code block indented under a bullet point, clearly indicating that it pertains to that bullet point.
  • Right now, a code block always spans across the width of the whole document.

Proposed solution

  • When “```” is typed, start the code block from that position (Ex: 2 indents inside).
  • Also, perhaps, be able to have the cursor on the “outside” of the code block so that we can indent the code block as we wish (just like how the bullet points work).

I think using pure HTML should work as a workaround (perhaps an unsatisfying one):

<li>Not code</li>
<pre><code>Start of the code

More code

End of the code</code></pre>
<li>Also not code</li>

This works in Live Preview, but Reading View garbles it. I’m not sure if it supports language highlighting (and if so, how to trigger it).

1 Like

Thanks for the suggestion. Though, as you mentioned, it’s a bit unsatisfying. :smiling_face_with_tear:

Are you sure this doesn’t work? Works for me.

I indent twice (in my case it’s 4 spaces) and, in both Live Preview and Reading View, the code block is:

  1. properly indented under the bullet point
  2. numbered lists continue as expected




There’s similar feature request. Pasting here for cross reference. Also just to add, it’s a workable solution to indent but visually not consistent especially if u have indentation guide/line


Thanks for the comment. Yea so, I am able to achieve code block indentation. But with some visual inconsistencies.

My Live Preview

My Reading View

It would be nice if for the live preview, the code block’s left side starts at the indentation (as mentioned in the issue you referenced).

And as it gets nested more and more, the indentation seems to increase visually in live preview. The code (//) start becomes more distant in comparison to the bullet point text.