DEV Community

Cover image for How to add code highlighting and CodePen to your Dev.to posts.
Harry Naruto
Harry Naruto

Posted on

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

This is very simple


const turorialFunction = (name) => {
  console.log(`Hello ${name}`)
}
Enter fullscreen mode Exit fullscreen mode

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:

codepen

Capture

Top comments (0)