如何在 Jekyll 3 中为 rouge 指定自定义语言解析器别名?
How to specify a custom language parser alias for rouge in Jekyll 3?
如何配置 Jekyll & Rouge 来指定一种语言
应该使用另一种语言的解析器突出显示。
例如,我希望能够在我的 markdown 源文件中执行此操作:
```nodejs-repl
> foo();
Uncaught ReferenceError: foo is not defined
```
...但是使用相同的方法突出显示该代码块语法
语法高亮器 Javascript 语言解析器。
我想这样做有几个原因:
- 源文件中的语义正确性
- 能够 运行 诸如 prettier 之类的工具并让它们绕过这些代码块
Rouge 已经有了语言别名的概念(见下面的例子),
但是是否可以通过 Jekyll 指定自定义语言别名,
如果可以,该怎么做?
详情:
(1)
我正在使用 Jekyll 3.8.5 和 Rouge 3.11.0。
(2)
以下是我的 Jekyll 配置文件的相关部分:
highlighter: rouge
(3)
为了真正清楚 "language aliases" 指的是什么,
我将提供一个示例:
对于Javascript,代码栏后面可以同时使用js
和javascript
,
因为它们是 Rouge 中默认的语言别名。
因此,以下两个代码块是相同的:
使用语言别名js
:
```js
foo();
```
使用语言别名javascript
:
```javascript
foo();
```
通过使用 Jekyll 的 _plugins
目录,我能够 "extend" Rogue 荧光笔。
我的大部分研究来自 rogue-ruby
对 LinkedIn rest-li
基于 jekyll 的网站的 GitHub Issue #1392 and the source code。
步骤
- 在你的 Jekyll 根目录中创建一个
_plugins
目录
- 在
_plugins
目录下创建一个ruby文件
- 使用以下代码继承现有的 Rogue Javascript code 和 "extend"(又名覆盖)别名列表。
# 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
- 运行
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
。我使用第 3 步中的代码创建了一个 _plugins/more_javascript.rb
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;
```
如何配置 Jekyll & Rouge 来指定一种语言 应该使用另一种语言的解析器突出显示。
例如,我希望能够在我的 markdown 源文件中执行此操作:
```nodejs-repl
> foo();
Uncaught ReferenceError: foo is not defined
```
...但是使用相同的方法突出显示该代码块语法 语法高亮器 Javascript 语言解析器。
我想这样做有几个原因:
- 源文件中的语义正确性
- 能够 运行 诸如 prettier 之类的工具并让它们绕过这些代码块
Rouge 已经有了语言别名的概念(见下面的例子), 但是是否可以通过 Jekyll 指定自定义语言别名, 如果可以,该怎么做?
详情:
(1)
我正在使用 Jekyll 3.8.5 和 Rouge 3.11.0。
(2)
以下是我的 Jekyll 配置文件的相关部分:
highlighter: rouge
(3)
为了真正清楚 "language aliases" 指的是什么, 我将提供一个示例:
对于Javascript,代码栏后面可以同时使用js
和javascript
,
因为它们是 Rouge 中默认的语言别名。
因此,以下两个代码块是相同的:
使用语言别名js
:
```js
foo();
```
使用语言别名javascript
:
```javascript
foo();
```
通过使用 Jekyll 的 _plugins
目录,我能够 "extend" Rogue 荧光笔。
我的大部分研究来自 rogue-ruby
对 LinkedIn rest-li
基于 jekyll 的网站的 GitHub Issue #1392 and the source code。
步骤
- 在你的 Jekyll 根目录中创建一个
_plugins
目录 - 在
_plugins
目录下创建一个ruby文件 - 使用以下代码继承现有的 Rogue Javascript code 和 "extend"(又名覆盖)别名列表。
# 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
- 运行
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
。我使用第 3 步中的代码创建了一个 _plugins/more_javascript.rb
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;
```