客户端Prism.js与npm

我正在尝试使用Prism.js语法高亮度客户端作为npm依赖项，而不是从<script src="...">标记加载它。这里是的package.json客户端Prism.js与npm

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

而且我想在我的代码中使用它的方式棱镜参考

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

这将产生以下结果：

符号化的作品对于基本语言（html，javascript ...）
Tokenizing不适用于其他特定语言（lua，车把...）
所有语言，语法着色不适用（css文件似乎没有加载）

所以我不知道

是否还有其他特定语言包（如prismjs车把例如）？
是否有主题特定的软件包（例如棱镜okaidia）会导入的CSS？

TL; DR

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

来源

2016-06-07 Jivan

npm与远程存储库一样，因此您不必将文件下载到您的项目中？ – silicakes

@silicakes npm在Vue.js应用程序的包管理器中（类似于React.js） – Jivan

得说，直到我阅读你的答案时，我才得到这个问题，你基本上想要将导入的语句编译成源代码的WebPack。让我很困惑[： – silicakes

我终于找到了这样做的方法。

1.添加style-loader和css-loader在webpack.config.js

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

3.的package.json

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

2.负载CSS文件导入所需的应用程序中的文件

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-07 12:01:43 Jivan

ughhh只有这个对我有用'import'prismjs';'，然后棱镜是一个全球性的，我尝试了其他方式，没有工作，超级懊恼......我没有看到他们的文档中提到的任何地方提到导入代码Webpack风格.. –

客户端Prism.js与npm

回答

相关问题