Eleventy Plugin Syntaxhighlight

screenshot of Eleventy Plugin Syntaxhighlight
eleventy

Eleventy Plugin Syntaxhighlight

A pack of Eleventy plugins for syntax highlighting in Markdown, Liquid, and Nunjucks templates.

Overview

eleventy-plugin-syntaxhighlight is a collection of Eleventy plugins designed to provide syntax highlighting functionality. Unlike many syntax highlighting plugins, eleventy-plugin-syntaxhighlight does not rely on browser or client-side JavaScript. Instead, all syntax highlighting transformations are performed at build-time. This allows for more efficient and lightweight rendering.

Features

  • Build-time syntax highlighting: All syntax highlighting transformations are performed during the build process, reducing reliance on client-side JavaScript.
  • Easy integration with Eleventy: eleventy-plugin-syntaxhighlight is specifically designed to work seamlessly with the Eleventy static site generator.
  • Wide range of languages supported: The plugin supports syntax highlighting for a variety of programming languages, making it versatile for different use cases.

Installation

To install eleventy-plugin-syntaxhighlight, follow these steps:

  1. Open your command-line interface and navigate to the project directory.
  2. Run the following command to install the plugin:
npm install --save eleventy-plugin-syntaxhighlight
  1. Once the installation is complete, you can use the plugin in your Eleventy configuration file. Add the following code snippet:
// .eleventy.js

const syntaxHighlight = require('eleventy-plugin-syntaxhighlight');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);
};
  1. Save the configuration file, and the plugin will be ready for use.

Summary

eleventy-plugin-syntaxhighlight is a set of Eleventy plugins that provide efficient and build-time syntax highlighting without relying on client-side JavaScript. With easy integration into the Eleventy workflow, support for multiple programming languages, and lightweight rendering, this plugin offers a practical solution for incorporating syntax highlighting into Eleventy-powered websites.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

prismjs
Prism JS

PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.