Codepen Syntax Highlighting

1

Hi all,

How do I highlight code in codepen? I am doing technical documentation project but so far none of my efforts to highlight code (JavaScript, JSX to be exact) has worked. I have tried incorporating highlight.js and prism.js through codepen settings but to no avail.

Also, is there any alternative to codepen for submitting these projects? I really hate codepen interface, i’d rather use a service that allows modules for both css and js like codesandbox.io and stackblitz etc.

Edit: Here is the link to my project https://codepen.io/AA87/pen/YOqNgM

As you can see, I am for now using custom code highlighting, but it has quickly become a pain in the backside to write the html to indent the code properly, plus its all in one color.

2

for now i can only think of doing it manually.

3

Hi @AliNisarAhmed,

I know I’m kind of late on this, but I implemented highlight.js for my students. Here’s the instance in codepen. Works great!

https://codepen.io/newnam/pen/KKPWJJw

Hope it helps.