diff --git a/README.md b/README.md
index a73fa3b..713e315 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,8 @@ Register it as a plugin in your Eleventy config:
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
@@ -35,6 +37,7 @@ 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.|
diff --git a/src/index.js b/src/index.js
index b75ac00..f0587bd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,8 +4,6 @@ const markdownIt = require('markdown-it');
const outdent = require('outdent');
const { parseCode, stringifyAttributes } = require('./utils');
-const SHORTCODE_NAME = 'codeDemo';
-
/**
* Higher-order function that takes user configuration options and returns the plugin shortcode.
* @param {import('./typedefs').EleventyPluginCodeDemoOptions} options
@@ -18,7 +16,7 @@ const makeCodeDemoShortcode = (options) => {
*/
const codeDemoShortcode = (source, title, props = {}) => {
if (!title) {
- throw new Error(`${SHORTCODE_NAME}: you must provide a non-empty title for the iframe.`);
+ throw new Error(`${options.name}: you must provide a non-empty title for the iframe.`);
}
const tokens = markdownIt().parse(source);
@@ -52,10 +50,11 @@ const makeCodeDemoShortcode = (options) => {
/**
* @param {import('@11ty/eleventy/src/UserConfig')} eleventyConfig
- * @param {EleventyPluginCodeDemoOptions} options
+ * @param {import('./typedefs').EleventyPluginCodeDemoOptions} options
*/
const EleventyPluginCodeDemo = (eleventyConfig, options) => {
- eleventyConfig.addPairedShortcode(SHORTCODE_NAME, makeCodeDemoShortcode(options));
+ const name = options.name ?? 'codeDemo';
+ eleventyConfig.addPairedShortcode(name, makeCodeDemoShortcode({ ...options, name }));
};
module.exports = { EleventyPluginCodeDemo };
diff --git a/src/typedefs.js b/src/typedefs.js
index 2b736df..5523b3a 100644
--- a/src/typedefs.js
+++ b/src/typedefs.js
@@ -7,6 +7,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 {Record} iframeAttributes Any HTML attributes you want to set on the `