散文

以下是目前已实现的所有散文组件的列表。

要覆盖散文组件，请在您的项目中创建具有相同名称的组件 components/content/ 目录（例如：components/content/ProseA.vue）

`ProseA`

[Link](/components/prose)

`ProseBlockquote`

源代码

> Block quote

`ProsePre`

源代码

  ```js [file.js]{4-6,7} meta-info=val
  export default () => {
    console.log('Code block')
  }
  ```

组件属性将是

{
  code: "export default () => {\n    console.log('Code block')\n}"
  language: "js"
  filename: "file.js"
  highlights: [4, 5, 6, 7]
  meta: "meta-info=val"
}

查看突出显示选项了解有关语法突出显示的更多信息。

如果您想在文件名中使用 ]，则需要使用 2 个反斜杠将其转义：\\]。这是必要的，因为 JS 会自动转义字符串中的反斜杠，所以 \] 将被解析为 ]，从而破坏我们的正则表达式。

`ProseCodeInline`

源代码

代码内联.

`code inline`.

`const codeInline: string = 'highlighted code inline'`

`ProseH1`

源代码

# H1 Heading

`ProseH2`

源代码

## H2 Heading

`ProseH3`

源代码

### H3 Heading

`ProseH4`

源代码

#### H4 Heading

`ProseH5`

源代码

##### H5 Heading

`ProseH6`

源代码

###### H6 Heading

`ProseHr`

源代码

Divider under.

---

Divider above.

`ProseImg`

源代码

![A Cool Image](/social-card.png)

`ProseUl`

源代码

- Just
- An
- Unordered
- List

`ProseLi`

源代码

- List element

`ProseOl`

源代码

1. Foo
2. Bar
3. Baz

`ProseP`

源代码

Just a paragraph.

`ProseStrong`

源代码

**Just a strong paragraph.**

`ProseEm`

源代码

_Just an italic paragraph._

`ProseTable`

源代码

| Key | Type      | Description |
| --- | --------- | ----------- |
| 1   | Wonderful | Table       |
| 2   | Wonderful | Data        |
| 3   | Wonderful | Website     |

`ProseTbody`

源代码

包含在 ProseTable 示例中。

`ProseTd`

源代码

包含在 ProseTable 示例中。

`ProseTh`

源代码

包含在 ProseTable 示例中。

`ProseThead`

源代码

包含在 ProseTable 示例中。

`ProseTr`

源代码

包含在 ProseTable 示例中。

在 Vue 组件中注入 Markdown 的最快方法。

介绍

文档驱动模式为基于 Markdown 的网站提供了更多功能。