A pack of Eleventy plugins for syntax highlighting for Markdown and Liquid templates.
npm install @fpapado/eleventy-plugin-syntaxhighlightA pack of Eleventy plugins for syntax highlighting. No browser/client JavaScript here, these highlight transformations are all done at build-time.
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.
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 = / /;
}
});
};
`
* Markdown Highlighter: syntax highlights using PrismJS
* Liquid Custom Tag {% highlight %}: syntax highlights using PrismJS.{% highlight %}
* Nunjucks Paired Shortcode : syntax highlights using PrismJS.
Optionally specify a language after the start of the markdown fenced code block.
* List of supported PrismJS languages
`` js`
function myFunction() {
return true;
}
``
` js/1,3-5`
function myFunction() {
// …
return true;
}
``
` 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;
}
* List of supported PrismJS languages
`
{% highlight js %}
function myFunction() {
return true;
}
{% endhighlight %}
`
{% highlight js 1,3-5 %}
function myFunction() {
// …
return true;
}
{% endhighlight %}
`
`
{% highlight js 1,3 5-8 %}
function myFunction() {
// …
return true;
}
{% endhighlight %}
`
#### Plain text
Use text to use the line highlighting features without PrismJS.
`
{% highlight text 1-2 %}
function myFunction() {
let highlighted = true;
return highlighted;
}
{% endhighlight %}
* List of supported PrismJS languages
`
{% highlight "js" %}
function myFunction() {
return true;
}
{% endhighlight %}
`
{% highlight "js 1,3-5" %}
function myFunction() {
// …
return true;
}
{% endhighlight %}
`
`
{% highlight "js 1,3 5-8" %}
function myFunction() {
// …
return true;
}
{% endhighlight %}
`
#### Plain text
Use text to use the line highlighting features without PrismJS.
`
{% highlight "text 1-2" %}
function myFunction() {
let highlighted = true;
return highlighted;
}
{% endhighlight %}
`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(0, 0%, 27%, .8);
}
.highlight-line-add {
background-color: #45844b;
}
.highlight-line-remove {
background-color: #902f2f;
}
``