客戶端Prism.js與npm

Question

我正在嘗試使用Prism.js語法高亮顯示器客戶端作為npm依賴項，而不是從<script src="...">標簽加載它。 這是package.json中的Prism引用

{
    "dependencies": {
        "prismjs": "^1.5.1"
    }
}

我試圖在我的代碼中使用它的方式

import Prism from 'prismjs'
Prism.highlightAll();

這會產生以下結果：

• 令牌化適用於基本語言（html，javascript ...）
• 標記不適用於其他特定語言（lua，把手......）
• 對於所有語言，不應用語法着色（似乎沒有加載css文件）

所以我很想知道

• 是否有其他語言特定的包（例如prismjs-handlebars）？
• 是否有導入css的特定於主題的包（例如prism-okaidia）？

-

TL; DR

如何從npm而不是腳本標簽加載/使用Prism.js客戶端？

Answer 1

我終於找到了這樣做的方法。

1.將style-loader和css-loader到package.json

{
    "dependencies": {
        "style-loader": "^0.13.1",
        "css-loader": "^0.23.0",
        "prismjs": "^1.5.1"
    }
}

2.在webpack.config.js加載css文件

module: {
    loaders: [
        {
            test: /\.css/,
            loader: 'style-loader!css-loader'
        }
    ]
}

3.在應用程序中導入所需的文件

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