客戶端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

回答

相關問題