@sardine/eleventy-plugin-code-highlighter

An eleventy plugin to higlight code blocks

Usage no npm install needed!

<script type="module">
  import sardineEleventyPluginCodeHighlighter from 'https://cdn.skypack.dev/@sardine/eleventy-plugin-code-highlighter';
</script>

README

@sardine/eleventy-plugin-code-highlighter

An 11ty plugin to style your <code>.

Features

This plugin uses Prism to style <code> blocks at build time and inlines Prism CSS theme in the page <head>.

Because styling is done at build time, you don't need to asynchronously load CSS and Javascript on the browser.

Requirements

Installation

npm install --save-dev @sardine/eleventy-plugin-code-highlighter

How to use it

// .eleventy.js
const codeHighlighter = require('@sardine/eleventy-plugin-code-highlighter');
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(codeHighlighter);
};

Options

By default the Tomorrow theme is used. You can use any Prism theme by passing the theme URL as an option.

// .eleventy.js
const codeHighlighter = require('@sardine/eleventy-plugin-code-highlighter');

const PRISM_THEME = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-twilight.min.css';

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(codeHighlighter, { urlTheme: PRISM_THEME });
};

License

MIT