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

客户端Prism.js与npm

1 个答案: