# Syntax highlighting indented code

**URL:** <https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840>\
**Category:** Spec\
**Created:** [August 23, 2015, 3:26pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840 "2015-08-23T15:26:43Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ioquatix](https://talk.commonmark.org/user_avatar/talk.commonmark.org/ioquatix/32/1894_2.png) [@ioquatix](https://talk.commonmark.org/u/ioquatix)\
**Post date:** [August 23, 2015, 3:26pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/1 "2015-08-23T15:26:43Z")

</div>

Please see this issue for the context surrounding this discussion.

[https://github.com/jgm/CommonMark/issues/363](https://github.com/jgm/CommonMark/issues/363)

I believe it should be possible to syntax highlight indented code. Presently, this does not appear to be possible.

Ideally, somehow, it would be possible to have raw code blocks (indented by tabs or 2+ spaces) and also specify which language should be used for syntax highlighting.

---

<div class="post-metadata">

**Author:** ![ioquatix](https://talk.commonmark.org/user_avatar/talk.commonmark.org/ioquatix/32/1894_2.png) [@ioquatix](https://talk.commonmark.org/u/ioquatix)\
**Post date:** [December 1, 2015, 3:18am UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/2 "2015-12-01T03:18:14Z")

</div>

I believe this issue warrants further discussion.

---

<div class="post-metadata">

**Author:** ![chrisalley](https://talk.commonmark.org/user_avatar/talk.commonmark.org/chrisalley/32/906_2.png) [@chrisalley](https://talk.commonmark.org/u/chrisalley)\
**Post date:** [December 1, 2015, 7:50pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/3 "2015-12-01T19:50:24Z")

</div>

What would the syntax look like?

---

<div class="post-metadata">

**Author:** ![karaken12](https://talk.commonmark.org/user_avatar/talk.commonmark.org/karaken12/32/178_2.png) [@karaken12](https://talk.commonmark.org/u/karaken12)\
**Post date:** [December 3, 2015, 11:36am UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/4 "2015-12-03T11:36:01Z")

</div>

Hello, ioquatix.

Can you elaborate on what your use case is? I’ve looked back through the linked issue, but I’m not sure what you’re trying to accomplish that you can’t already. Is there some reason you can’t use backticks? Or is there some other reason?

---

<div class="post-metadata">

**Author:** ![ioquatix](https://talk.commonmark.org/user_avatar/talk.commonmark.org/ioquatix/32/1894_2.png) [@ioquatix](https://talk.commonmark.org/u/ioquatix)\
**Post date:** [December 3, 2015, 11:50am UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/5 "2015-12-03T11:50:29Z")

</div>

I am not sure exactly what the syntax should look like, but using the existing mechanism might make sense.

The problem I’m trying to address is to make sure that code blocks are easily readable both as plain text as well as marked up (e.g. to HTML).

The problem right now IMHO is that when you write code, to syntax highlight that code you must do the following:

````
Paragraph paragraph paragraph

```{language}
code code code
code code code
```

Paragraph paragraph paragraph

````

In large documents, because you have a lot of paragraphs and code, because code is not indented, it becomes hard to read.

My preference is to have something like this:

```
Paragraph paragraph paragraph

    code code code
    code code code

Paragraph paragraph paragraph

```

i.e. the code is indented and is easily distinguishable from the surrounding text.

However, as it currently stands, there is no way to highlight this code.

My suggestion is to use the existing code fencing mechanism, but allow it to be indented.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![Crissov](https://talk.commonmark.org/user_avatar/talk.commonmark.org/crissov/32/1455_2.png) [@Crissov](https://talk.commonmark.org/u/Crissov)\
**Post date:** [December 3, 2015, 2:51pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/6 "2015-12-03T14:51:29Z")

</div>

You can still indent fenced code and use as many backticks or tildes as you like, as long as it’s more than 3 and the ending fence has at least as many as the starting one.

Anyhow, markdown processors and their code highlighting modules should support heuristics to guess code languages or settings for the default language **outside of the markdown document** itself. This should cover most cases and the rest can just use the existing fenced syntax.

One could also adopt the convention to reuse the info-string from fences, but put it into a comment in the first line of the code, using a comment syntax supported by the highlighted language.

```
 // JS
 document.write("foo");

```

---

<div class="post-metadata">

**Author:** ![codinghorror](https://talk.commonmark.org/user_avatar/talk.commonmark.org/codinghorror/32/2_2.png) [@codinghorror](https://talk.commonmark.org/u/codinghorror)\
**Post date:** [December 5, 2015, 10:36pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/7 "2015-12-05T22:36:58Z")

</div>

I don’t know if I agree with this – the way we do it, indented blocks are for “code” that you _don’t_ want syntax highlighted, and fenced code blocks are for code that _does_ need syntax highlighting.

So it’s a feature from my perspective.

We used to syntax highlight everything by default on Stack Overflow (we still might actually) and that was acceptable since it was a site for programmers. But I doubt it is a good idea at all for a general audience.

---

<div class="post-metadata">

**Author:** ![jgm](https://talk.commonmark.org/user_avatar/talk.commonmark.org/jgm/32/1360_2.png) [@jgm](https://talk.commonmark.org/u/jgm)\
**Post date:** [December 8, 2015, 1:24am UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/8 "2015-12-08T01:24:07Z")

</div>

Pandoc has a command-line option that allows you to set a default class for all indented code blocks. And I have nothing against implementations adding something like this, but it doesn’t seem like something that should be part of the spec. (Ditto for the initial comment suggestion.)

---

<div class="post-metadata">

**Author:** ![shoogle](https://talk.commonmark.org/user_avatar/talk.commonmark.org/shoogle/32/1259_2.png) [@shoogle](https://talk.commonmark.org/u/shoogle)\
**Post date:** [November 29, 2017, 8:43pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/9 "2017-11-29T20:43:01Z")

</div>

> [@codinghorror](#):
>
> indented blocks are for “code” that you don’t want syntax highlighted, and fenced code blocks are for code that does need syntax highlighting.

Surely using a **fenced** code block _without specifying a language_ should be the proper way to say _“I don’t want syntax highlighting”_? Anyway, it would be nice to have the ability to enable syntax highlighting for indented code blocks. Perhaps something like this:

```markdown
Paragraph paragraph paragraph

   `bash
    echo "Hello, world!"

Paragraph paragraph paragraph

```

Here the language name is indented by 3 spaces and a single backtick, while the code is indented by 4 spaces.

(Maybe highlighting could even be enabled for inline code spans using this syntax: ``code`(language)`, which is quite similar to the link syntax: `[text](link)`.)

In the meantime, there is a workaround for enabling syntax highlighting of indented code. Simply add the backticks and indent by three spaces instead of 4. For example,

**This:**

````markdown
Paragraph paragraph paragraph

   ```bash
   echo "Hello, world!"
   ```
Paragraph paragraph paragraph

````

**Produces this:**

Paragraph paragraph paragraph

```bash
echo "Hello, world!"

```

Paragraph paragraph paragraph

---

<div class="post-metadata">

**Author:** ![codinghorror](https://talk.commonmark.org/user_avatar/talk.commonmark.org/codinghorror/32/2_2.png) [@codinghorror](https://talk.commonmark.org/u/codinghorror)\
**Post date:** [December 1, 2017, 9:49pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/10 "2017-12-01T21:49:20Z")

</div>

> [@shoogle](#):
>
> Surely using a fenced code block without specifying a language should be the proper way to say “I don’t want syntax highlighting”?

Not exactly; sometimes you just want monospace font and it has zip to do with any programming language.

Remember GitHub, _a programming source control site_ essentially invented the 3 backticks. Guess why they invented it? 😉

Anyway I propose this as a helpful rule of thumb, not an ironclad law that must be adhered to under penalty of death, or encoded into the spec, or anything.

---

<div class="post-metadata">

**Author:** ![rokejulianlockhart](https://talk.commonmark.org/user_avatar/talk.commonmark.org/rokejulianlockhart/32/3399_2.png) [@rokejulianlockhart](https://talk.commonmark.org/u/rokejulianlockhart)\
**Post date:** [December 3, 2024, 10:00pm UTC](https://talk.commonmark.org/t/syntax-highlighting-indented-code/1840/11 "2024-12-03T22:00:15Z")

</div>

> [@ioquatix](#):
>
> i.e. the code is indented and is easily distinguishable from the surrounding text.

@ioquatix, this seems somewhat like a case of the undermentioned:

> [@Inline HTML breaks when using indentation](https://talk.commonmark.org/t/inline-html-breaks-when-using-indentation/3317/6):
>
> This is my biggest gripe with Markdown as a whole. I find indentation to be such a significant part of readability that it seems insane that the specification retains the ability to create \<pre\>s using indentation, now that fenced code blocks exist, considering that it makes authoring readable HTML impossible. Consider the support provided to the undermentioned: [https://github.com/11ty/eleventy/issues/2438#issue-1271419451](https://github.com/11ty/eleventy/issues/2438#issue-1271419451) I’ve asked at [Reddit](https://www.reddit.com/r/vscode/comments/1g8t0uj/can_markdowns_indented_code_blocks_be_disabled_in/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button) whether it’s possible to disable in VS Code, if…

Fenced code blocks are an improvement in syntax highlighting capability, and I’m surprised that you solely ever encounter a need to indent when using code blocks. You should use fences.

However, note that Stack Exchange has implemented syntax for this:

> **[Revision](https://meta.stackexchange.com/revisions/360140/2#:~:text=Code%20fences%20are%20also%20now%20the%20preferred%20approach%20for%20creating%20code%20blocks%2C%20as%20the%20%3C!%2D%2D%20language:%20lang%2Dnone%20%2D%2D%3E%20approach%20was%20deprecated%20in%20the%202020%20switch%20to%20CommonMark:)**
>
> Q&A for meta-discussion of the Stack Exchange family of Q&A websites