DEV Community

Discussion on: Syntax Highlighting with Prismjs and React

View post

Replies for: 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 foll...

 
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