将 PrismJs 添加到 rails 6 webpacker 站点答案

【问题标题】：Add PrismJs to a rails 6 webpacker site将 PrismJs 添加到 rails 6 webpacker 站点
【发布时间】：2020-05-12 17:19:53
【问题描述】：

我想添加 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"]        
  }],

但没有为液体添加高亮标记。

我在 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 中？

【问题讨论】：

标签： webpacker prismjs

【解决方案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 时运行以下命令来重新编译资产...

bundle exec rails webpacker:compile

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

【讨论】：