How does one configure Jekyll & Rouge to specify that one language should be highlighted using the parser of another language.
For example, I want to be able to do this in my markdown source files:
```nodejs-repl
> foo();
Uncaught ReferenceError: foo is not defined
```
... but have that code block syntax highlighted using the same syntax highlighter Javascript language parser.
I want to do this for a couple of reasons:
Rouge already does have the concept of language aliases (see example below), however is it possible to specify a custom language alias via Jekyll, and if so how can this be done?
Details:
(1)
I am using Jekyll 3.8.5 with Rouge 3.11.0.
(2)
The following is the relevant part of my Jekyll config file:
highlighter: rouge
(3)
So as to be really clear about what "language aliases" refers to, I'll provide an example:
For Javascript, you can use both js
and javascript
after the code fences,
as they are language aliases by default in Rouge.
Thus, the following two code blocks are identical:
Using language alias js
:
```js
foo();
```
Using language alias javascript
:
```javascript
foo();
```
I was able to "extend" the Rogue highlighter by utilizing Jekyll's _plugins
directory.
Much of my research came from rogue-ruby
's GitHub Issue #1392 and the source code for LinkedIn's rest-li
jekyll-based website.
_plugins
directory in your Jekyll root directory_plugins
directory# 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
and note the custom log line "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.
I used the minima GitHub repository as my sandbox and jekyll 3.8.7
. I created a _plugins/more_javascript.rb
Ruby file using the code in step 3. I edited one of the markdown files with the markdown snippet below and noticed only js
and nodejs-repl
had syntax highlighting.
```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;
```