---
title: "Markdown Syntax"
description: "Master standard Markdown syntax for text formatting in Movk Nuxt Docs, including heading levels, bold/italic, ordered and unordered lists, inline code, hyperlinks, and images, to build clear, well-structured technical documentation."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/typography/markdown-syntax"
---
# Markdown Syntax

> Master standard Markdown syntax for text formatting in Movk Nuxt Docs, including heading levels, bold/italic, ordered and unordered lists, inline code, hyperlinks, and images, to build clear, well-structured technical documentation.

## Headings

Use headings to organize the main sections of a document, which helps users navigate and understand the content better.

```vue
<template>
  <h2 id=heading>
  Heading</h2>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=## Heading
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ## </span>
  <span class=sBMFI>
  Heading
  </span></span></code></pre></template>
</template>
```

### Subheading

Use subheadings to further break down content, creating a clearer hierarchy and improving readability.

```vue
<template>
  <h3 id=subheading-1>
  Subheading</h3>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=### Subheading
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ### </span>
  <span class=sBMFI>
  Subheading
  </span></span></code></pre></template>
</template>
```

> [!TIP]
> 
> Every heading and subheading automatically generates an anchor and appears in the page's table of contents.

## Text formatting

Movk Nuxt Docs supports most standard Markdown text formatting options.

<table>
<thead>
  <tr>
    <th>
      Style
    </th>
    
    <th>
      Syntax
    </th>
    
    <th>
      Result
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Bold
    </td>
    
    <td>
      <code>
        **Bold**
      </code>
    </td>
    
    <td>
      <strong>
        Bold
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      Italic
    </td>
    
    <td>
      <code>
        *Italic*
      </code>
    </td>
    
    <td>
      <em>
        Italic
      </em>
    </td>
  </tr>
  
  <tr>
    <td>
      Strikethrough
    </td>
    
    <td>
      <code>
        ~~Strikethrough~~
      </code>
    </td>
    
    <td>
      <del>
        Strikethrough
      </del>
    </td>
  </tr>
</tbody>
</table>

You can combine these formats for richer text styles and visual emphasis.

<table>
<thead>
  <tr>
    <th>
      Style
    </th>
    
    <th>
      Syntax
    </th>
    
    <th>
      Result
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Bold italic
    </td>
    
    <td>
      <code>
        ***Bold italic***
      </code>
    </td>
    
    <td>
      <em>
        <strong>
          Bold italic
        </strong>
      </em>
    </td>
  </tr>
  
  <tr>
    <td>
      Bold strikethrough
    </td>
    
    <td>
      <code>
        ~~**Bold**~~
      </code>
    </td>
    
    <td>
      <del>
        <strong>
          Bold
        </strong>
      </del>
    </td>
  </tr>
  
  <tr>
    <td>
      Italic strikethrough
    </td>
    
    <td>
      <code>
        ~~*Italic*~~
      </code>
    </td>
    
    <td>
      <del>
        <em>
          Italic
        </em>
      </del>
    </td>
  </tr>
</tbody>
</table>

## Links

Links connect different parts of your documentation or point to external resources, and are essential for user navigation and for providing references. To create a link, wrap the link text in square brackets `[]`, followed by the URL in parentheses `()`.

```vue
<template>
  <a href=https://ui.nuxt.com/getting-started/installation/nuxt>
  Nuxt UI</a>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=[Nuxt UI](https://ui.nuxt.com/getting-started/installation/nuxt)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  [</span>
  <span class=sfazB>
  Nuxt UI</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  https://ui.nuxt.com/getting-started/installation/nuxt</span>
  <span class=sMK4o>
  )
  </span></span></code></pre></template>
</template>
```

### Internal links

To create a link within the documentation, use a path relative to the root, such as `/docs/getting-started/installation`.

```vue
<template>
  <a href=/en/docs/getting-started/installation>
  Installation</a>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=[Installation](/en/docs/getting-started/installation)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  [</span>
  <span class=sfazB>
  Installation</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  /en/docs/getting-started/installation</span>
  <span class=sMK4o>
  )
  </span></span></code></pre></template>
</template>
```

## Lists

Lists organize related items in a structured, easy-to-read format. Markdown supports unordered lists, ordered lists, and nested lists to meet different content needs.

### Unordered lists

For items in no particular order, use an unordered list. Each list item starts with a `-` symbol.

```vue
<template>
  <ul>
  <li>
  I am a list item.</li>
  <li>
  I am another list item.</li>
  <li>
  I am the last list item.</li></ul>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=- I am a list item.
  - I am another list item.
  - I am the last list item.
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   I am a list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   I am another list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   I am the last list item.
  </span></span></code></pre></template>
</template>
```

