Markdown example file, filled with all GFM plus github.com extensions

markdown-kitchen-sink.md

GitHub Flavored Markdown Bench

Use this document to probe how the Tiptap schema parses and serializes common markdown.

Inline marks

Plain text can include bold, italic, strikethrough, inline code, links, and raw autolinks like https://example.com.

diff --git a/example.md b/example.md
@@ -1,3 +1,4 @@
 Existing line
-Removed line
+Added line
+Another added line

Lists

• Unordered item
• Another item with code
  • Nested item

1. Ordered item
2. Another ordered item

• Completed task
• Open task
  • Nested task

Table

Feature	Status	Notes
Tables	Supported	Alignment test
Task lists	Supported	Toggleable checkboxes
Markdown output	Supported	Serialized live

Image

Code fence

js

const languages = ['javascript', 'typescript', 'python', 'html', 'css']

console.log(languages.map((language) => language.toUpperCase()))

ts

type MarkdownShape = {
  editor: 'tiptap'
  supportsGfm: boolean
}

export function supports(language: string): boolean {
  return ['ts', 'tsx', 'markdown'].includes(language)
}

python

def markdown_score(features: list[str]) -> int:
    return sum(1 for feature in features if feature)

html

<details>
  <summary>HTML details support</summary>
  <p>GitHub allows a safe subset of raw HTML.</p>
</details>

css

.markdown-alert {
  border-left: 0.25rem solid #0969da;
  padding: 0.75rem 1rem;
}

Diff

diff --git a/src/editor.ts b/src/editor.ts
index 2c4f9a1..a1d8f39 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -1,6 +1,7 @@
 export const markdownFeatures = [
   'tables',
+  'diff fences',
   'task lists',
-  'plain code blocks',
+  'syntax-highlighted code blocks',
 ]

Math

Inline math uses dollar delimiters: $E = mc^2$.

$$ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) $$

GitHub also supports math code fences:

$$\sqrt{3x-1}+(1+x)^2$$

Mermaid

flowchart TD
    A[Markdown source] --> B[Tiptap document]
    B --> C[Inline Mermaid block]
    C --> D{Edit raw src?}
    D -->|Yes| E[Update diagram]
    D -->|No| F[Keep reading]

Loading

Alerts

Note

GitHub alerts are blockquotes with a marker line.

Tip

Use the source drawer to test markdown that Tiptap cannot fully model yet.

Important

Mermaid is now represented by an inline editable node in the document.

Warning

Tiptap can preserve this as a blockquote, while the preview can render it as a callout.

Caution

Renderer support does not guarantee perfect markdown round-tripping.

Footnotes

Here is a footnote reference. ¹

Autolinks, emoji, and references

Raw URL autolink: https://github.com/decodetool/markdown

Emoji shortcode: ✨

Mentions and team references to test later: @octocat and @github/docs.

Issue-style references to test later: #123, GH-456, decodetool/markdown#1, and a5c3785ed8d6a35868bc169f07e40e889087fd2e.

Raw HTML

Collapsible details

Tips for collapsed sections

You can add a header

You can add text within a collapsed section.

You can add an image or a code block, too.

   puts "Hello World"

GitHub allows a safe subset of raw HTML in markdown.

Subscript and superscript use HTML on GitHub: H2O and x2.

---

Keep editing here, then inspect the serialized markdown in the source drawer.

Footnotes

1. Footnotes are useful for README-style documents and long issue writeups. ↩