DEV Community

Cover image for How to add code highlighting to your Dev.to posts.
Hendrik
Hendrik

Posted on

How to add code highlighting to your Dev.to posts.

The simple truth of the matter is that:

const turorialFunction = (name) => {
  console.log(`Hello ${name}`)
}
Enter fullscreen mode Exit fullscreen mode

does look way nicer than:

const turorialFunction = (name) => {
  console.log(`Hello ${name}`)
}
Enter fullscreen mode Exit fullscreen mode

when writing a post here on Dev.to.


How to do it

Dev.tos posts are based on Markdown. Within Markdown we can use identation or so called Code Blocks to specify sections of code. The later ones are indicated using ```. Read more about this in this cheatsheet.

Using the three ` variant we can also specify a language for the code block. A lot of tooling build on top of Markdown utilized this characteristic to implement richer features. But the simplest of them is code highlighting. The above nicely colored code snippet is achieved by starting the code block with ```javascript.

The full example for the above would be:

```javascript
const turorialFunction = (name) => {
  console.log(`Hello ${name}`)
}
```

And if you are now wondering how the hell I got that to display:

<pre>
```javascript
const turorialFunction = (name) => {
  console.log(`Hello ${name}`)
}
```
</pre>

and the inline code is: <code>&#96;&#96;&#96;</code>.


Here is where my explanations stop and your colorful posts start.

The list of supported languages is impressive, though not all encompassing (check comments).

Latest comments (41)

Collapse
 
dhanush9952 profile image
Dhanush

It works for .md files also.

Collapse
 
fitrakun profile image
Fitra Rahmamuliani

Thank you for the article! This is very useful!

Collapse
 
rakeshreddy512 profile image
Rakesh Reddy Peddamallu

console.log("hello")
Enter fullscreen mode Exit fullscreen mode
Collapse
 
blessingtutka profile image
blessingtutka

Is it possible for single line code?
Cause I've tried this Code here{.language}.
It doesn't work on devto markdown editor.

Collapse
 
titre123 profile image
Ola-Balogun Taiwo

Thanks for the tip. Really appreciate

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thanks for sharing..

Collapse
 
martinez profile image
Martinez

You can try change the language

function CSS {
    console.log(`this is a example whit the flag css`)
}
Enter fullscreen mode Exit fullscreen mode
function Typescript {
    console.log(`this is a example whit the flag typescript`)
}
Enter fullscreen mode Exit fullscreen mode

I say this in case someone thinks that javascript is the only language that works.

Collapse
 
maxwellnewage profile image
Maximiliano Burgos

Nice article! I'll use it!

Collapse
 
kishorjena profile image
Kishor Jena

What is the name of the color scheme. It looks pretty. I want to replace the cobalt2 with this in vscode.

Collapse
 
ganeshshetty195 profile image
Ganesh Shetty

Thanks for this post, was helpful