webpacker - 将 PrismJs 添加到 rails 6 webpacker 站点

Question

我想添加 PrismJS。

https://prismjs.com/index.html

所以我跑了

yarn add prismjs

然后更新 application.js :

import Prism from 'prismjs';

和application.scss:

@import  '~prismjs/themes/prism';

现在它像这样突出显示 JS 和 CSS:

 <pre><code class="language-css">p { color: red }</code></pre>

但是，我无法再添加任何语言。例如液体。

我已尝试按照说明使用 https://github.com/mAAdhaTTah/babel-plugin-prismjs .所以在 babel.config.js 中:

plugins: [
  ["prismjs", {
    "languages": [ "css", "liquid"]        
  }],

但没有为 liquid 的页面添加高亮标记。

我在 webpack-dev-server 中收到一个错误:

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In ..node_modules/prismjs/prism.js

那么，我应该如何正确地将 prism-js babel 插件添加到 babel.config.js 中？

Answer 1

您是否忘记运行 yarn add babel-plugin-prismjs？我能够让棱镜很好地突出显示液体。

这是我在 app/javascript/stylesheets/application.js 文件中的内容:

import 'prismjs';

document.addEventListener('turbolinks:load', () => {
  Prism.highlightAll();
});

在我的 application.scss 中:

@import "prismjs/themes/prism";

我的 babel.config.js 基本上和你的设置一样。

此外，请确保如果您修改 babel.config.js，您将运行以下命令来重新编译您的 Assets ...

bundle exec rails webpacker:compile

否则，您的更改可能不会显示。也就是说，除非您在刷新页面之前对 application.js 进行了微小的更改，否则 webpacker 无论如何都会重新编译所有内容。