DEV Community

Cover image for How to add syntax highlighting to markdown code blocks
Eli H. Schei
Eli H. Schei

Posted on • Originally published at elischei.com

7 1

How to add syntax highlighting to markdown code blocks

Maybe I’m just late to the party, but the other day I learned how to add syntax highlighting in markdown code blocks – and it was almost life changing! Ok, I might be exaggerating a little bit – but it do make your code snippets more readable. 😁 And a lot of developer communities accept markdown in comments (and in posts) like dev.to, github etc.

Since I’m so excited about this I thought I should share it! And hopefully some of you will learn something new today 😀

Adding syntax highlighting is really easy, the only thing you have to do is add the programming-language after the first three back-ticks.

Like this:

Alt Text

And here on dev.to the above markdown will be displayed like this:

Below is an empty codeblock

Enter fullscreen mode Exit fullscreen mode

Below is a codeblock with javascript - without syntax highlighting

const myFunction = () => {
    console.log("This is my function");
}
Enter fullscreen mode Exit fullscreen mode

Below is a codeblock with javascript - with syntax highlighting

const myFunction = () => {
    console.log("This is my function");
}
Enter fullscreen mode Exit fullscreen mode

Below is a codeblock with powershell syntax highlighting

Connect-PnPOnline "yourtenantURL" -Interactive

Get-PnPTenantAppCatalogUrl
Enter fullscreen mode Exit fullscreen mode

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below.

Thank you for reading, and happy coding! 🙂

/Eli

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (3)

Collapse
 
matheus4lves profile image
Matheus Alves

Not working for me, and I really don't know why. ...

console.log("I'm applying this technique to this comment to check if it is going to work here")
Enter fullscreen mode Exit fullscreen mode
Collapse
 
matheus4lves profile image
Matheus Alves

Works for comments but it isn't working for my post...

Collapse
 
matheus4lves profile image
Matheus Alves

I think it's a bug. I tested it with a published post and I can see the it applies for both preview and post publish actions. Now, it doesn't work for a draft I'm working on.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay