The simple truth of the matter is that:
const turorialFunction = (name) => {
console.log(`Hello ${name}`)
}
does look way nicer than:
const turorialFunction = (name) => {
console.log(`Hello ${name}`)
}
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>```</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).
Latest comments (41)
It works for .md files also.
Thank you for the article! This is very useful!
Is it possible for single line code?
Cause I've tried this
Code here
{.language}.It doesn't work on devto markdown editor.
Thanks for the tip. Really appreciate
Thanks for sharing..
You can try change the language
I say this in case someone thinks that javascript is the only language that works.
Nice article! I'll use it!
What is the name of the color scheme. It looks pretty. I want to replace the cobalt2 with this in vscode.
Thanks for this post, was helpful