Introduction

an example of a doc site built using the amazing Velite and MDX.

Velite is great because it allows you to process many different file types, such as MD, MDX, JSON, YAML, and more with Zod validation to build a type-safe data layer for your site.

We support Velite with several Remark and Rehype plugins from the Unified ecosystem to process and transform content.

This page is pure MDX that utilizes GitHub flavored markdown and is meant to show off the power of using these tools together.

While browsing this page, you may notice that many elements have default styles applied to them, or that we've used components that aren't typically found in traditional markdown files. why MDX is so powerful! It allows you to use JSX to create custom components and styles that can then be used and applied directly in your markdown files!

Note: The following markdown cheatsheet is adapted from GitHub's Markdown Cheatsheet

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

Markdown Syntax

Headings

To create a heading, add one to six # symbols before your heading text. The number of # you use will determine the hierarchy level and typeface size of the heading.

markdown# First-Level Heading (h1)
## Second-Level Heading (h2)
### Third-Level Heading (h3)
#### Fourth-Level Heading (h4)
##### Fifth-Level Heading (h5)
###### Sixth-Level Heading (h6)

First-Level Heading (h1)

Second-Level Heading (h2)

Third-Level Heading (h3)

Fourth-Level Heading (h4)

Fifth-Level Heading (h5)

Sixth-Level Heading (h6)

Styling Text

With markdown, it's really easy to add bold, italic, strikethrough, subscript, or superscript styles to text.

Quotes

You can quote text with a >.

markdownIn the words of Abraham Lincoln:
> Pardon my French

In the words of Abraham Lincoln:

Pardon my French

Lists

Unordered Lists

You can make an unordered list by preceding one or more lines of text with -, *, or +. Sub-lists are made by indenting two spaces.

markdown- Item 1
+ Item 2
  + Item 2a //Indented two spaces
  + Item 2b //Indented two spaces
* Item 3
* Item 4
  - Item 4a //Indented two spaces
    - Item 4a1 //Indented four spaces
    - Item 4a2 //Indented four spaces
    - Item 4a3 //Indented four spaces

• Item 1

• Item 2
  • Item 2a
  • Item 2b

• Item 3
• Item 4
  • Item 4a
    • Item 4a1
    • Item 4a2
    • Item 4a3

Ordered Lists

You can make an ordered list by preceding one or more lines of text with a number. Markdown automatically increments the list correctly. Sub-lists of ordered lists need to be indented three spaces.

markdown1. Item 1
1. Item 2
   1. Item 2a //Indented three spaces
   2. Item 2b //Indented three spaces
1. Item 3
1. Item 4
   1. Item 4a //Indented three spaces
      1. Item 4a1 //Indented six spaces
      2. Item 4a2 //Indented six spaces
      3. Item 4a3 //Indented six spaces

1. Item 1
2. Item 2
   1. Item 2a
   2. Item 2b
3. Item 3
4. Item 4
   1. Item 4a
      1. Item 4a1
      2. Item 4a2
      3. Item 4a3

Mixed Lists

You can mix and match ordered and unordered lists, and even the characters you use to construct them. Sub-lists follow the same rules of their parent lists - sub-lists of ordered lists need to be indented three spaces, while sub-lists of unordered lists need to be indented two spaces.

markdown1. Item 1
1. Item 2
   * Item 2a // Indented three spaces
   * Item 2b // Indented three spaces
1. Item 3
1. Item 4
   - Item 4a // Indented three spaces
     1. Item 4a1 // Indented two spaces
     2. Item 4a2 // Indented two spaces
     3. Item 4a3 // Indented two spaces

1. Item 1
2. Item 2
   • Item 2a
   • Item 2b
3. Item 3
4. Item 4
   • Item 4a
     1. Item 4a1
     2. Item 4a2
     3. Item 4a3

Footnotes

markdownHere is a simple footnote[^1], with some additional text after it.
 
[^1]: My reference.

Here is a simple footnote¹, with some additional text after it.

Line Highlight

ts// Highlight line 1 and line 3 to 6
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["avatars.githubusercontent.com"],
  },
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ["@prisma/client"],
  },
}

Footnotes