DEV Community

loading...
Cover image for How to add syntax highlighting to markdown code blocks

How to add syntax highlighting to markdown code blocks

Eli H. Schei
Senior front-end developer who mainly work in the Microsoft 365 -sphere. šŸ‘©šŸ»ā€šŸ’» Sharing the things I know, and the things Iā€™m learning. I also like to draw āœšŸ»
Originally published at elischei.com 惻1 min read

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

Discussion (0)