loading...

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

imjoshellis profile image Josh Ellis ・1 min read

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

Screen Shot 2020-11-21 at 6.48.45 PM

...produces a code block with highlighting:

const fn = () => {
  const x = "hello"
  return 3 + x
}
Enter fullscreen mode Exit fullscreen mode

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

const fn = () => {
  const x = "hello"
  return 3 + x
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion

pic
Editor guide
Collapse
toonarmycaptain profile image
toonarmycaptain

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

Collapse
peerreynders profile image
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.