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 |
FeatureStatus
MarkdownSupported
Web componentsSupported
JSXNot needed

For larger or more structured tables, use wc-table (JSON) or wc-asciidoc-table (AsciiDoc syntax with spans, column specs, and CSV/DSV).

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.

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

MDX compatibility

DocsLit recognizes PascalCase component names from Mintlify and MDX projects. Tags like <Tip>, <Card>, <Steps>, and <CardGroup> are automatically rewritten to their wc-* equivalents at parse time. This means most Mintlify projects work without changing source files.

Both styles can be mixed in a single file. The canonical wc-* syntax continues to work unchanged.

<!-- Both of these render the same component --> <Tip>This uses the Mintlify-style name.</Tip> <wc-callout type="tip">This uses the DocsLit name.</wc-callout>

Any unmapped PascalCase tag is converted to wc-kebab-case automatically, so a custom <MyWidget> becomes <wc-my-widget>.

Run `docslit validate` to get warnings about PascalCase tags that resolve to a component that is not registered.

Inline variable references

Use {{VAR_NAME}} in regular Markdown prose for compile-time variable substitution. Values come from global attributes, page frontmatter attributes, and page-local wc-var declarations.

<wc-var name="API_KEY" value="sk-demo" /> Your key is **{{API_KEY}}**.

See Variables and precedence for variable resolution rules, and Code blocks for runtime interactive variable workflows.

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