Overview

The eleventy-plugin-code-demo is a fantastic tool for anyone looking to add interactive HTML, CSS, and JavaScript code demos to their Eleventy-based websites. By using this plugin, developers can seamlessly integrate live code snippets into their Markdown documents, allowing users to interact with and visualize the code in real-time. This capability not only enhances the learning experience but also showcases examples in a dynamic and engaging manner.

Designed with simplicity in mind, the plugin also emphasizes security by discouraging the use of user-generated code within demos, thus protecting your site from potential vulnerabilities. With a range of options for customization, eleventy-plugin-code-demo is a powerful addition for developers aiming to provide a rich and interactive content experience.

Features

• Interactive Iframes: Convert HTML, CSS, and JS code blocks into interactive iframes directly within your Markdown, making it easy for users to play with live examples.

• Customizable Shortcode: Register a paired shortcode to define how demos are implemented, ensuring that developers can tailor the output to fit their unique needs.

• Flexible Plugin Options: Includes properties like name for the shortcode and iframeAttributes to set global attributes, giving you control over the iframe’s characteristics.

• Safety First: The plugin advises against injecting user-generated content, protecting your site from potential security risks like XSS, while still allowing static code snippets to shine.

• Easy Installation: Easily install the plugin using your preferred package manager, with straightforward instructions for getting up and running in no time.

• Versatile Arguments: The shortcode accepts various arguments, like source and title, to handle multiple code blocks and enforce accessibility standards.

• Demo Ready: Includes a demo folder with a sample Eleventy project to help you see the plugin in action and understand how to implement it effectively.

• Cross-Compatibility: Requires just Node 18+ and Eleventy v3.0+, making it accessible for most modern development environments.