Markdown Kitchen Sink

Updated March 7, 20263 min read

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline Formatting

This paragraph has bold text, italic text, and bold italic together. You can also use ~~strikethrough~~ for deleted content and inline code for technical terms like useState or next.config.ts.

Here's a link to OpenCX and a relative link to Mermaid Diagrams.

Images

Unordered Lists

First item
Second item with bold
- Nested item
- Another nested item
  - Deeply nested
Third item

Ordered Lists

First step
Second step
1. Sub-step A
2. Sub-step B
Third step
Fourth step

Task Lists

Blockquotes

This is a simple blockquote. It can span multiple lines and contain formatted text.

Nested blockquotes work too:

This is a nested quote inside a quote.

It can have multiple paragraphs.

GFM Alerts

NOTE

Notes are used to highlight information that users should take into account, even when skimming.

TIP

Tips provide optional information to help a user be more successful.

IMPORTANT

Important information that users need to know to avoid problems.

WARNING

Warnings indicate potential issues that could cause problems if not addressed.

CAUTION

Cautions advise about risks or negative outcomes of certain actions.

Code Blocks

Bash

bash

#!/bin/bash
echo "Pushing docs to help center..."
opencx push --dir ./docs --verbose
echo "Done!"

TypeScript

typescript

interface Article {
  title: string;
  slug: string;
  content: string;
  category: string;
  published: boolean;
}

async function fetchArticles(baseUrl: string): Promise<Article[]> {
  const response = await fetch(`${baseUrl}/api/articles`);
  if (!response.ok) {
    throw new Error(`Failed to fetch: ${response.status}`);
  }
  return response.json();
}

JSON

json

{
  "helpCenter": {
    "name": "Acme Support",
    "theme": "light",
    "languages": ["en", "es", "fr"],
    "features": {
      "search": true,
      "analytics": true
    }
  }
}

YAML

yaml

name: Deploy Help Center
on:
  push:
    branches: [main]
    paths:
      - "docs/**"

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx opencx push

Python

python

def parse_frontmatter(content: str) -> tuple[dict, str]:
    """Extract YAML frontmatter from markdown content."""
    if not content.startswith("---"):
        return {}, content

    end = content.index("---", 3)
    frontmatter = yaml.safe_load(content[3:end])
    body = content[end + 3:].strip()
    return frontmatter, body

Plain (no language)

This is a plain code block with no language specified.
It should render without syntax highlighting.
Line 3 of the block.

Tables

Simple Table

Feature	Status
Markdown rendering	Supported
Mermaid diagrams	Supported
Search	Supported
Multi-language	In progress

Aligned Table

Left-aligned	Center-aligned	Right-aligned
Content	Content	Content
Left	Center	Right
More text	More text	42
`code`	bold	italic

Horizontal Rules

Three different syntaxes produce the same result:

HTML Entities & Special Characters

Copyright: © 2025
Em dash: —
Arrows: ← → ↑ ↓
Ampersand: &
Less than / greater than: < >
Non-breaking space: between these words
Curly quotes: “Hello”

Footnotes

Here's a sentence with a footnote¹, and another one².

Definition Lists

Term 1

Definition for term 1.

Term 2

Definition for term 2, which is a bit longer and explains the concept in more detail.

Markdown

A lightweight markup language for creating formatted text using a plain-text editor.

This is the first footnote with additional context. ↩
This is the second footnote. It can contain formatting and code. ↩

Markdown Kitchen Sink

Updated March 7, 20263 min read

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline Formatting

Here's a link to OpenCX and a relative link to Mermaid Diagrams.

Images

Unordered Lists

First item
Second item with bold
- Nested item
- Another nested item
  - Deeply nested
Third item

Ordered Lists

First step
Second step
1. Sub-step A
2. Sub-step B
Third step
Fourth step

Task Lists

Blockquotes

This is a simple blockquote. It can span multiple lines and contain formatted text.

Nested blockquotes work too:

This is a nested quote inside a quote.

It can have multiple paragraphs.

GFM Alerts

NOTE

Notes are used to highlight information that users should take into account, even when skimming.

TIP

Tips provide optional information to help a user be more successful.

IMPORTANT

Important information that users need to know to avoid problems.

