сторона клиента Prism.js с НПМ

Question

Я пытаюсь использовать Prism.js Syntax Highlighter стороны клиента как npm зависимости, а не загружать его из <script src="..."> тегов. Вот ссылка Prism в package.json

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

И, как я пытаюсь использовать в своем коде

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

Это дает следующие результаты:

• Tokenizing произведения для базовых языков (html, javascript ...)
• Tokenizing не работает для других конкретных языков (lua, handlebars ...)
• Для всех языков, синтаксис не применяется (файл CSS, кажется, не загружен)

Так мне интересно,

• Существует ли другие пакеты конкретного языка (например, prismjs-рули например)?
• Существуют ли тематические пакеты (например, призмы-окаидии), которые будут импортировать css?

-

TL; DR

Как загрузить/использовать Prism.js стороне клиента от npm вместо тэгов сценария?

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. Загрузите 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();