24.08.2019 ruby

Include prismjs in Jekyll

This plugin will help you include the famous prismjs code highlighter in your Jekyll app, using nothing but liquid tags. Quick and simple solution.

Usage in Jekyll

First, include prism.js in your header. Then save the code below and save it as prismjs.rb in the folder _plugins in your Jekyll root directory.

Quick example:

{{ "{% prism cpp " }}%}
int main() {}
{{ "{% endprism " }}%}

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Purpose:	Jekyll Plugin to prepare markdown for syntax highlighting with prism.js
# License:	MIT
# Note:		This script transforms code to escaped html entities before it puts it back, so Kramdown does not get confused.
# Author:   Domeniko Gentner <contact@tuxstash.de>
require 'cgi'

module Jekyll
	module Tags
		class Prism < Liquid::Block
			def initialize(tag_name, text, tokens)
				@arg = text.strip
				super
			end

			def render(context)
				output = super(context)
				output = CGI.escapeHTML(output);
				"<pre class=\"language-#{@arg} line-numbers card-panel z-depth-3 \"><code>#{output}</code></pre>"
			end
		end
	end
end

Liquid::Template.register_tag('prism', Jekyll::Tags::Prism)

Link to the author's twitter Link to the authors ko-fi page

comments

Characters: 0/1000

gravatar portrait

 Pinned by contact@tuxstash.de

Come join the discussion and write something nice. You will have to confirm your comment by mail, so make sure it is legit and not a throwaway. Only the name part of it will be displayed, so don't worry about spam. If it does not show up after confirming it, it may be considered spam, but I curate them manually, so don't worry. Please read the privacy statement for more.