Eleventy-plugin-code-block-demo NPM

This 11ty plugin helps demonstrate HTML code blocks. It post-processes parsed templates and replaces pre > code.language-html HTML elements with rich demonstration features while rendering the actual HTML code.

A live preview of HTML code blocks (e.g. `html)
Hides the original code block within a collapsed expansion panel
TODO copy to clipboard

*code-block-demo is in its diapers. Feel free to feedback, contribute and influence its future.

🏠 Homepage

✨ Demo

Install

npm install eleventy-plugin-code-block-demo

Add this plugin to your Eleventy config file (usually .eleventy.js):

const codeBlockDemo = require('eleventy-plugin-code-block-demo');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(codeBlockDemo);
};

The plugin will automatically render code blocks with the language-html class as HTML.