How to Add Syntax Highlighting to Code on Your Website

It's easy to add syntax highlighting to any code you wish to embed into your website or existing project. Let me show you how.
Highlight.js:
highlightjs.or...
Available Styles:
github.com/hig...
Supported Languages:
github.com/hig...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #web #website

[@pharaoh9483]

Nice, im using this in my django blog app, works great. thanks!

[@koladechris]

Highlight JS is great. It helped me add syntax highlighting to my Next JS blog few weeks ago.

[@amv_energy682]

Can you share the link of your blog?

[@fahadmullaji]

Awesome video

[@outstanding-people]

helpful video. thank you verymuch

[@ryantoh6725]

Amazinggg 👏 thanks!

[@TheBinary0101]

Thx lots dude, exactly what I was trying to do!!

[@y01cu_yt]

Thanks a lot

[@vectoralphaSec]

What about for Python in Django? This work for that?

[@alexanderkomanov4151]

Thanks a lot!!!!

[@rwzaki]

Thanks!
NOTE: I tried it and it didn’t work for me at first, and it is because had to add "https:" to the href value of the link element and the script. Because it is missing in the documentation as we would normally just copy (they're just putting the path without https:).

[@Jacob_Price]

thanks!

[@alephzero7808]

How about React applications? How to turn this into React components?

[@axmadsaugi8273]

How to add some function like copy to clipboard, and dark mode...
Thanks you very much ..@dcode

[@alexspencer7170]

Nice!!

[@prnv_777]

I cannot get the cdnjs code anywhere on the website. Where is it? Please someone help me out.

[@aogunnaike]

Awesome

[@vectoralphaSec]

But how do you add the code in the first place?

[@codercrust8101]

Hii @decode, whenever I'm including the libraries in my code like this(#include) so in the output screen it's showing like this(#include) only. All the content of the line after < is now showing. So how I can fix this.

[@dmino1612]

You need to replace all "" to ">" because HTML thinks that is a HTML element

[@greenarcade1379]

What if i want to do this in react?

[@dkazmer2]

This tech stopped working sadly

[@pharaoh9483]

You gotta look for it, I forgot how I did it but it still works it’s just in a different part of the website

[@toplesasinan2382]

on my code the code dont add line break. do we need to add manually?
mine:
let a = b; console.log(a);
expected:
let a = 1;
console.log(a);