DEV Community

Discussion on: Syntax Highlighting with Prismjs and React

Collapse
 
jlizanab profile image
José Lizana

awesome !!!!
how to add line numbers?

Collapse
 
ronald3217 profile image
Ronald3217

you need to add the babel-plugin-prismjs plugin and configure the .babelrc file

you can read more on github
github.com/mAAdhaTTah/babel-plugin...

my .babelrc file looks like this:
babel plugin prism

Collapse
 
jkinley profile image
Jeff Kinley

Thanks for the above tut. It's easy to follow. Sadly, I can't get line numbers working. I think it's an issue with the babel plugin. I get the following error:

"Unhandled Rejection (TypeError): Prism.util.isActive is not a function"

I have the latest prism and babel plugin installed in my CRA, but no luck. Any ideas? Could you update your example with working line-numbers? Thanks!

Thread Thread
 
mohamedm10 profile image
Mohamed Mohamud • Edited

I was also unable to make it work with the babel-plugin-prismjs but here is how i managed to do it.
Since the plugins come with the prismjs package, you just need to ;

  1. Import the css file of the plugin from "prismjs/plugins/{plugin-folder}/{plugin.css}" using the import statement.
  2. add the 'line-numbers' class to your <pre> tag.

for more info check out prismjs/plugins.

Edit.
You also need to import the js file of the plugin as well.
more from here