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[Link](/components/prose)
ProseBlockquote> Block quote
ProsePre ```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.
ProseCodeInlinecode inline.
`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
ProseHrDivider under.
---
Divider above.
ProseImg
ProseUl- Just
- An
- Unordered
- List
ProseLi- List element
ProseOl1. Foo
2. Bar
3. Baz
ProsePJust 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 |
ProseTbodyIncluded in ProseTable example.
ProseTdIncluded in ProseTable example.
ProseThIncluded in ProseTable example.
ProseTheadIncluded in ProseTable example.
ProseTrIncluded in ProseTable example.
[
{
"title": "<ContentSlot>",
"path": "/content-v2/components/content-slot",
"stem": "content-v2/4.components/6.content-slot",
"description": "The fastest way to inject Markdown into your Vue components."
},
{
"title": "Introduction",
"path": "/content-v2/document-driven/introduction",
"stem": "content-v2/5.document-driven/1.introduction",
"description": "The Document-driven mode gives a lot more power to Markdown-based websites."
}
]