DEV Community

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

Posted on

206 19 2

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

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (40)

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

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

šŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay