I'm trying to use Prism.js syntax highlighter client-side as an npm
dependency, instead of loading it from <script src="...">
tags. Here is the Prism reference in package.json
{
"dependencies": {
"prismjs": "^1.5.1"
}
}
And the way I'm trying to use it in my code
import Prism from 'prismjs'
Prism.highlightAll();
This produces the following results:
So I'm wondering
--
TL;DR
How to load/use Prism.js client-side from npm
instead of from script tags?
I eventually found the way to do this.
1. Add style-loader
and css-loader
to package.json
{
"dependencies": {
"style-loader": "^0.13.1",
"css-loader": "^0.23.0",
"prismjs": "^1.5.1"
}
}
2. Load css files in webpack.config.js
module: {
loaders: [
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
]
}
3. Import desired files in the application
import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
import 'prismjs/components/prism-handlebars.min.js'
import 'prismjs/components/prism-lua.min.js'
Prism.highlightAll();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With