DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

doldoki
doldoki

Posted on

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

Collapse
 
suyashvash profile image
Suyash Vashishtha

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

Collapse
 
_moehab profile image
Mahmoud Ehab

alt

Collapse
 
suyashvash profile image
Suyash Vashishtha

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

Thread Thread
 
_moehab profile image
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.

Thread Thread
 
suyashvash profile image
Suyash Vashishtha • Edited on

Finally I found a way ..

 const [state, setState]= useState(0);
Enter fullscreen mode Exit fullscreen mode

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

code

Super Useful CSS Resources

>> Check out this classic DEV post <<