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.

Author

👤 Yinon Oved

• Twitter: @yinon_
• Github: @yinonov

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Yinon Oved. This project is MIT licensed.