DEV Community

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

Hendrik on September 10, 2018

The simple truth of the matter is that: const turorialFunction = (name) => { console.log(`Hello ${name}`) } Enter fullscreen mode ...

Read full post

Maxime • Jun 7 '19 • 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:

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!");
}

Lanae BK • Mar 25 '20

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

Maxime • Mar 27 '20

I didn't ☹️

rhymes • Sep 10 '18

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!');
}

Julia:

println("hello world")

No Cobol though :D

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

Kishor Jena • Jun 12 '22

Can you tell me the name of the theme for JS. I hope this available in vscode.

Max Cerrina • Sep 11 '18

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

rhymes • Sep 11 '18

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

Hendrik • Sep 11 '18

Glad that part is helping 😁

tux0r • Sep 10 '18

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.

Hendrik • Sep 10 '18

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 👍

erikest • Apr 9 '19

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

Stevie G • May 17 '19

Thanks mate! Exactly what I was looking for!

Martinez • Feb 5 '23

You can try change the language

function CSS {
    console.log(`this is a example whit the flag css`)
}

function Typescript {
    console.log(`this is a example whit the flag typescript`)
}

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

Anand Kumar • May 5 '19

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?

Hendrik • May 5 '19

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.

Abdallah Mansour • Feb 26 '20


javascript dbdndn

Rakesh Reddy Peddamallu • Aug 30 '23


console.log("hello")

Zachary Dinerstein • Jul 21 '21

Not working for me. Do i need a space between


 and javascript ?

Gus Eulalio • Feb 1 '20

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

Chad Steele • Oct 30 '19

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

Hendrik • Nov 1 '19

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

Miguel Ben • Aug 2 '20

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?