@fpapado/eleventy-plugin-syntaxhighlight

    3.0.0 • Public • Published

    eleventy-plugin-syntaxhighlight

    A pack of Eleventy plugins for syntax highlighting. No browser/client JavaScript here, these highlight transformations are all done at build-time.

    Installation

    Available on npm.

    npm install @11ty/eleventy-plugin-syntaxhighlight --save
    

    Open up your Eleventy config file (probably .eleventy.js) and use addPlugin:

    const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
    module.exports = function(eleventyConfig) {
      eleventyConfig.addPlugin(syntaxHighlight);
    };
    

    You are responsible for including your favorite PrismJS theme CSS!

    Read more about Eleventy plugins.

    Options

    Optionally pass in an options object as the second argument to addPlugin to further customize this plugin pack.

    const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
    module.exports = function(eleventyConfig) {
      eleventyConfig.addPlugin(syntaxHighlight, {
    
        // Change which syntax highlighters are installed
        templateFormats: ["*"], // default
    
        // Or, just njk and md syntax highlighters (do not install liquid)
        // templateFormats: ["njk", "md"],
    
        // init callback lets you customize Prism
        init: function({ Prism }) {
          Prism.languages.myCustomLanguage = /* */;
        }
      });
    };
    

    Usage

    This plugin provides:

    • Markdown Highlighter: syntax highlights using PrismJS
    • Liquid Custom Tag {% highlight %}: syntax highlights using PrismJS.
    • Nunjucks Paired Shortcode {% highlight %}: syntax highlights using PrismJS.

    Markdown Highlighter

    Optionally specify a language after the start of the markdown fenced code block.

    <!-- Markdown Template -->
    ``` js
    function myFunction() {
      return true;
    }
    ```
    
    <!--
      Line highlighting classes (single highlight)
      Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
    -->
    
    <!-- Markdown Template -->
    ``` js/1,3-5
    function myFunction() {
      // …
      return true;
    }
    ```
    
    <!--
      Line highlighting classes (add and remove mode)
      Adds `highlight-line-add` class to lines 1,3
      Adds `highlight-line-remove` class to lines 5,6,7,8
    -->
    
    <!-- Markdown Template -->
    ``` js/1,3/5-8
    function myFunction() {
      // …
      return true;
    }
    ```
    

    Plain text

    Use text to use the line highlighting features without PrismJS.

    ``` text/1-2
    function myFunction() {
      let highlighted = true;
      return highlighted;
    }
    ```
    

    Liquid Tag: Prism Syntax Highlighter

    <!-- Liquid Template -->
    {% highlight js %}
    function myFunction() {
      return true;
    }
    {% endhighlight %}
    
    <!--
      Line highlighting classes (single highlight)
      Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
    -->
    
    <!-- Liquid Template -->
    {% highlight js 1,3-5 %}
    function myFunction() {
      // …
      return true;
    }
    {% endhighlight %}
    
    <!--
      Line highlighting classes (add and remove)
      Adds `highlight-line-add` class to lines 1,3
      Adds `highlight-line-remove` class to lines 5,6,7,8
    -->
    
    <!-- Liquid Template -->
    {% highlight js 1,3 5-8 %}
    function myFunction() {
      // …
      return true;
    }
    {% endhighlight %}
    

    Plain text

    Use text to use the line highlighting features without PrismJS.

    <!-- Liquid Template -->
    {% highlight text 1-2 %}
    function myFunction() {
      let highlighted = true;
      return highlighted;
    }
    {% endhighlight %}
    

    Nunjucks Paired Shortcode: Prism Syntax Highlighter

    <!-- Nunjucks Template -->
    {% highlight "js" %}
    function myFunction() {
      return true;
    }
    {% endhighlight %}
    
    <!--
      Line highlighting classes (single highlight)
      Adds `highlight-line-active` class to lines 1,3,4,5 (for line highlighting)
    -->
    
    <!-- Nunjucks Template -->
    {% highlight "js 1,3-5" %}
    function myFunction() {
      // …
      return true;
    }
    {% endhighlight %}
    
    <!--
      Line highlighting classes (add and remove)
      Adds `highlight-line-add` class to lines 1,3
      Adds `highlight-line-remove` class to lines 5,6,7,8
    -->
    
    <!-- Nunjucks Template -->
    {% highlight "js 1,3 5-8" %}
    function myFunction() {
      // …
      return true;
    }
    {% endhighlight %}
    

    Plain text

    Use text to use the line highlighting features without PrismJS.

    <!-- Nunjucks Template -->
    {% highlight "text 1-2" %}
    function myFunction() {
      let highlighted = true;
      return highlighted;
    }
    {% endhighlight %}
    

    Sample Line Highlighting CSS

    .highlight-line {
      display: inline-block;
     
      /* del, ins, mark default styles */
      text-decoration: none;
      color: inherit;
    }
     
    /* allow highlighting empty lines */
    .highlight-line:empty:before {
      content: " ";
    }
     
    .highlight-line:not(:last-child) {
      min-width: 100%;
    }
    .highlight-line .highlight-line:not(:last-child) {
      min-width: 0;
    }
     
     
    /*
     * Dark theme
     */
     
    .highlight-line-isdir {
      color: #b0b0b0;
      background-color: #222;
    }
    .highlight-line-active {
      background-color: #444;
      background-color: hsla(00%27%.8);
    }
    .highlight-line-add {
      background-color: #45844b;
    }
    .highlight-line-remove {
      background-color: #902f2f;
    }

    Install

    npm i @fpapado/eleventy-plugin-syntaxhighlight

    DownloadsWeekly Downloads

    5

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    22.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • fpapado