Markdown Extensions

SolidBase provides multiple ways to extend markdown syntax from GFM to fully customized ones. The following sections list all of their options and usage examples.

Autolinked Titles

Each title, heading, and subheading will automatically be given a unique slug and self link.

# My Docs

## Subheading

<h1 id="my-docs"><a href="#my-docs">My Docs</a></h1>

<h2 id="subheading"><a href="#subheading">Subheading</a></h2>

External Links

Each outbound link will automatically get target="_blank" rel="noreferrer" attributes for security and performance reasons.

[SolidJS](https://www.solidjs.com)
[SolidBase on GitHub](https://github.com/kobaltedev/solidbase)

<a href="https://www.solidjs.com" target="_blank" rel="noopener noreferrer">SolidJS</a>
<a href="https://github.com/kobaltedev/solidbase" target="_blank" rel="noopener noreferrer">SolidBase on GitHub</a>

Frontmatter

Out of the box, SolidBase supports YAML frontmatter to define metadata at the top of your markdown files. To add frontmatter to your markdown file, simply add a YAML block at the very top of the file, wrapped in triple dashes ---.

---
title: SolidBase
layout: home
---

# {frontmatter.title}

The data defined in the frontmatter will be parsed and made available to the page as a frontmatter object. It is made available through the entire application, including all custom and theming components.

For more details, see the Frontmatter reference.

Table of Contents

You can automatically generate a table of contents (ToC) for your markdown files by adding [[toc]] anywhere in the document. The ToC will be generated based on all titles, headings, and subheadings in the document.

Input

[[toc]]

Output

1. Markdown Extensions

   1. Autolinked Titles

   2. External Links

   3. Frontmatter

   4. Table of Contents

   5. Directives

      1. Custom Directive Titles

   6. Tabs

   7. GitHub Flavored Markown

      1. Alerts
      2. Autolinks
      3. Tables
      4. Task Lists
      5. Horizontal Rules

   8. Footnotes

   9. Code Blocks

      1. Line Highlighting
      2. Line Numbers
      3. Code Tabs
      4. Twoslash

   10. Collapsible

   11. Advanced Configuration

Directives

Directives are custom blocks that can be used to highlight important information, warnings, tips, and more. They are similar to callouts or alerts in other documentation systems.

:::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 Directive Titles

To set a custom title for a directive, use square brackets [] immediately after the directive type.

:::info[Custom Title]
Highlights information that users should take into account, even when skimming.
:::

:::tip[]
This is a tip with no title.
:::

:::details[Click me to view]
This is a details block.
:::

Tabs

::::tab-group[key]
:::tab[Title A]
Hey I'm A
:::

:::tab[Title B]
Hi this is B
:::
::::

[key] is used for syncing and persistance.

GitHub Flavored Markown

In addition to the standard markdown syntax, SolidBase also supports several GitHub Flavored Markdown (GFM) extensions.

Alerts

In addition to the directives above, SolidBase also supports GitHub-flavored alerts. These alerts can render as callouts with similar styles to the directives above.

> [!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.

Autolinks

SolidBase is able to automatically detect and convert URLs into clickable links.

https://github.com/kobaltedev/solidbase

Tables

Input

| a        | b        |        c |    d     |
| -------- | :------- | -------: | :------: |
| longword | longword | longword | longword |
| short    | short    |    short | `short`  |

Output

Task Lists

Input

- [ ] to do
- [x] done

Output

• to do
• done

Horizontal Rules

You can create horizontal rules (or horizontal lines) through the following methods:

• Three or more hyphens (---)
• Three or more asterisks (***)
• Three or more underscores (___)
• HTML <hr /> tag

Footnotes

Footnotes are able to be added anywhere in the document using [^label] syntax, where label is a unique identifier for the footnote. To define the footnote content, the footnote definition should be placed at the end of the document, using the same [^label]: syntax followed by the footnote text.

Input

A note[^1]

[^1]: Big note.

Output

A note¹

Code Blocks

SolidBase uses Expressive Code to highlight code blocks. Expressive Code is a fast and flexible syntax highlighter that supports a wide range of programming languages as well as additional features like line highlighting, line numbers, collapsible sections, code tabs, and more. The list of supported languages is [available on GitHub]](https://github.com/antfu/textmate-grammars-themes/blob/main/packages/tm-grammars/README.md)

To use Expressive Code, simply wrap your code in triple backticks (```) and specify the language after the opening backticks. This will enable syntax highlighting for that language.

Input

```tsx
export default function App() {
  return (
    <Counter/>
  );
}
```

```json
{
  "data": {
    "values": 4
  }
}
```

Output

export default function App() {
  return <Counter />;
}

export default function App() {
  return <Counter />;
}

{
  "data": {
    "values": 4
  }
}

Line Highlighting

In addition to syntax highlighting, you can also highlight specific lines in a code block by adding curly braces {} after the language and specifying the line numbers or ranges you want to highlight. You can specify single lines (e.g., {4}), multiple single lines (e.g., {4, 6, 10}), line ranges (e.g., {1-4}), or a combination of both (e.g., {4, 6-10, 15, 20-24, 40}).

Input

```js {1, 4, 6-8}
export default { // Highlighted
  data () {
    return {
      msg: "Highlighted!"
      other: "Not highlighted",
      f: `But
      we
      are`,
    }
  }
}
```

Output

export default { // Highlighted
  data () {
    return {
      msg: "Highlighted!"
      other: "Not highlighted",
      f: `But
      we
      are`,
    }
  }
}

Line Numbers

By default, line numbers are disabled. To enable them, add showLineNumbers after the language.

Input

```ts showLineNumbers
const line2 = "This is line 2";
const line3 = "This is line 3";
```

Output

1
const line2 = 'This is line 2'
2
const line3 = 'This is line 3'

1
const line2 = "This is line 2";
2
const line3 = "This is line 3";

Code Tabs

When you have multiple related code blocks, you can group them into tabs for better organization and readability. To create code tabs, add tab after the language and specify a title for each tab.

Input

```tsx {4} tab title="a.tsx"

import { SolidBaseApp } from "@kobalte/solidbase";

export default function App() {
  return <SolidBaseApp a />;
}

```

```tsx {4} tab title="b.tsx"

import { SolidBaseApp } from "@kobalte/solidbase";

export default function App() {
  return <SolidBaseApp b />;
}

```

Output

import { SolidBaseApp } from "@kobalte/solidbase";

export default function App() {
  return <SolidBaseApp a />;
}

import { SolidBaseApp } from "@kobalte/solidbase";

export default function App() {
  return <SolidBaseApp a />;
}

import { SolidBaseApp } from "@kobalte/solidbase";

export default function App() {
  return <SolidBaseApp b />;
}

import { SolidBaseApp } from "@kobalte/solidbase";

export default function App() {
  return <SolidBaseApp b />;
}

Twoslash

// TODO

Collapsible

// TODO

Advanced Configuration

// TODO