### Ordered lists

Use an ordered list when the order of items matters, such as steps in a process. Each item starts with a number.

```vue
<template>
  <ol>
  <li>
  I am a list item.</li>
  <li>
  I am another list item.</li>
  <li>
  I am the last list item.</li></ol>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=1. I am a list item.
  2. I am another list item.
  3. I am the last list item.
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  1.</span>
  <span class=sTEyZ>
   I am a list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  2.</span>
  <span class=sTEyZ>
   I am another list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  3.</span>
  <span class=sTEyZ>
   I am the last list item.
  </span></span></code></pre></template>
</template>
```

### Nested lists

Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces to nest them.

```vue
<template>
  <ul>
  <li>
  I am a list item.
  
  <ul>
  <li>
  I am a nested list item.</li>
  <li>
  I am another nested list item.</li></ul></li>
  <li>
  I am another list item.</li></ul>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=- I am a list item.
    - I am a nested list item.
    - I am another nested list item.
  - I am another list item.
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   I am a list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   I am a nested list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   I am another nested list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   I am another list item.
  </span></span></code></pre></template>
</template>
```

## Tables

Present structured data clearly in rows and columns. Tables are great for comparing data or listing properties.

```vue
<template>
  <table>
  <thead>
  <tr>
  <th>
  Prop</th>
  <th>
  Default</th>
  <th>
  Type</th></tr></thead>
  <tbody>
  <tr>
  <td>
  <code>
  name</code></td>
  <td />
  <td>
  <code>
  string</code></td></tr>
  <tr>
  <td>
  <code>
  size</code></td>
  <td>
  <code>
  md</code></td>
  <td>
  <code>
  string</code></td></tr>
  <tr>
  <td>
  <code>
  color</code></td>
  <td>
  <code>
  neutral</code></td>
  <td>
  <code>
  string</code></td></tr></tbody></table>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=| Prop    | Default   | Type                     |
  |---------|-----------|--------------------------|
  | `name`  |           | `string`{lang="ts-type"} |
  | `size`  | `md`      | `string`{lang="ts-type"} |
  | `color` | `neutral` | `string`{lang="ts-type"} |
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sTEyZ>
  | Prop    | Default   | Type                     |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  |---------|-----------|--------------------------|
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  name</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
    |           | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  lang</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  ts-type</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  size</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
    | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  md</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
        | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  lang</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  ts-type</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  color</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  neutral</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  lang</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  ts-type</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   |
  </span></span></code></pre></template>
</template>
```

## Blockquotes

Highlight important quotes, references, or emphasized text. Blockquotes visually distinguish quoted content.

### Single line

A single-line blockquote works best for short, punchy quotes or quotes that fit on a single line. To create a single-line blockquote, add `>` before the paragraph. Great for short, punchy quotes.

```vue
<template>
  <blockquote>
  <p>
  Nuxt UI is a collection of Vue components, composables, and utilities built on top of Reka UI, focused on structure and layout, and designed to be the building blocks of your application.</p></blockquote>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=> Nuxt UI is a collection of Vue components, composables, and utilities built on top of Reka UI, focused on structure and layout, and designed to be the building blocks of your application.
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sCNwf>
  ></span>
  <span class=s7zQu>
   Nuxt UI is a collection of Vue components, composables, and utilities built on top of Reka UI, focused on structure and layout, and designed to be the building blocks of your application.
  </span></span></code></pre></template>
</template>
```

### Multi-line

A multi-line blockquote works for longer quotes or when you need to include multiple paragraphs in a single quote.

```vue
<template>
  <blockquote>
  <p>
  Nuxt UI is a collection of Vue components, composables, and utilities built on top of Reka UI, focused on structure and layout, and designed to be the building blocks of your application.</p>
  <p>
  Use Nuxt UI to build beautiful, responsive, and accessible Vue applications.</p></blockquote>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=> Nuxt UI is a collection of Vue components, composables, and utilities built on top of Reka UI, focused on structure and layout, and designed to be the building blocks of your application.
  >
  > Use Nuxt UI to build beautiful, responsive, and accessible Vue applications.
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sCNwf>
  ></span>
  <span class=s7zQu>
   Nuxt UI is a collection of Vue components, composables, and utilities built on top of Reka UI, focused on structure and layout, and designed to be the building blocks of your application.
  </span></span>
  <span class=line>
  <span class=sCNwf>
  >
  </span></span>
  <span class=line>
  <span class=sCNwf>
  ></span>
  <span class=s7zQu>
   Use Nuxt UI to build beautiful, responsive, and accessible Vue applications.
  </span></span></code></pre></template>
</template>
```


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.
