@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-highlighterHow 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 });
};