Quick Tip: How to Enable Syntax Highlighting on Dev.to

I recently wrote this in response to another post here.

Most of you probably already are taking advantage of this, but I thought it might help someone, so here we are.

Consider specifying the language in your markdown code blocks because Dev.to has syntax highlighting!

You can do this by adding the language after the first three backticks at the start of your code block.

This text (in the Dev.to editor)...

...produces a code block with highlighting:

const fn = () => {
  const x = "hello"
  return 3 + x
}

Without the js after the backticks, you get non-highlighted code:

const fn = () => {
  const x = "hello"
  return 3 + x
}

It works with a LOT of different languages, not just JavaScript!

The parser unfortunately makes it difficult to explain, but hopefully, the picture is clear enough!

Comments

[toonarmycaptain]

Am I mistaken or is this rather similar to how it works in StackOverflow?

[peerreynders]

The commonmark markdown spec allows for an info string after the opening code fence.

Many markdown engines enable syntax highlighting for supported languages (e.g. GitHub based on linguist) based on that info string.

So yeah, it's a markdown thing.

[Jun Yamog]

Thanks this was helpful for my first post that had code.

[Tushar saxena]

It did helped. Thanks 😄