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?

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?

• javascript
• npm
• prism.js

• npm as in remote repository, so that you won't have to download the file into your project? – silicakes Commented Jun 7, 2016 at 11:34
• @silicakes npm as in package manager for a Vue.js app (similar to React.js) – Jivan Commented Jun 7, 2016 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 Commented Jun 7, 2016 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 Commented Jun 7, 2016 at 16:06
• All's good, glad you found your answer! – silicakes Commented Jun 7, 2016 at 16:08

1 Answer 1

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