--- 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://comark.dev/syntax/markdown" --- # Markdown > Comark supports all standard CommonMark and GitHub Flavored Markdown (GFM) features including headings, formatting, lists, tables, code blocks, and more. Comark supports all standard CommonMark and GitHub Flavored Markdown (GFM) features. ## 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 plain 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, so you can 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 and images ```mdc [Link text](https://example.com) [Link with title](https://example.com "Link title") ![Image alt text](https://example.com/image.png) ![Image with title](https://example.com/image.png "Image title") ``` Add custom attributes to links and images 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 }`). ## 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~~ | ![Image](https://picsum.photos/120/30) | #code ```mdc | Feature | Status | Link | | ------------ | --------------- | ----------------------- | | **Bold** | *Italic* | [Link](https://example) | | `Code` | ~~Strike~~ | ![Image](https://picsum.photos/120/30) | ``` ## 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 Emoji shortcodes use the `:emoji_name:` syntax and require the [emoji plugin](https://comark.dev/plugins/built-in/emoji): 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: ``` --- - [Frontmatter](https://comark.dev/syntax/frontmatter) - [Components](https://comark.dev/syntax/components) ## Sitemap See the full [sitemap](https://comark.dev/sitemap.md) for all pages.