Markdown basics

Writing•4 min read||

DocsLit uses standard GitHub Flavored Markdown (GFM) with one superpower: you can drop web components directly into your Markdown without imports or configuration.

Text formatting

**Bold text** for emphasis. *Italic text* for secondary emphasis. ~~Strikethrough~~ for removed content. `inline code` for code references. [Link text](https://example.com) for hyperlinks.

Bold text for emphasis. Italic text for secondary emphasis. Strikethrough for removed content. inline code for code references. Link text for hyperlinks.

Headings

Use ## and ### headings to structure your content. DocsLit generates a table of contents from these headings automatically.

## Second-level heading ### Third-level heading Write headings in sentence case: "Getting started with components" not "Getting Started With Components". Reserve # (H1) for the page title only.

Lists

- First item - Second item - Nested item - Third item 1. First step 2. Second step 3. Third step
  • First item
  • Second item
    • Nested item
  • Third item
  1. First step
  2. Second step
  3. Third step

Tables

| Feature | Status | |---|---| | Markdown | Supported | | Web components | Supported | | JSX | Not needed |
Feature Status
Markdown Supported
Web components Supported
JSX Not needed

Code blocks

Use fenced code blocks with a language identifier for syntax highlighting:

```javascript const greeting = "Hello, world!"; console.log(greeting); ``` const greeting = "Hello, world!"; console.log(greeting);

See code blocks for advanced features like filenames, tabs, and editable variables.

Images

![Alt text](https://example.com/image.png)

Place image files in your docs/ directory and reference them with relative paths.

Internal links

Link to other pages using the page slug:

Read the [installation guide](getting-started/installation) to get started.

DocsLit resolves these links in both dev and static build modes.

Using web components

Drop any <wc-*> tag directly into your Markdown. No imports, no configuration:

Markdown source:

<wc-callout type="info" title="Note"> This is a web component inside your Markdown content. </wc-callout>

Rendered output:

This is a web component inside your Markdown content.

You can write Markdown inside most components:

<wc-callout type="tip" title="Markdown works inside"> You can use **bold**, *italic*, `code`, and even: - Bullet lists - [Links](getting-started/introduction) - Other components </wc-callout>

You can use bold, italic, code, and even:

  • Bullet lists
  • Links
  • Other components

Familiar MDX-style names

You can also write components with the PascalCase names common to Mintlify, Fern, and other MDX-based tools. DocsLit rewrites them to the canonical wc-* form at build time.

<Tip>Use editable variables in your quickstart.</Tip> <Card title="Get started" icon="rocket" href="getting-started/installation"> Five-minute setup. </Card>

Both styles work equally well — pick whichever feels natural. Each component page lists the MDX names that map to it, and the Mintlify migration guide covers the full set.

DocsLit converts tag names; it does not evaluate JavaScript expressions like {props.foo} or run import/export statements. Strip those first if you're pasting MDX.

HTML pass-through

Standard HTML tags work in your Markdown. Use them for layout or styling that Markdown does not cover:

<div style="text-align: center;"> <strong>Centered bold text</strong> </div>

Next steps