Prose Components

Prose components are replacements for HTML typography tags. Prose components provide a simple way to customize content UI.

To overwrite a prose component, create a component with the same name in your project components/content/ directory (ex: components/content/ProseA.vue).

Prose components are originally part of @nuxtjs/mdc.

`ProseA`

[Link](/docs/components/prose)

`ProsePre`

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

file.js

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

Component properties will be:

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

Check out the highlight options for more about the syntax highlighting.

If you want to use ] in the filename, you need to escape it with 2 backslashes: \\]. This is necessary since JS will automatically escape the backslash in a string so \] will be resolved as ] breaking our regex.

`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/assets/design-kit/icon-green.png)

`ProseUl`

- Just
- An
- Unordered
- List

Just
An
Unordered
List ::: ::

`ProseLi`

- List element

List element ::: ::

`ProseOl`

1. Foo
2. Bar
3. Baz

Foo
Bar
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     |