Markdown 默认

使用 Markdown 创建页面

配置参数

extensions string[]

The list of extensions this plugin applies to

Default: 
[ ".md", ".markdown" ]
options object

Options passed to markdown-it library

html boolean

Set true to enable HTML tags in source

Default: 
true
xhtmlOut boolean

Use / to close single tags (<br />). This is only for full CommonMark compatibility.

breaks boolean

Convert \n in paragraphs into <br>

langPrefix string

CSS language prefix for fenced blocks. Can be useful for external highlighters.

linkify boolean

Autoconvert URL-like text to links

typographer boolean

Enable some language-neutral replacement + quotes beautification

quotes string string[]

Double + single quotes replacement pairs, when typographer enabled, and smartquotes on. Could be either a String or an Array. For example, you can use «»„“ for Russian, „“‚‘ for German, and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).

highlight function

Highlighter function. Should return escaped HTML, or '' if the source string is not changed and should be escaped externally. If result starts with <pre... internal wrapper is skipped.

plugins any[]

The list of markdown-it plugins to use

Default: 
[markdownItAttrs, markdownItDeflist]
rules record

To modify existing rules or new custom rules

useDefaultPlugins boolean

Set false to remove the default plugins

Default: 
true

Description

Markdown 是一种流行的标记语言， 用于编写转换为 HTML 的内容。它对于包含长文本的页面非常有用， 例如帖子、文章或文档站点。

Installation

此插件默认安装。🎉

Configuration

如果您想更改默认配置，请在 _config.ts 文件中使用 lume() 函数的第二个参数。

import lume from "lume/mod.ts";

// Markdown 插件配置
const markdown = {};

const site = lume({}, { markdown });

export default site;

使用 options 属性来更改 markdown-it 设置:

// 更改 markdown-it 配置
const markdown = {
  options: {
    breaks: false,
    xhtmlOut: true,
  },
};

const site = lume({}, { markdown });

此外，您可以使用 hooks 来添加额外的插件和规则。

Plugins

Lume 使用 markdown-it 作为 markdown 解析器，并启用了以下插件：

您可以在 NPM 中 找到 更多插件，您可以将它们与 plugins 选项一起使用。例如，要添加 markdown-it-emoji 插件:

import emoji from "npm:markdown-it-emoji";

// 设置 markdown 插件
const markdown = {
  plugins: [emoji],
};

const site = lume({}, { markdown });

您可以使用 [plugin, options] 签名，通过数组将选项传递给您的 markdown-it 插件。 示例：

import anchor from "npm:markdown-it-anchor";
import footnote from "npm:markdown-it-footnote";

// 将选项传递给 markdown-it 插件
const markdown = {
  plugins: [
    [anchor, { level: 2 }],
    footnote,
  ],
};

const site = lume({}, { markdown });

Lume markdown plugins

仓库 lume_markdown_plugins 包含 一个专门为 Lume 适配的插件集合，具有诸如从 markdown 中提取标题或生成目录等实用功能。

Hooks

此插件公开了以下 hooks:

  • addMarkdownItPlugin(plugin, options) 用于添加额外的插件。
  • addMarkdownItRule(name, rule) 用于添加额外的规则。
import lume from "lume/mod.ts";
import anchor from "npm:markdown-it-anchor";
import footnote from "npm:markdown-it-footnote";

const site = lume();

site.hooks.addMarkdownItPlugin(anchor, { level: 2 });
site.hooks.addMarkdownItPlugin(footnote);

export default site;

Creating pages in Markdown

要使用 Markdown 创建页面，只需在您的站点中添加一个扩展名为 .md 的文件。 您还可以通过包含 front matter 来添加额外的变量，front matter 是一个由两条三虚线分隔并包含 YAML 代码的块：

---
title: Welcome to my page
layout: layouts/main.vto
---

# Welcome

**This is my first post** using Lume.
I hope you like it!

Markdown 代码存储在 content 变量中：

<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

md filter

Markdown 插件还注册了 md 过滤器，该过滤器将任何字符串值渲染为 Markdown 并输出 HTML 片段。 该过滤器还接受一个参数，以 inline 模式渲染 Markdown。

<!-- 渲染为 HTML 代码 -->
<div>{{ text |> md }}</div>

<!-- 单行渲染，不包含段落包裹：-->
<p>{{ text |> md(true) }}</p>