PrismJS markdown syntax highlighting with optional line numbers for Eleventy
MIT License
PrismJS markdown syntax highlighting with optional line numbers for Eleventy.
The differences between the official syntax highlighting plugin and this plugin are:
npm i @pborenstein/eleventy-md-syntax-highlight --save-dev
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. |
This plugin uses unedited PrismJS CSS files. You can get the CSS two ways:
A: Download the CSS from the PrismJS site
B: Get the files from the PrismJS repo.
prism-line-numbers.css
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: