如何在 Rails 中使用 highlight.js？

Question

我正在尝试在我的 rails 应用程序中使用带有 highlight.js 的语法高亮。 highlight.js 的说明如下 (https://github.com/isagalaev/highlight.js)：

在网页上使用 highlight.js 的最低要求是链接到库以及其中一种样式并调用 initHighlightingOnLoad：

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

我不确定以上三个应该放在哪里。我尝试了几种可能性。大概三个中的第一个，，应该放在views/application/application.html.erb的头部。而且我认为这三个中的第二个，，应该放在包含将突出显示的代码的文件的底部。我认为这三个中的第三个，，应该放在 application.js 文件中。无论如何，我已经尝试过这个和其他几种可能性，但我无法在 Ruby 中突出显示所需的代码。

Answer 1

为我工作..

• 创建文件副本 app\assets\javascripts\highlight.pack.js（在此处查找文件内容：https://highlightjs.org/download/）

• 创建文件副本 app\assets\stylesheets\github.scss（github.scss 或您喜欢的样式，https://highlightjs.org/static/demo/）。不要忘记将@import "github"; 导入到您的文件 app\assets\stylesheets\application.scss

• 创建一个文件 app\assets\javascripts\highlights.js，并复制下面这段代码

如果您使用的是 turbolinks：

$(document).on("turbolinks:load", function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

如果您不使用 turbolinks：

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

完成了。重启你的服务器。

Answer 2

您可以将 highlight.pack.js 直接放在您的 app/assets/javascripts 文件夹中。它将从那里加载到 Rails 资产管道中。

您应该将 default.css 放在您的 app/assets/stylesheets 文件夹中。它也将从那里加载到 Rails 资产管道中（请注意，您可能需要将此文件重命名为 default.css.scss）我不确定您是否必须添加 .scss 文件扩展名（也许有人可以如果他们知道，请编辑此答案 - 现在，将其重命名为 default.css.scss）。

...然后你应该把它添加到你的 app/assets/javascripts/application.js 文件中

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

在你的视图文件中你可以使用这个：

<pre><code>
  Ruby Code Goes Here
</code></pre>