diff --git a/.eleventy.js b/.eleventy.js
index 2db345c..6a18ad5 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -5,8 +5,16 @@ const { EleventyPluginCodeDemo } = require('./src');
*/
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(EleventyPluginCodeDemo, {
- renderHead: ({ css }) => ``,
- renderBody: ({ html, js }) => `${html}`,
+ renderDocument: ({ html, css, js }) => `
+
+
+
+
+
+ ${html}
+
+
+ `,
iframeAttributes: {
height: '100',
},
diff --git a/README.md b/README.md
index 713e315..8ebc3ff 100644
--- a/README.md
+++ b/README.md
@@ -18,10 +18,17 @@ const { EleventyPluginCodeDemo } = require('eleventy-plugin-code-demo');
eleventyConfig.addPlugin(EleventyPluginCodeDemo, {
// Use any shortcode name you want
name: 'shortcodeName',
- // Render whatever content you want to go in the
- renderHead: ({ css }) => ``,
- // Render whatever content you want to go in the
- renderBody: ({ html, js }) => `${html}`,
+ // Render whatever document structure you want (other than doctype); the HTML, CSS, and JS parsed from the shortcode's body are supplied to this function as an argument, so you can position them wherever you want, or add class names or data-attributes to html/body
+ renderDocument: ({ html, css, js }) => `
+
+
+
+
+
+ ${html}
+
+
+ `,
// key-value pairs for HTML attributes; these are applied to all code previews
iframeAttributes: {
height: '300',
@@ -37,10 +44,9 @@ See [example usage](#example-usage) for how to use the shortcode.
|Name|Type|Description|
|----|----|-----------|
-|`name`|`string`|The name to use for the shortcode. Defaults to `'codeDemo'` if not specified.|
-|`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.|
+|`name`|`string\|undefined`|Optional. The name to use for the shortcode. Defaults to `'codeDemo'` if not specified.|
+|`renderDocument`|`(args: { html: string; css: string; js: string }) => string`|A render function to return custom markup for the document body of each iframe. This function will be called with the HTML, CSS, and JS parsed from your shortcode's children. Do not include a doctype declaration.|
+|`iframeAttributes`|`Record\|undefined`|Optional. Any HTML attributes you want to set globally on all code demos.|
### Shortcode Arguments
diff --git a/src/index.js b/src/index.js
index f0587bd..7f42d24 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,12 +25,7 @@ const makeCodeDemoShortcode = (options) => {
const js = parseCode(tokens, 'js');
const iframeAttributes = stringifyAttributes({ ...options.iframeAttributes, ...props });
- let srcdoc = `
-
-
- ${options.renderHead({ css, js })}
- ${options.renderBody({ html, js })}
- `;
+ let srcdoc = `${options.renderDocument({ html, css, js })}`;
// Convert all the HTML/CSS/JS into one long string with zero non-essential white space, comments, etc. Also escape HTML tags.
srcdoc = escape(
diff --git a/src/typedefs.js b/src/typedefs.js
index 5523b3a..8e7c2a9 100644
--- a/src/typedefs.js
+++ b/src/typedefs.js
@@ -8,8 +8,7 @@
/**
* @typedef EleventyPluginCodeDemoOptions
* @property {string} name The shortcode name to use.
- * @property {(args: Pick) => string} renderHead A render function to render a custom HTML ``.
- * @property {(args: Pick) => string} renderBody A render function to render a custom HTML ``'s contents.
+ * @property {(args: RenderArgs) => string} renderDocument A render function to render the iframe's document definition.
* @property {Record} iframeAttributes Any HTML attributes you want to set on the `