CNB
EOMarkdown
模板语言：
- Ant Design
*.tsx - Astro
*.astro - Bootstrap
*.html - Chakra UI
*.tsx - Docsify
*.md - Docusaurus
*.mdx - ESBuild
*.js - Eleventy
*.11ty.js - Gatsby
*.js - GitBook
*.md - Gridsome
*.vue - Hexo
*.ejs - Hugo
*.html - Jekyll
*.html - Mantine
*.tsx - Material-UI
*.js - MkDocs
*.md - Next.js
*.js - Nuxt.js
*.vue - Parcel
*.html - Remix
*.tsx - Rollup
*.js - Storybook
*.stories.js - Sphinx
*.rst - SvelteKit
*.svelte - SWC
*.ts - Tailwind CSS
*.css - Turbopack
*.ts - Vite
*.ts - VitePress
*.md - VuePress
*.vue - Webpack
*.js - 自定义框架
*.*
| Eleventy 简称 | 文件扩展名 | npm 包 |
|---|---|---|
md |
.md |
markdown-it |
- 相关语言：MDX
| Eleventy 版本 | markdown-it 版本 |
|---|---|
@11ty/eleventy@0.x |
markdown-it@10.x |
@11ty/eleventy@1.x |
markdown-it@12.x |
@11ty/eleventy@2.x |
markdown-it@13.x |
@11ty/eleventy@3.x |
markdown-it@14.x |
Markdown 文件默认作为 Liquid 模板进行预处理。您可以在配置文件中更改此默认设置（或完全禁用）。要为单个模板而非全局更改此设置，请阅读更改模板的渲染引擎。
Markdown 选项
默认选项
html: true（markdown-it默认为false）
这里列出的唯一选项是与默认 markdown-it 选项不同的选项。查看所有 markdown-it 选项和默认值。
从 Eleventy 2.0 开始，我们默认禁用了缩进代码块功能。
可选：设置您自己的库实例
使用配置 API 传入您自己的 Markdown 库实例。查看所有 markdown-it 选项。
eleventy.config.js
import markdownIt from "markdown-it";
export default function (eleventyConfig) {
let options = {
html: true,
breaks: true,
linkify: true,
};
eleventyConfig.setLibrary("md", markdownIt(options));
};const markdownIt = require("markdown-it");
module.exports = function (eleventyConfig) {
let options = {
html: true,
breaks: true,
linkify: true,
};
eleventyConfig.setLibrary("md", markdownIt(options));
};可选：修改库实例
在提供的库实例（默认的或上面 setLibrary 提供的任何实例）上运行您自己的回调。
eleventy.config.js
export default function (eleventyConfig) {
eleventyConfig.amendLibrary("md", (mdLib) => mdLib.enable("code"));
};module.exports = function (eleventyConfig) {
eleventyConfig.amendLibrary("md", (mdLib) => mdLib.enable("code"));
};添加您自己的插件
使用 amendLibrary（Eleventy >= 2.0）或 setLibrary（Eleventy <= 1.0） 配置 API 方法传入您自己的 markdown-it 插件（基于上面"选项"中描述的方法）。
- 在 NPM 上查找您自己的
markdown-it插件 npm install该插件。
import { full as emoji } from "markdown-it-emoji";
export default function (eleventyConfig) {
eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(emoji));
};缩进代码块
Markdown 有一个不太为人所知的功能叫做缩进代码块，这意味着任何缩进四个或更多空格的内容（并且有前置换行符）将被转换为代码块。
a simple
indented code block被转换为：
<pre><code>a simple
indented code block
</code></pre>（示例借用自 CommonMark 规范）
在听取了社区反馈后，从 Eleventy 2.0.0 开始，缩进代码块对默认的 Markdown 库实例以及通过 setLibrary 设置的任何实例都被禁用。
想要**重新启用**缩进代码块？
WARNING
小心！ 这个功能（几乎）普遍不被喜欢。
要在 Eleventy 2.0（或更新版本）中重新启用缩进代码块，请使用amendLibrary 方法。确保您阅读了下面记录的警告以了解后果。
module.exports = function (eleventyConfig) {
eleventyConfig.amendLibrary("md", (mdLib) => mdLib.enable("code"))
}当使用缩进代码块时，任何遵循这个四个（或更多）空格缩进的内容都可能被转换。如果您使用 Nunjucks 或 Liquid 或另一个模板引擎预处理 markdown，这意味着从 include 或短代码检索的内容也可能符合这种格式。在您的 includes 或短代码中包含额外空白时要小心！
Filename .eleventy.js
// 🛑 不好，不要这样做
eleventyConfig.addShortcode("badShortcode", function () {
return `
这是 markdown 文件中的一个代码块！
`
})Filename .eleventy.js
// ✅ 这将返回预期的输出
eleventyConfig.addShortcode("goodShortcode", function () {
return `
这不会成为 markdown 文件中的代码块。
`
})如果您仍然希望缩进模板字面量，可以使用 outdent 在将其交给渲染器之前去除每行的缩进。
// ✅ 这也是可以接受的
eleventyConfig.addShortcode("alsoGoodShortcode", function () {
return outdent`
这不会成为 markdown 文件中的代码块。
`
})想要在 Eleventy v1 或更早版本中**禁用**缩进代码块？
const markdownIt = require("markdown-it")
module.exports = function (eleventyConfig) {
let options = {
// … 为简洁起见截断
}
eleventyConfig.setLibrary("md", markdownIt(options).disable("code"))
}为什么我不能从成对短代码返回 markdown 在 markdown 文件中使用？
这是一个常见陷阱。
事实是，您可以在短代码内返回 markdown（只要文件正在转换 markdown，无论是作为 .md 文件扩展名还是带有 templateEngineOverride）。然而，有一个小细节可能会让您措手不及。
eleventy.config.js
export default function(eleventyConfig) {
eleventyConfig.addPairedShortcode("myShortcode", function (content) {
// 方法 A：✅ 这工作正常
return content;
// 方法 B：⚠️ 用 HTML 包装时要小心
return `<div>${content}</div>`;
});
}module.exports = function(eleventyConfig) {
eleventyConfig.addPairedShortcode("myShortcode", function (content) {
// 方法 A：✅ 这工作正常
return content;
// 方法 B：⚠️ 用 HTML 包装时要小心
return `<div>${content}</div>`;
});
}语法 Liquid, Nunjucks
{% myShortcode %}My really *important* content.{% endmyShortcode %}- 方法 A 返回：
My really *important* content.成功地被转换为 markdown 变为My really <em>important</em> content。 - 方法 B 返回：
<div>My really *important* content.</div>markdown 将其视为 HTML 块，不能在其中嵌套 markdown。它被转换为<div>My really *important* content.</div>。阅读更多关于 CommonMark 规范中的 HTML 块的内容。