2025-11-22 · 6 min read

Lorem Ipsum

#Lorem#Ipsum#dolar#esse#et#sit#amet

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Always start your top-level headings with `<h2>`

There should only be one <h1> tag in the whole page, which is reserved by the blog post title, so you should always start your top level headings with <h2> tag instead. If you still include an <h1> tag then the entire post headings will be normalized by increasing their heading level by 1 (i.e, <h1> -> <h2> and <h2> -> <h3>).

Links

Markup:

This is a paragraph that contains an [external link](https://web.dev/blog/), [an internal link](/about) and an [anchor link](#heading-2).

Raw links can be auto-linked, just like Github. For example:
www.example.com
https://github.com

Rendered:

This is a paragraph that contains an external link, an internal link and an anchor link.

Raw links can be auto-linked, just like Github. For example: www.example.com https://github.com

Blockquotes

Markup:

> This is a normal blockquote.

> Blockquotes can be nested as well of course.
>
> > see.

Rendered:

This is a normal blockquote.

Blockquotes can be nested as well of course.

see.

Callout cards

Markup:

<Callout>This is the default callout card</Callout>

<Callout variant="warning">This is a warning callout</Callout>

<Callout variant="danger">
  <p>This is a danger callout</p>

    ```tsx
    "use strict";

    const obj = { a: "Hello", b: "World" };
    const test = ["This", "is", "cool", "isn't", "it?"]
    ```

    ```tsx
    const Page = () => {
      return <div>Hellow World!</div>;
    };
    ```
</Callout>

Rendered:

Note

This is the default callout card

Warning

This is a warning callout

Danger

This is a danger callout

tsx

"use strict";

const obj = { a: "Hello", b: "World" };
const test = ["This", "is", "cool", "isn't", "it?"]

tsx

const Page = () => {
  return <div>Hellow World!</div>;
};

Lists

Markup:

- This
- is
- a
- nested
  - list
  - cool
- Similar to how in Github

Rendered:

This
is
a
nested
- list
- cool
Similar to how in Github

Tables

Markup:

| this  | is    | a     | table |
| ----- | ----- | ----- | ----- |
| col 1 | col 2 | col 3 | col 4 |
| col 1 | col 2 | col 3 | col 4 |
| col 1 | col 2 | col 3 | col 4 |

Rendered:

this	is	a	table
col 1	col 2	col 3	col 4
col 1	col 2	col 3	col 4
col 1	col 2	col 3	col 4

Markup:

| Left aligned Header | Right aligned Header | Center aligned Header |
| :------------------ | -------------------: | :-------------------: |
| Content Cell        |         Content Cell |     Content Cell      |
| Content Cell        |         Content Cell |     Content Cell      |

Rendered:

Left aligned Header	Right aligned Header	Center aligned Header
Content Cell	Content Cell	Content Cell
Content Cell	Content Cell	Content Cell

Code Blocks

Markup:

```js showLineNumbers
// This is a javascript code block
const ls = window.localStorage;
ls.setItem("awesome", "blog-template");
```

Rendered:

// This is a javascript code block
const ls = window.localStorage
ls.setItem('awesome', 'blog-template')

Code block with title and caption

Markup:

```tsx title="app/components/mdx-content.tsx"
import mdxComponents from "@/components/mdx-components";
import { useMDXComponent } from "next-contentlayer/hooks";

type MDXContentProps = {
  code: string;
};

const MDXContent = ({ code }: MDXContentProps) => {
  const Content = useMDXComponent(code);
  return <Content components={mdxComponents} />;
};

export default MDXContent;
```

Rendered:

app/components/mdx-content.tsx

tsx

import mdxComponents from '@/components/mdx-components'
import { useMDXComponent } from 'next-contentlayer/hooks'

type MDXContentProps = {
  code: string
}

const MDXContent = ({ code }: MDXContentProps) => {
  const Content = useMDXComponent(code)
  return <Content components={mdxComponents} />
}

export default MDXContent

The file icon in the code titles are based on the language provided to the code block.

Code with caption below:

Markup:

```js caption="Caption for above code block"
// This is a javascript code block
const ls = window.localStorage;
ls.setItem("awesome", "blog-template");
```

Rendered:

// This is a javascript code block
const ls = window.localStorage
ls.setItem('awesome', 'blog-template')

Caption for above code block

Highlighting line number in code blocks

Markup;

```tsx {2}
// This is a javascript code block
const ls = window.localStorage;
ls.setItem("awesome", "blog-template");
```

Rendered:

tsx

// This is a javascript code block
const ls = window.localStorage
ls.setItem('awesome', 'blog-template')

Range highlighting:

Markup:

```js title="page.tsx" {5-10}
// This is a javascript code block
const ls = window.localStorage;
ls.setItem("awesome", "blog-template");

try {
  const res = await fetch(process.env.API_URL);
} catch (e) {
  // this is what peak error handling looks like
  console.log(e);
}
```

Rendered:

page.tsx

// This is a javascript code block
const ls = window.localStorage
ls.setItem('awesome', 'blog-template')

try {
  const res = await fetch(process.env.API_URL)
} catch (e) {
  // this is what peak error handling looks like
  console.log(e)
}

Highlighting words in code blocks

Markup;

```tsx /title/1-2,4
export const generateCommonMeta = (meta: {
  title: string;
  description: string;
  image?: string;
}): Metadata => {
  return {
    title: meta.title,
    description: meta.description,
    openGraph: {
      title: meta.title,
      description: meta.description,
      images: [meta.image || config.siteImage],
    },
  };
};
```

Rendered:

tsx

export const generateCommonMeta = (meta: {
  title: string
  description: string
  image?: string
}): Metadata => {
  return {
    title: meta.title,
    description: meta.description,
    openGraph: {
      title: meta.title,
      description: meta.description,
      images: [meta.image || config.siteImage],
    },
  }
}

Inline code

Markup:

This is an inline code with syntax highlighting: `code(){:js}`

This is a normal inline code `code()`

Rendered:

This is an inline code with syntax highlighting: code()

This is a normal inline code code()

Images

Markup:

![this is an external image](https://images.unsplash.com/photo-1541701494587-cb58502866ab?fit=crop&w=1170&q=80)

![this is an internal image](/images/announcement-banner.png)

Rendered:

this is an external image

Text styles

Markup:

**This is a bold text**

_This is an italic text_

**_This is a strong italic text_**

~~This is a strikethrough text~~

Below is a seperator

---

Rendered:

This is a bold text

This is an italic text

This is a strong italic text

~~This is a strikethrough text~~

Below is a seperator

Markup:

- [ ] An uncompleted task
- [x] A completed task

Rendered:

An uncompleted task
A completed task

← Hello Contentlayer 如何设计一个高转化的 SaaS Blog 页面 →

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Always start your top-level headings with <h2>

Links

Blockquotes

Callout cards

Lists

Tables

Code Blocks

Code block with title and caption

Code with caption below:

Highlighting line number in code blocks

Highlighting words in code blocks

Inline code

Images

Text styles

Always start your top-level headings with `<h2>`