WARNING

Warnings indicate potential issues that could cause problems if not addressed.

CAUTION

Cautions advise about risks or negative outcomes of certain actions.

Code Blocks

Bash

bash

#!/bin/bash
echo "Pushing docs to help center..."
opencx push --dir ./docs --verbose
echo "Done!"

TypeScript

typescript

interface Article {
  title: string;
  slug: string;
  content: string;
  category: string;
  published: boolean;
}

async function fetchArticles(baseUrl: string): Promise<Article[]> {
  const response = await fetch(`${baseUrl}/api/articles`);
  if (!response.ok) {
    throw new Error(`Failed to fetch: ${response.status}`);
  }
  return response.json();
}

JSON

json

{
  "helpCenter": {
    "name": "Acme Support",
    "theme": "light",
    "languages": ["en", "es", "fr"],
    "features": {
      "search": true,
      "analytics": true
    }
  }
}

YAML

yaml

name: Deploy Help Center
on:
  push:
    branches: [main]
    paths:
      - "docs/**"

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx opencx push

Python

python

def parse_frontmatter(content: str) -> tuple[dict, str]:
    """Extract YAML frontmatter from markdown content."""
    if not content.startswith("---"):
        return {}, content

    end = content.index("---", 3)
    frontmatter = yaml.safe_load(content[3:end])
    body = content[end + 3:].strip()
    return frontmatter, body

Plain (no language)

This is a plain code block with no language specified.
It should render without syntax highlighting.
Line 3 of the block.

Tables

Simple Table

Feature	Status
Markdown rendering	Supported
Mermaid diagrams	Supported
Search	Supported
Multi-language	In progress

Aligned Table

Left-aligned	Center-aligned	Right-aligned
Content	Content	Content
Left	Center	Right
More text	More text	42
`code`	bold	italic

Horizontal Rules

Three different syntaxes produce the same result:

HTML Entities & Special Characters

Em dash: —
Arrows: ← → ↑ ↓
Ampersand: &
Less than / greater than: < >
Non-breaking space: between these words
Curly quotes: “Hello”

Footnotes

Here's a sentence with a footnote¹, and another one².

Definition Lists

Term 1

Definition for term 1.

Term 2

Definition for term 2, which is a bit longer and explains the concept in more detail.

Markdown

A lightweight markup language for creating formatted text using a plain-text editor.

This is the first footnote with additional context. ↩
This is the second footnote. It can contain formatting and code. ↩

#Heading 1

#Heading 2

#Heading 3

#Heading 4

#Heading 5

#Heading 6

#Inline Formatting

#Images

#Unordered Lists

#Ordered Lists

#Task Lists

#Blockquotes

#GFM Alerts

#Code Blocks

#Bash

#TypeScript

#JSON

#YAML

#Python

#Plain (no language)

#Tables

#Simple Table

#Aligned Table

#Horizontal Rules

#HTML Entities & Special Characters

#Footnotes

#Definition Lists

#Footnotes

Search...

#Heading 1

#Heading 2

#Heading 3

#Heading 4

#Heading 5

#Heading 6

#Inline Formatting

#Images

#Unordered Lists

#Ordered Lists

#Task Lists

#Blockquotes

#GFM Alerts

#Code Blocks

#Bash

#TypeScript

#JSON

#YAML

#Python

#Plain (no language)

#Tables

#Simple Table

#Aligned Table

#Horizontal Rules

#HTML Entities & Special Characters

#Footnotes

#Definition Lists

#Footnotes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline Formatting

Images

Unordered Lists

Ordered Lists

Task Lists

Blockquotes

GFM Alerts

Code Blocks

Bash

TypeScript

JSON

YAML

Python

Plain (no language)

Tables

Simple Table

Aligned Table

Horizontal Rules

HTML Entities & Special Characters

Footnotes

Definition Lists

Footnotes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline Formatting

Images

Unordered Lists

Ordered Lists

Task Lists

Blockquotes

GFM Alerts

Code Blocks

Bash

TypeScript

JSON

YAML

Python

Plain (no language)

Tables

Simple Table

Aligned Table

Horizontal Rules

HTML Entities & Special Characters

Footnotes

Definition Lists

Footnotes