13

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?

5
  • 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

18

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();
2
  • 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.. Commented Jan 6, 2018 at 9: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
    Commented Apr 24, 2018 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.