DEV Community

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

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

hoverbaum profile image Hendrik ・1 min read

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

Discussion (28)

Collapse
deammer profile image
Maxime • Edited

Does anyone know if dev.to supports highlighting lines of code or combining the diff highlighter with a language highlighter?

My use case is to draw attention to new or update lines of code when I write tutorials.

Something like this:

Javascript syntax highlighting

I know we can use diff but I can't find a way to combine that with code highlighting:

function hello() {
-  alert("Hello!");
+  alert("Hi!");
}
Enter fullscreen mode Exit fullscreen mode
Collapse
lanae_bk profile image
Lanae BK

I am also trying to figure out how to do this - did you ever find an answer?

Collapse
deammer profile image
Maxime

I didn't ☹️

Collapse
rhymes profile image
rhymes

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:

void main() {
  print('Hello, World!');
}
Enter fullscreen mode Exit fullscreen mode

Julia:

println("hello world")
Enter fullscreen mode Exit fullscreen mode

No Cobol though :D

You can find the code in devto here and here and here

Collapse
alephnaught2tog profile image
M. Shemayev

Also shoutout for the "how I got this to display" part because I sure WAS wondering how you got the literal ```javascript to display

Collapse
rhymes profile image
rhymes

yeah, that's great, I would have used screenshots :D

Collapse
hoverbaum profile image
Hendrik Author

Glad that part is helping 😁

Collapse
tux0r profile image
tux0r

In theory, yes (although I try to resist using non-standard Markdown features).

In practice, the list of languages seems to be arbitrarily chosen:

DISPLAY 'COBOL code does not work.' WITH NO ADVANCING.
Collapse
hoverbaum profile image
Hendrik Author

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 👍

Collapse
elanandkumar profile image
Anand Kumar

Hi @hendrik ,
Is there a way that I can change the background colour of the code block from black to white? Like theming or something?

Collapse
hoverbaum profile image
Hendrik Author

I don't think there is. The code highlight is basically a markdown feature and how it looks is defined by dev.to globally. But providing a theme to use for code blocks could be a cool feature for the Frontmatter, I agree.

Collapse
itsmestevieg profile image
Stevie G

Thanks mate! Exactly what I was looking for!

Collapse
tonymet profile image
Tony Metzidis

post was clutch. do you know which Markdown lib dev.to is using?

Collapse
erikest profile image
erikest

shell and console don't seem to add much flavor. I was hoping at least for some #comment coloring...

Collapse
davefollett profile image
Dave Follett

Thank you very much, the <pre> part was a just want I needed.

Collapse
chadsteele profile image
Chad Steele

Any clue how to add a [copy code] to the code block? I recognize this isn't standard markup, but hoping they added it somewhere and/or will add it. wink wink

Collapse
hoverbaum profile image
Hendrik Author

Haven't heard anything about a feature like this. But sounds useful 👍

Collapse
abdallahzalat3 profile image
Abdallah Zalat

javascript dbdndn
Collapse
migben profile image
Miguel Ben

I remember someone made their hyperlink or a tag on the blog to be pink ish with yellow background. I've been trying to figure it out. Does anyone has idea how to do it?

Collapse
guseulalio profile image
Gus Eulalio

Is there a way to pick a different set of colours?
Just wondering. It looks quite ugly some times.

Collapse
lynnewritescode profile image
Lynne Finnigan

Thanks for this!

Collapse
hoverbaum profile image
Hendrik Author

You are welcome :)

Collapse
anzelika profile image
Anzelika

Thank you, mister! 🤓

Collapse
askavy profile image
Collapse
ruannawrites profile image
Ruanna

Thanks for the tip! :)

Collapse
rowjay007 profile image
rowjay007

Thanks for this, Hendrik. Exactly what I need.

Collapse
19bit profile image
Erik 19 bit

Thanks! I'll definitely be using this.

Collapse
nakulkurane profile image
Nakul Kurane • Edited

I've found that "pre" doesn't color the code and it should instead be "code" now.

Forem Open with the Forem app