javascript - 如何在 Jekyll 3 中为 rouge 指定自定义语言解析器别名？

Question

如何配置 Jekyll & Rouge 以指定应使用另一种语言的解析器突出显示一种语言。

例如，我希望能够在我的 markdown 源文件中执行此操作：

```nodejs-repl
> foo();
Uncaught ReferenceError: foo is not defined
```

...但是使用相同的语法高亮器 Javascript 语言解析器突出显示该代码块语法。

我想这样做有几个原因：

1. 源文件中的语义正确性
2. 能够运行诸如 prettier 之类的工具并让它们绕过这些代码块

Rouge 已经有了语言别名的概念（参见下面的示例），但是是否可以通过 Jekyll 指定自定义语言别名，如果可以，如何做到这一点？

---

细节：

(1)

我正在使用 Jekyll 3.8.5 和 Rouge 3.11.0。

(2)

以下是我的 Jekyll 配置文件的相关部分：

highlighter: rouge

(3)

为了真正清楚“语言别名”指的是什么，我将提供一个示例：

对于 Javascript，您可以同时使用代码围栏js和javascript代码围栏之后，因为它们是 Rouge 中默认的语言别名。因此，以下两个代码块是相同的：

使用语言别名js：

```js
foo();
```

使用语言别名javascript：

```javascript
foo();
```

标签： javascriptmarkdownjekyllrouge

Answer 1

_plugins通过使用 Jekyll 的目录，我能够“扩展” Rogue 荧光笔。

rogue-ruby我的大部分研究来自GitHub 问题 #1392和LinkedIn 的基于 jekyll 的网站的源代码。rest-li

脚步

1. 在 Jekyll 根目录中创建一个_plugins目录
2. _plugins在目录中创建一个 ruby​​ 文件
3. 使用以下代码继承现有的Rogue Javascript 代码并“扩展”（也称为覆盖）别名列表。

# This "hook" is executed right before the site's pages are rendered
Jekyll::Hooks.register :site, :pre_render do |site|
  puts "Adding more JavaScript Markdown aliases..."
  require "rouge"

  # This class defines the PDL lexer which is used to highlight "pdl" code snippets during render-time
  class MoreJSLexer < Rouge::Lexers::Javascript
    title 'MoreJS'
    aliases 'js', 'nodejs-repl'
  end
end

4. 运行jekyll serve并记下自定义日志行"Adding more JavaScript Markdown aliases..."

 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
Adding more JavaScript Markdown aliases...
                    done in 0.637 seconds.
 Auto-regeneration: enabled for '/Users/kueng/work/sandboxes/minima'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.

测试

我使用minima GitHub 存储库作为我的沙箱和jekyll 3.8.7. 我_plugins/more_javascript.rb使用第 3 步中的代码创建了一个 Ruby 文件。我使用下面的 markdown 片段编辑了其中一个 markdown 文件，只注意到js并nodejs-repl突出显示了语法。

```nodejs
var a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
```
```js
var a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
```
```nodejs-repl
var a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
```