13

我正在尝试使用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）？
  • 是否有特定主题的包（例如 prism-okaidia）可以导入 css？

--

TL;博士

如何npm从脚本标签而不是脚本标签加载/使用 Prism.js 客户端？

4

1 回答 1

16

我最终找到了做到这一点的方法。

1.添加style-loader和css-loader到package.json

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

2.加载css文件webpack.config.js

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();
于 2016-06-07T12:01:43.120 回答