DEV Community

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

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 ...
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
 
kishorjena profile image
Kishor Jena

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

Collapse
 
alephnaught2tog profile image
Max Cerrina

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

Glad that part is helping 😁

Collapse
 
hoverbaum profile image
Hendrik

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
 
erikest profile image
erikest

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

Collapse
 
itsmestevieg profile image
Stevie G

Thanks mate! Exactly what I was looking for!

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

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
 
abdallahmansorr profile image
Abdallah Mansour

javascript dbdndn
Collapse
 
rakeshreddy512 profile image
Rakesh Reddy Peddamallu

console.log("hello")
Enter fullscreen mode Exit fullscreen mode
Collapse
 
zacharydinerstein profile image
Zachary Dinerstein

Not working for me. Do i need a space between


 and javascript ?
Enter fullscreen mode Exit fullscreen mode
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
 
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

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

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
 
lynnewritescode profile image
Lynne Finnigan

Thanks for this!

Collapse
 
hoverbaum profile image
Hendrik

You are welcome :)

Collapse
 
tonymet profile image
Tony Metzidis

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

Collapse
 
davefollett profile image
Dave Follett

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

Collapse
 
nakulkurane profile image
Nakul Kurane • Edited

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

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thanks for sharing..

Collapse
 
askavy profile image
Avnish Jayaswal

Thanks

Collapse
 
ruannawrites profile image
Ruanna

Thanks for the tip! :)

Collapse
 
titre123 profile image
Ola-Balogun Taiwo

Thanks for the tip. Really appreciate

Collapse
 
ganeshshetty195 profile image
Ganesh Shetty

Thanks for this post, was helpful

Collapse
 
anzelika profile image
Anzelika

Thank you, mister! 🤓

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
 
datadeverik profile image
Erik Anderson

Thanks! I'll definitely be using this.

Collapse
 
maxwellnewage profile image
Maximiliano Burgos

Nice article! I'll use it!

Collapse
 
saxenamansi profile image
Mansi Saxena

Thanks for this! Very useful.

Collapse
 
dhanush9952 profile image
Dhanush

It works for .md files also.

Collapse
 
rowjay007 profile image
rowjay007

Thanks for this, Hendrik. Exactly what I need.

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
 
fitrakun profile image
Fitra Rahmamuliani

Thank you for the article! This is very useful!