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":

Directives

Directives can be defined by their types, titles, and contents.

Default Title

Input

:::info
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.
:::

:::danger
Negative potential consequences of an action.
:::

:::details
This is a details block.
:::

Output

info

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.

danger

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

Custom Title

Highlights information that users should take into account, even when skimming.

Click me to view

This is a details block.

a	b	c	d
longword	longword	longword	longword
short	short	short	`short`

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

```tsx
export 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 default
const line2 = "This is line 2";
const line3 = "This is line 3";
```

```ts showLineNumbers
// line-numbers is enabled
const line2 = "This is line 2";
const line3 = "This is line 3";
```

Output

// line-numbers is disabled by default
const line2 = "This is line 2";
const line3 = "This is line 3";

line3 = 'This is line 3' ```

## Advanced Configuration

TODO

Big note. ↩

Edit this page on GitHub

Last updated: 11/15/24, 4:16 AM

Markdown Extensions

Autolinked Titles

External Links

Frontmatter

Table of Contents

Directives

Default Title

Custom Title

GitHub Flavored Markown

Alerts

Autolinks

Strikethrough

Tables

Task List

Kbd

Footnotes

Syntax Highlighting in Code Blocks

Line Highlighting in Code Blocks

Line Numbers