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.
Key Features
- 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
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.
π€ Yinon Oved
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a βοΈ if this project helped you!
Copyright Β© 2021 Yinon Oved.
This project is MIT licensed.