How to add code highlighting to your Dev.to posts.
Hendrik
Sep 10 '18
γ»1 min read
The simple truth of the matter is that:
const turorialFunction = (name) => {
console.log(`Hello ${name}`)
}
does look way nicer than:
const turorialFunction = (name) => {
console.log(`Hello ${name}`)
}
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>```</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).

Quick Tip: Transform an Array into an Object using .reduce()
Frederik π¨βπ»β‘οΈπ Creemers - Feb 17

High level view and logic separation in React
Tomek - Feb 17

Automating testing, building and publishing of TypeScript libraries
Karolis - Feb 17

I did a quick search in the code: dev.to uses the Redcarpet Ruby library to parse Markdown with rouge which does the highlighting part.
The list of lexers is impressive:
Dart:
Julia:
No Cobol though :D
You can find the code in devto here and here and here
In theory, yes (although I try to resist using non-standard Markdown features).
In practice, the list of languages seems to be arbitrarily chosen:
Ahh interesting aspect. I will make sure to mention that above. Haven't looked into the fundamentals of dev.to but I guess they are using a code highlighter somewhere and are only including a limited amount of plugins, as in language support, to keep bundle size down.
Maybe a good candidate for improvement π
Also shoutout for the "how I got this to display" part because I sure WAS wondering how you got the literal
```javascript
to displayGlad that part is helping π
yeah, that's great, I would have used screenshots :D
Thanks for this!
You are welcome :)