Prose Components

A list of Prose components currently implemented.

Here is a list of all the Prose components currently implemented.

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

`ProseA`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

[Link](/api/components/prose)

::code-block{label="Preview"} Link :: ::

`ProseBlockquote`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

> Block quote

::code-block{label="Preview"}

Block quote :: ::

`ProseCode`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

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

::code-block{label="Preview"}

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: [4, 5, 6, 7]
  meta: "meta-info=val"
}

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

::alert{type="warning"} 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. ::

`ProseCodeInline`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

code inline.

::code-group

`code inline`.

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

::code-block{label="Preview"} code inline.

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

`ProseH1`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

# H1 Heading

::code-block{label="Preview"}

H1 Heading

:: ::

`ProseH2`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

## H2 Heading

::code-block{label="Preview"}

H2 Heading

:: ::

`ProseH3`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

### H3 Heading

::code-block{label="Preview"}

H3 Heading

:: ::

`ProseH4`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

#### H4 Heading

::code-block{label="Preview"}

H4 Heading

:: ::

`ProseH5`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

##### H5 Heading

::code-block{label="Preview"}

H5 Heading

:: ::

`ProseH6`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

###### H6 Heading

::code-block{label="Preview"}

H6 Heading

:: ::

`ProseHr`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

Divider under.

---

Divider above.

::code-block{label="Preview"} Divider under.

Divider above. :: ::

`ProseImg`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

![A Cool Image](/preview.png)

::code-block{label="Preview"} :: ::

`ProseUl`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

- Just
- An
- Unordered
- List

::code-block{label="Preview"}

Just
An
Unordered
List :: ::

`ProseLi`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

- List element

::code-block{label="Preview"}

List element :: ::

`ProseOl`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

1. Foo
2. Bar
3. Baz

::code-block{label="Preview"}

Foo
Bar
Baz :: ::

`ProseP`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

Just a paragraph.

::code-block{label="Preview"} Just a paragraph. :: ::

`ProseStrong`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

**Just a strong paragraph.**

::code-block{label="Preview"} Just a strong paragraph. :: ::

`ProseEm`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

_Just an italic paragraph._

::code-block{label="Preview"} Just an italic paragraph. :: ::

`ProseTable`

:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source

::code-group

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

::code-block{label="Preview"}

Key	Type	Description
1	Wonderful	Table
2	Wonderful	Data
3	Wonderful	Website
::
::