![Beta](/_build/assets/beta-BjdZcT4I.png)
Markdown Extensions
SolidBase comes with many markdown extensions from GFM to fully custom ones. All of their options and usage examples are listed here.
Autolinked Titles
All titles will have an associated unique slug and self link.
# My Docs
## Subheading
will generate:
<h1 id="my-docs"><a href="#my-docs">My Docs</a></h1>
<h2 id="subheading"><a href="#subheading">Subheading</a></h2>
External Links
Outbound links automatically get target="_blank" rel="noreferrer"
:
Frontmatter
YAML frontmatter is supported out of the box:
---title: SolidBaselayout: home---
This data will be available to the rest of the page, along with all custom and theming components.
For more details, see Frontmatter.
Table of Contents
Input
[[toc]]
Output
Directives
Directives can be defined by their types, titles, and contents.
Default Title
Input
:::infoHighlights information that users should take into account, even when skimming.:::
:::tipOptional information to help a user be more successful.:::
:::importantCrucial information necessary for users to succeed.:::
:::warningCritical content demanding immediate user attention due to potential risks.:::
:::dangerNegative potential consequences of an action.:::
:::detailsThis is a details block.:::
Output
Highlights information that users should take into account, even when skimming.
Optional information to help a user be more successful.
Crucial information necessary for users to succeed.
Critical content demanding immediate user attention due to potential risks.
Negative potential consequences of an action.
details
This is a details block.
Custom Title
You can set a custom title between square brackets []
after the "type" of the directive.
Input
:::info[Custom Title]Highlights information that users should take into account, even when skimming.:::
:::details[Click me to view]This is a details block.:::
Output
Highlights information that users should take into account, even when skimming.
Click me to view
This is a details block.
GitHub Flavored Markown
Alerts
SolidBase also supports GitHub-flavored alerts to render as callouts. They will be rendered the same as the custom containers.
> [!NOTE]> Highlights information that users should take into account, even when skimming.
> [!TIP]> Optional information to help a user be more successful.
> [!IMPORTANT]> Crucial information necessary for users to succeed.
> [!WARNING]> Critical content demanding immediate user attention due to potential risks.
> [!CAUTION]> Negative potential consequences of an action.
Highlights information that users should take into account, even when skimming.
Optional information to help a user be more successful.
Crucial information necessary for users to succeed.
Critical content demanding immediate user attention due to potential risks.
Negative potential consequences of an action.
Autolinks
All text matching link patterns will automatically be converted into a link:
Input
start.solidjs.comhttps://github.com/kobaltedev/solidbase
Output
start.solidjs.com https://github.com/kobaltedev/solidbase
Strikethrough
Strikethrough text is any text wrapped in a matching pair of one or two tildes (~
).
Input
~~Hi~~ Hello, ~there~ world!
Output
Hi Hello, there world!
Tables
Input
| a | b | c | d || -------- | :------- | -------: | :------: || longword | longword | longword | longword || short | short | short | `short` |
Output
a | b | c | d |
---|---|---|---|
longword | longword | longword | longword |
short | short | short | short |
Task List
Input
- [ ] to do- [x] done
Output
- to do
- done
Kbd
While not a markdown syntax, a key input element can be written using html.
Input
<kbd>Ctrl</kbd> + <kbd>C</kbd>
Output
Ctrl + C
Footnotes
Footnotes can be added anywhere in the document and a link will be generated pointing to it. All notes are inserted at the end of the document with a corresponding backlink.
Input
A note[^1]
[^1]: Big note.
Output
A note1
Syntax Highlighting in Code Blocks
SolidBase uses Expressive Code to highlight language syntax in Markdown code blocks, using coloured text. Expressive Code supports a wide variety of programming languages and additional features. All you need to do is append a valid language alias to the beginning backticks for the code block:
Input
```tsxexport default function App() { return ( <Counter/> );}```
```json{ "data": { "values": 4 }}```
Output
export default function App() { return <Counter />;}
{ "data": { "values": 4 }}
A list of valid languages is available on GitHub.
Line Highlighting in Code Blocks
TODO: broken
Input
```ts{4}export default { data () { return { msg: 'Highlighted!' } }}```
Output
export default { data () { return { msg: 'Highlighted!' } }}
In addition to a single line, you can also specify multiple single lines, ranges, or both:
- Line ranges: for example
{5-8}
,{3-10}
,{10-17}
- Multiple single lines: for example
{4, 7, 9}
- Line ranges and single lines: for example
{4, 7-13, 16, 23-27, 40}
Input
```js{1, 4, 6-8}export default { // Highlighted data () { return { msg: `Highlighted! This line isn't highlighted, but this and the next 2 are.`, motd: 'VitePress is awesome', lorem: 'ipsum' } }}```
Output
export default { // Highlighted data () { return { msg: `Highlighted! This line isn't highlighted, but this and the next 2 are.`, motd: 'VitePress is awesome', lorem: 'ipsum', } }}
Line Numbers
TODO: broken
You can enable line numbers for each code block by adding showLineNumbers
after the language.
Input
```ts// line-numbers is disabled by defaultconst line2 = "This is line 2";const line3 = "This is line 3";```
```ts showLineNumbers// line-numbers is enabledconst line2 = "This is line 2";const line3 = "This is line 3";```
Output
// line-numbers is disabled by defaultconst line2 = "This is line 2";const line3 = "This is line 3";
line3 = 'This is line 3' ```
## Advanced Configuration
TODO
Footnotes
-
Big note. ↩
Last updated: 11/15/24, 4:16 AM