将PRISMJ添加到rails 6 webpacker站点

我想添加PrismJS

所以我跑了

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>

但是没有为liquid向页面添加突出显示标记

我在Web包开发服务器中遇到错误：

import 'prismjs';

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

---

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

您是否忘记运行

纱线添加babel插件prismjs

？我能让棱镜很好地突出液体

以下是我在

app/javascript/stylesheets/application.js

文件中的内容：

@import "prismjs/themes/prism";

在我的

应用程序.scss

中：

bundle exec rails webpacker:compile

我的

babel.config.js

设置基本上与您的设置相同

另外，如果修改

babel.config.js

，请确保运行以下命令来重新编译资产

否则，您的更改可能不会显示。也就是说，除非在刷新页面和webpacker重新编译所有内容之前对

应用程序.js进行微小更改

@import "prismjs/themes/prism";

bundle exec rails webpacker:compile