Markdown

Write beautiful documentation pages with Markdown.

Edit on Github

Introduction

Osmosis uses MDX allowing you to use JSX in your markdown content to build comprehensive and powerful documentation pages. It also provides a large set of custom plugins to extend the Markdown features.

Osmosis tries to stick as close as possible to the Github Flavored Markdown to keep your content readable directly on Github.

Syntax

Frontmatter

Frontmatter allows you to attach data do a document using the YAML syntax.

---
title: Document Title
---

Document content

Callouts

Callouts (also called admonitions or alerts) can be used to emphasize critical information.

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP] Optional title
> Helpful advice for doing things better or more easily.

> [!IDEA]
> Some ideas to guide users in a potential direction

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
Useful information that users should know, even when skimming content.

Optional title

Helpful advice for doing things better or more easily.
Some ideas to guide users in a potential direction
Urgent info that needs immediate user attention to avoid problems.
Advises about risks or negative outcomes of certain actions.

Codeblocks

Syntax highlighting is supported out of the box using @shikijs/rehype.

```js
console.log('Hello World')
```

```js title="My Title"
console.log('Hello World')
```

Tab Groups

Subsequent codeblocks with tab=<name> are merged into tabs.

```jsx tab="Tab 1"
console.log('Tab 1')
```

```js tab="Tab 2"
console.log('Tab 2')
```
console.log('Tab 1')
console.log('Tab 2')

Package install

Automatically generate codeblocks for package installs with package-install.

```package-install
npm i @osmosjs/osmos
```
npm i @osmosjs/osmos
pnpm add @osmosjs/osmos
yarn add @osmosjs/osmos
bun add @osmosjs/osmos

On this page