Neurotic Pink Mongooses

    metalsmith-prism

    4.0.0 • Public • Published

    metalsmith-prism

    A Metalsmith plugin that adds Prism specific HTML markup to code sections for syntax coloring.

    License NPM Linux Passing Windows Passing

    While this plugin adds all the required Prism HTML markup, prism.css must be included on the page to provide the syntax coloring.

    Requirements

    • Node >= 14.x.x
    • NPM >= 8.x.x
    • Metalsmith >= v2.4.x

    Installation

    NPM:

      npm install metalsmith-prism --save-dev

    Yarn:

      yarn add metalsmith-prism

    Usage

    Add Prism styles to page header.

    If the linenumbers option is set to true, prism-line-numbers.css must be added to the page.

    The css files can be downloaded from the Prism website or use a CDN. Please refer to the Prism documentation for details.

    <link href="/assets/prism.css" rel="stylesheet" />
    <link href="/assets/prism-line-numbers.css" rel="stylesheet" />

    Add language definition to code block

    <code class="language-css">p { color: red }</code>

    Add metalsmith-prism plugin to metalsmith

    const metalsmith = require('metalsmith');
    const prism = require('metalsmith-prism');
    
    metalsmith(__dirname)
      .use(prism())
      .build();

    To use with Markdown code blocks rendered by @metalsmith/markdown

    const metalsmith = require('metalsmith');
    const markdown = require('@metalsmith/markdown');
    const prism = require('metalsmith-prism');
    
    metalsmith(__dirname)
      .use(markdown())
      .use(prism())
      .build();

    Language support

    Supports all programming languages that have a corresponding Prism.js component file. Component files are found in the Prism.js components directory.

    Options

    decode (optional)

    Always decode the html entities when processing language of type markup

    Metalsmith(__dirname)
      .use(prism({
        decode: true
      }))

    lineNumbers (optional)

    Adds the additional HTML markup so line numbers can be added via the line-numbers CSS.

    Metalsmith(__dirname)
      .use(metalsmithPrism({
        lineNumbers: true
      }))

    preLoad (optional)

    Pre-loads language component(s), such that each language component registers itself in the order given in the input array

    Useful for loading syntax that extends other language components that are not automatically registered by Prism

    Metalsmith(__dirname)
      .use(prism({
        preLoad: ["java", "scala"]
      }))

    Debug

    To enable debug logs, set the DEBUG environment variable to metalsmith-prism:

    Linux/Mac:

    DEBUG=metalsmith-prism
    

    Windows:

    set "DEBUG=metalsmith-prism"
    

    CLI Usage

    Add metalsmith-prism key to your metalsmith.json plugins key

    {
      "plugins": {
        "metalsmith-prism": {
          "lineNumbers": true,
          "decode": true
        }
      }
    }

    Credits

    Robert McGuinness - for the initial implementation of the plugin.

    License

    Code released under the MIT license.

    Install

    npm i metalsmith-prism

    DownloadsWeekly Downloads

    835

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    9.67 kB

    Total Files

    4

    Last publish

    Collaborators

    • thutto
    • dznjudo
    • availity-cicd-bot
    • tannerbyers
    • azeigler
    • coreycochran89
    • sharpie
    • dnoler
    • jselden
    • cbaker1
    • twarner
    • gopro16
    • gregmartdotin
    • hnicbaker
    • chrishavekost
    • jordan-a-young
    • pashatay
    • wernerglinka