Orchid Syntax Highlighter

markup official

About

Add syntax highlighting to code snippets in your Orchid site. Supports pre-rendered highlighting with Pygments, and browser-based highlighting with PrismJS

Demo

Prism.js Demo
public class HelloWorld {
    public static void main(String[] args) {
        // Prints "Hello, World" to the terminal window.
        System.out.println("Hello, World");
    }
}
Pygments Demo
public class HelloWorld {
    public static void main(String[] args) {
        // Prints "Hello, World" to the terminal window.
        System.out.println("Hello, World");
    }
}

Usage

Pre-rendered Highlighting

The highlight Template Tag, which will highlight your code using Pygments. Pygments supports many languages out of the box for you with no additional configuration. Pre-rendered highlighting has the advantage of still working in an environment with JS disabled, such as the PDFs generated by the Wiki plugin.

{% highlight 'yaml' %}
title: 'Page Title'
components:
  - type: pageContent
{% endhighlight %}

This plugin includes a default stylesheet for Pygments, which must included in your theme for highlighting to work properly. Simply adding assets/css/pygments.scss in your extraCss is all that's needed, to use the default styling.

theme:
  extraCss: 
    - 'assets/css/pygments.scss' # this file is already available in the plugin's resources

Alternatively, you are free to use your own Pygments theme by creating and adding the necessary stylesheet.

theme:
  extraCss: 
    - 'assets/css/custom-pygments-theme.scss' # you'll need to create this file yourself

In-Browser Highlighting

Alternatively, you may opt for a browser-based solution using PrismJS. This may offer greater flexibility and works with the normal Markdown syntax, but requires Javascript to function. You will also need to manually add language definitions for each language you intend to highlight, which may not be feasible for sites which need many languages highlighted. This component is best added in an Archetype, such as allPages.

allPages:
  components:
    - type: 'pageContent'
    - type: 'prism'
      languages: 
        - 'java'
        - 'kotlin'
        - 'yaml'
Include with:
dependencies {
    orchidRuntime 'io.github.javaeden.orchid:OrchidSyntaxHighlighter:0.17.4'
}
<dependency>
    <groupId>io.github.javaeden.orchid</groupId>
    <artifactId>OrchidSyntaxHighlighter</artifactId>
    <version>0.17.4</version>
    <type>pom</type>
</dependency>
@file:DependsOn("io.github.javaeden.orchid:OrchidSyntaxHighlighter:0.17.4")