Client-side Prism.js with npm

Question

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:

Tokenizing works for basic languages (html, javascript...)
Tokenizing does not work for other specific languages (lua, handlebars...)
For all languages, syntax coloring isn't applied (css file doesn't seem loaded)

So I'm wondering

Are there other language-specific packages (like prismjs-handlebars for instance)?
Are there theme-specific packages (like prism-okaidia for instance) which would import the css?

--

TL;DR

How to load/use Prism.js client-side from npm instead of from script tags?

npm as in remote repository, so that you won't have to download the file into your project? — silicakes, Jun 07 '16 at 11:34
@silicakes npm as in package manager for a Vue.js app (similar to React.js) — Jivan, Jun 07 '16 at 11:36
gotta say that I didn't get the question up until I read your answer, you basically wanted to compile imported statements into your source using webpack. Got me quite confused[: — silicakes, Jun 07 '16 at 15:54
@silicakes sorry about that, by the time I wrote the question I was very confused too, hence the lack of clarity despite the simple thing I actually wanted to do — Jivan, Jun 07 '16 at 16:06

Jivan · Answer 1 · 2017-09-01T09:23:24.713

17

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();

edited Sep 01 '17 at 09:23

answered Jun 07 '16 at 12:01

Jivan

21,522
15
80
131

ughhh only this worked for me `import 'prismjs';`, then Prism was a global, I tried a couple other ways, didn't work, super annoys...I don't see anywhere in their docs that mentions importing code Webpack-style.. – Alexander Mills Jan 06 '18 at 09:19
@AlexanderMills, it may be a little late, but if you add ``` new webpack.ContextReplacementPlugin( new RegExp("^prism-\w+$") , "prism-xml" )``` to your plugins, you can only import the language you need. – wegry Apr 24 '18 at 15:14

Client-side Prism.js with npm

1 Answers1