---
title: "Markdown"
description: "Comark supports all standard CommonMark and GitHub Flavored Markdown (GFM) features including headings, formatting, lists, tables, code blocks, and more."
canonical_url: "https://docs-template.comark.dev/writing/markdown"
---
# Markdown
> Comark supports all standard CommonMark and GitHub Flavored Markdown (GFM) features including headings, formatting, lists, tables, code blocks, and more.
Pages are parsed with [Comark](https://comark.dev), which supports all standard CommonMark and GitHub Flavored Markdown (GFM) features. This page covers the plain Markdown syntax; see [Components](https://docs-template.comark.dev/writing/components) for callouts, tabs, and other block components.
## Headings
```md
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
```
All headings automatically get ID attributes generated from their content for linking:
```mdc
# Hello World
```
## Text Formatting
**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
`Inline code`
#code
```mdc
**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
`Inline code`
```
Text nodes in Comark are simple strings, similar to HTML text nodes. To add custom styles, attributes, or metadata to specific parts of text, use the [Span Attributes](https://comark.dev/syntax/attributes#span-attributes) syntax: `Hello [world]{data-world="earth" style="color: blue"}`.
This creates a `` element with custom attributes, allowing you to style or add metadata to inline text.
## Lists
### Unordered
```mdc
- Item 1
- Item 2
- Nested item
- Another nested item
- Item 3
```
### Ordered
```mdc
1. First item
2. Second item
1. Nested item
2. Another nested item
3. Third item
```
## Links
[Link text](https://example.com)
[Link with title](https://example.com){title="Link title"}
#code
```mdc
[Link text](https://example.com)
[Link with title](https://example.com "Link title")
```
Add custom attributes to links with the [Attributes](https://comark.dev/syntax/attributes) syntax: `[Link](url){target="_blank"}`.
Bare URLs like `https://example.com` are automatically converted into clickable links. Disable this with the [`linkify`](https://comark.dev/reference/parse#options) option (`{ linkify: false }`).
## Images
{:zoom="false"}
#code
```mdc
{:zoom="false"}
```
By default, images support interactive zoom: clicking an image opens it in a modal overlay with smooth transitions, allowing users to examine details more closely.
To prevent zoom on a specific image, add the `:zoom="false"` attribute.
Learn more about images and embeds in the Nuxt UI docs.
## Blockquotes
> This is a blockquote
>
> And contain other markdown elements like **bold** and *italic*
#code
```mdc
> This is a blockquote
>
> And contain other markdown elements like **bold** and *italic*
```
### Alerts
The [alerts plugin](https://comark.dev/plugins/defaults/alert) is built-in and transforms special blockquotes into styled callout blocks. Place an alert marker on the first line of a blockquote:
```mdc
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
```
Supported markers: `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, `[!CAUTION]`.
### Horizontal Rules
Any of these create a horizontal rule:
```mdc
---
***
___
```
---
## Code Blocks
Comark provides advanced code block features with metadata support.
### Basic Code Block
```javascript
function hello() {
console.log("Hello, World!")
}
```
#code
~~~mdc
```javascript
function hello() {
console.log("Hello, World!")
}
```
~~~
### Filename Metadata
Add a filename using `[...]` brackets:
```javascript [server.js]
const express = require('express')
const app = express()
```
#code
~~~mdc
```javascript [server.js]
const express = require('express')
const app = express()
```
~~~
### Line Highlighting
Highlight specific lines using `{...}` syntax:
```javascript {1-3,5}
function example() {
const a = 1
const b = 2
const c = 3
return a + b + c
}
```
#code
~~~mdc
```javascript {1-3,5}
function example() {
const a = 1
const b = 2
const c = 3
return a + b + c
}
```
~~~
| Syntax | Description |
| --------------- | ------------------------- |
| `{3}` | Single line |
| `{1-5}` | Range of lines |
| `{1,3,5}` | Multiple specific lines |
| `{1-3,7,10-12}` | Combined ranges and lines |
### Combined Metadata
All metadata can be combined in any order:
```javascript [utils.ts] {1-3}
function hello() {
console.log("Hello")
}
```
#code
~~~mdc
```javascript {1-3} [utils.ts] meta=value
function hello() {
console.log("Hello")
}
```
~~~
### Special Characters in Filename
Use backslash to escape special characters:
```typescript [@[...slug\\\].ts]
// Brackets and special chars are supported
```
#code
~~~mdc
```typescript [@[...slug\].ts]
// Brackets and special chars are supported
```
~~~
### AST Structure
Code blocks produce this AST structure:
```json
[
"pre",
{
"language": "javascript",
"filename": "server.js",
"highlights": [1, 2, 3],
"meta": "meta=value"
},
["code", { "class": "language-javascript" }, "code content here"]
]
```
---
## Task Lists
Comark supports GitHub Flavored Markdown task lists:
- [x] Completed task
- [ ] Pending task
- [ ] - [ ] Nested pending task
- [x] Nested completed task
#code
```mdc
- [x] Completed task
- [ ] Pending task
- [x] Another completed task
- [ ] Nested pending task
- [x] Nested completed task
```
- `[x]` or `[X]` for completed tasks
- `[ ]` for pending tasks
- Works in both ordered and unordered lists
- Supports nesting
---
## Tables
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
#code
```mdc
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
```
### Aligned Tables
| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Left | Center | Right |
| Text | Text | Text |
#code
```mdc
| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Left | Center | Right |
| Text | Text | Text |
```
| Syntax | Alignment |
| ------- | --------- |
| `:---` | Left |
| `:---:` | Center |
| `---:` | Right |
### Inline Markdown in Tables
| Feature | Status | Link |
| -------- | ---------- | -------------------------------------- |
| **Bold** | *Italic* | [Link](https://example) |
| `Code` | ~~Strike~~ |  |
#code
```mdc
| Feature | Status | Link |
| ------------ | --------------- | ----------------------- |
| **Bold** | *Italic* | [Link](https://example) |
| `Code` | ~~Strike~~ |  |
```
## Comments
HTML-style comments are supported and preserved in the AST but not rendered in output:
```mdc
```
Comments can span multiple lines:
```mdc
```
Comments are represented in the [document model](https://comark.dev/getting-started/document-model#comment-nodes) as a tuple with `null` as the tag:
```json
[null, {}, " comment text "]
```
## Emojis
Comark includes built-in emoji support using the `:emoji_name:` syntax:
Hello 👋 Welcome to our docs! 🚀
#code
```mdc
Hello :wave: Welcome to our docs! :rocket:
```
### Popular Emojis
😄 ❤️ 🔥 🚀 ✨ 🎉 🤔 👀 💯 ⭐ ⚡ 💡 ⚠️
#code
```mdc
:smile: :heart: :fire: :rocket: :sparkles: :tada:
:thinking: :eyes: :100: :star: :zap: :bulb: :warning:
```
## Sitemap
See the full [sitemap](https://docs-template.comark.dev/sitemap.md) for all pages.