时间戳

首页 > 解决方案 > 将 PrismJs 添加到 rails 6 webpacker 站点

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

问题描述

我想添加 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 ？

标签： webpackerprismjs

解决方案

你忘记跑步了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 无论如何都会重新编译所有内容。

推荐阅读