11ty-to-codepen 中文文档教程

Question

11ty-to-codepen

A simple 11ty shortcode for automagically creating pens on codepen!

Prerequisites

只有一个硬性要求（假设 eleventy 已经到位），那就是在 markdown 文件中允许 html。 Eleventy 默认为 html: false，这也是 markdown-it 库的默认值。

• Make sure to enable it in your configuration!
• Eg:

/* Markdown Overrides */
let markdownLibrary = markdownIt({
  html: true,
  breaks: true,
  linkify: true,
});
eleventyConfig.setLibrary("md", markdownLibrary);

Installation

安装应遵循通常的 NODE 舞蹈：

npm i -D 11ty-to-codepen

Usage

首先配置您的 .eleventy.js：

• Import it:

// At the top of the file add:
const codepenIt = require("11ty-to-codepen");

// Somewhere before the final return add:
eleventyConfig.addPairedShortcode("codepen", codepenIt);

• Use it in any .md file:

{% codepen "https://unpkg.com/bonsai.css@latest/dist/bonsai.min.css", "https://unpkg.com/uhtml", "Heyyy", "Waz uuuuuuuup", "Test it" %}

Some very important code:

```html
<h1 class="someClass">Test</h1>
```

```css
body {
  --mx: 4rem;
}
```

```js
var foo = function (bar) {
  return bar * 2;
};

console.log(foo(5));
```

{% endcodepen %}

Shortcode attributes:

codepen -> The shortcode (1st attr)

"https://unpkg.com/bonsai.css@latest/dist/bonsai.min.css", -> Any ext css (semicolon seperated) (2nd attr)

"https://unpkg.com/uhtml", -> Any ext js (semicolon seperated) (3rd attr)

"Heyyy", -> Title of the pen (4th attr)

"Waz uuuuuuuup", -> Description of the pen (5th attr)

"Test it" -> Button text (for i18n) (6th attr)