@pborenstein/eleventy-md-syntax-highlight

eleventy-md-syntax-highlight

PrismJS markdown syntax highlighting with optional line numbers for Eleventy.

Contents

• Installation
• Configuration
• Styles
• Markup
• Credits

The differences between the official syntax highlighting plugin and this plugin are:

• Handles only Markdown code fences
• Provides optional line numbers
• Does not highlight lines

Installation

npm i @pborenstein/eleventy-md-syntax-highlight --save-dev

Configuration

In your Eleventy configuration file (typically .eleventy.js) install the plugin like this.

const syntaxHighlight = require('eleventy-md-syntax-highlight')

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight,
    { showLineNumbers: false })
}

When showLineNumbers is…	This is what happens…
false (default)	Code fences do not have line numbers by default. You can enable line numbers for a specific code fence by appending a hash mark (#) after the language.
true	Every code fence has line numbers. You cannot disable line numbers for a specific code fence.

Styles

This plugin uses unedited PrismJS CSS files. You can get the CSS two ways:

A: Download the CSS from the PrismJS site

1. Go to the PrismJS downloads page.
2. Select a PrismJS theme.
3. Select the Line Numbers plugin.
4. Click the Download CSS button to download a single CSS file that contains the theme and the line number styles. (You don't need the JS files.)

B: Get the files from the PrismJS repo.

1. Get a theme CSS file
2. Get the line numbers CSS file prism-line-numbers.css

Markup

This is how you mark up code fences.

If showLineNumbers is false, append a hash mark (#) to the language.

```json#
collections: {
  "all": [ items ],
  "categories": {
    "Culture": [ items ],
    "Life": [ items ],
    "Thinking": [ items ]
  }
}
```

Which will render like this:

To start with a specific line number, add it after the hash mark (#). The line numbers for this code fence will start st 28:

```json#28
collections: {
  "all": [ items ],
  "categories": {
    "Culture": [ items ],
    "Life": [ items ],
    "Thinking": [ items ]
  }
}
```

As you can see here:

Credits

• Zach Leatherman (@zachleat): official Eleventy plugin
• Anders Grendstadbakk (@andeersg): How to do it