Add color to your code block

So you started a blog on dev.to but when you wrote your code in a code block, you noticed this.

let str = 'Hello World';
console.log(str);

Fortunately, dev.to offers an easy way to add colors to your codes for better display and readability.

let str = 'Hello World';
console.log(str);

Simply add the name of your programming language right after the first three back-ticks(or the opening back-ticks) for your code block.

I tried Python, Javascript, and PHP. They all worked fine.

Comments

[Suyash Vashishtha]

Can you please comment the code for the same ...bcz it is not working for mine . raw SS would do fine....

[Mahmoud Ehab]

[Suyash Vashishtha]

Okk so I found out it only takes native language code...anything for frameworks like React js ?

[Mahmoud Ehab]

It should work in ReactJS code (JSX Components) as well. It does in npmjs.com.
If there's no way to make it works in JSX tags as well here, so I guess dev community developers should use another libarary for rendering md files.

[Suyash Vashishtha]

Finally I found a way ..

 const [state, setState]= useState(0);

This coloring can be achieved like this... It doesn't work without div tho.