components
Prose Components
A list of Prose components currently implemented.
Prose
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
Code
[Link](/components/prose)
ProseBlockquote
Code
> Block quote
ProseCode
Code
```js [file.js]{4-6,7} meta-info=val 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.
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
code inline
.
Code
`code inline`.`const codeInline: string = 'highlighted code inline'`
ProseH1
Code
# H1 Heading
ProseH2
Code
## H2 Heading
ProseH3
Code
### H3 Heading
ProseH4
Code
#### H4 Heading
ProseH5
Code
##### H5 Heading
ProseH6
Code
###### H6 Heading
ProseHr
Code
Divider under.---Divider above.
ProseImg
Code

ProseUl
Code
- Just- An- Unordered- List
ProseLi
Code
- List element
ProseOl
Code
1. Foo2. Bar3. Baz
ProseP
Code
Just a paragraph.
ProseStrong
Code
**Just a strong paragraph.**
ProseEm
Code
_Just an italic paragraph._
ProseTable
Code
| Key | Type | Description || --- | --------- | ----------- || 1 | Wonderful | Table || 2 | Wonderful | Data || 3 | Wonderful | Website |
ProseTbody
Included in ProseTable example.
ProseTd
Included in ProseTable example.
ProseTh
Included in ProseTable example.
ProseThead
Included in ProseTable example.
ProseTr
Included in ProseTable example.