Prose Components

Prose 组件列表

Prose 组件是 Nuxt Content 的一个概念，它将 Markdown 标签映射为 Vue 组件，使你可以通过自定义这些组件的样式或行为来实现自定义 Markdown 渲染。

Prose 组件是 HTML 排版标签的替代品。Prose 组件提供了一种自定义内容 UI 的简单方法。

要覆盖一个 Prose 组件，在你的项目 components/content/ 目录下创建一个同名组件（例如：components/content/ProseA.vue）。

Prose 组件最初是 @nuxtjs/mdc 的一部分。

`ProseA`

[Link](/docs/components/prose)

`ProseBlockquote`

> Block quote

`ProsePre`

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

file.js

export default () => {
  console.log('Code block')
}

组件属性将是：

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

查看高亮选项了解更多关于语法高亮的信息。

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

`ProseCode`

`code`

`const code: string = 'highlighted code inline'`{lang="ts"}

code

const code: 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](https://nuxt.com/design-kit/icon-green.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._