diff --git a/README.md b/README.md
index 0f2f712..a73fa3b 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
# eleventy-plugin-code-demo
+> Add interactive code demos to an Eleventy site using Markdown code blocks.
+
## Getting Started
Install the package:
@@ -19,7 +21,7 @@ eleventyConfig.addPlugin(EleventyPluginCodeDemo, {
// Render whatever content you want to go in the
renderBody: ({ html, js }) => `${html}`,
// key-value pairs for HTML attributes; these are applied to all code previews
- props: {
+ iframeAttributes: {
height: '300',
style: 'width: 100%;',
frameborder: '0',
@@ -27,9 +29,30 @@ eleventyConfig.addPlugin(EleventyPluginCodeDemo, {
});
```
+See [example usage](#example-usage) for how to use the shortcode.
+
+### Plugin Options
+
+|Name|Type|Description|
+|----|----|-----------|
+|`renderHead`|`(args: { css: string; js: string }) => string`|A render function to return custom markup for the iframe ``'s children.|
+|`renderBody`|`(args: { html: string; js: string }) => string`|A render function to return custom markup for the iframe ``'s children.|
+|`iframeAttributes`|`Record`|Any HTML attributes you want to set globally on all code demos.|
+
+### Shortcode Arguments
+
+|Name|Type|Description|
+|----|----|-----------|
+|`title`|`string`|A non-empty title for the code demo iframe.|
+|`props`|`Record`|Named keyword arguments for any HTML attributes you want to set on the iframe. See [example usage](#example-usage).|
+
### Example Usage
-The shortcode will render as an interactive iframe powered by the fenced code blocks that you define in its body:
+> **Note**: All code comments and whitespace are removed, and HTML tags are escaped. You do not need to worry about doing this yourself. The only caveat is that you should never forward user-generated code to this shortcode.
+
+The shortcode renders as an interactive `