liminfoMarkdown Reference
Free web tool: Markdown Reference
Heading 1
Heading 2
Heading 3
This is a normal text paragraph. You can use bold, italic, strikethrough, and inline code.
Links and Images
Lists
Blockquote
This is a blockquote.
It can span multiple lines.
Code Block
function hello() {
console.log("Hello, World!");
}Table
| Header 1 | Header 2 | Header 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Checklist
Footnotes
Add footnotes to text[1].
[1]: This is a footnote.
About Markdown Reference
The Markdown Reference tool combines a live split-pane editor with a comprehensive syntax reference guide, giving you two modes in one tool. In Editor + Preview mode, you type Markdown on the left side and see a rendered HTML preview update in real time on the right side — no need to switch tabs or run a build step. The tool ships with a full sample document in both Korean and English that demonstrates all major syntax features, so you can see how each element renders immediately when the page loads.
Writers, developers, technical documentation authors, and README maintainers all use this tool as a daily companion. Markdown has become the universal lightweight markup language for GitHub READMEs, documentation platforms like Confluence and Notion, static site generators like Jekyll and Hugo, and comment systems on platforms like Stack Overflow and Reddit. Having a cheat sheet with live rendering removes the guesswork about how a specific syntax will appear in the final output. The syntax reference tab presents 15 syntax items in a two-column card layout: the raw Markdown syntax on one side and the equivalent HTML output on the other.
The rendering engine is a custom pure-JavaScript Markdown parser built into the component, not a third-party library. It processes the input text with a series of regular expression replacements in a specific order: code blocks first (to prevent inner content from being modified), then inline code, headings (H1–H6), horizontal rules, bold, italic, strikethrough, images, links, blockquotes, checklists, unordered and ordered lists, tables, and footnotes. Paragraphs are formed by blank lines. The rendered HTML is injected via dangerouslySetInnerHTML into a scrollable preview pane, and the entire parse runs inside useMemo so it only recomputes when the markdown text changes.
Key Features
- Split-pane live editor: write Markdown on the left, see rendered HTML preview on the right simultaneously
- Syntax reference tab with 15 items showing raw Markdown alongside equivalent HTML output
- Supports H1–H6 headings, bold, italic, strikethrough, inline code, and code blocks with language tags
- Renders tables with pipe syntax, unordered lists, ordered lists, and nested list indentation
- Checklist support with checked and unchecked checkbox rendering (- [x] and - [ ])
- Blockquote rendering with left-border styling, image embedding with title attributes, and clickable links
- Footnote syntax ([^1]) rendered as superscript references in the preview
- Pre-loaded sample document in Korean or English based on your locale, demonstrating all syntax at once
Frequently Asked Questions
What is Markdown and why is it used?
Markdown is a lightweight markup language created by John Gruber in 2004 that uses plain text formatting syntax to produce HTML. It is widely used for GitHub READMEs, documentation sites, blog posts, and note-taking apps because it is readable as plain text but can be rendered as formatted HTML. The syntax is intentional and easy to remember: # for headings, **text** for bold, *text* for italic.
How does the live preview work?
As you type in the left editor pane, the tool parses the Markdown text using a custom JavaScript parser and renders the result as HTML in the right preview pane. The rendering uses React's useMemo hook so it only runs when the text changes. The output is displayed using dangerouslySetInnerHTML, which means the rendered HTML is injected directly into the DOM.
What Markdown syntax elements are supported?
The editor supports H1–H6 headings (using # symbols), bold (**text**), italic (*text*), strikethrough (~~text~~), inline code (`code`), fenced code blocks (```lang), horizontal rules (---), unordered lists (- item), ordered lists (1. item), blockquotes (> text), links ([text](url)), images (), tables (pipe syntax), checklists (- [x] and - [ ]), and footnotes ([^1]).
How do I create a table in Markdown?
Use pipe characters to separate columns and a row of hyphens to separate the header from the body. For example: | Column A | Column B | on the first line, | --- | --- | on the second line, and | Value 1 | Value 2 | on the third line. The table must have at least one separator row. Column alignment is not supported in this editor but is supported in the GitHub Flavored Markdown specification.
What is the difference between inline code and a code block?
Inline code is for short snippets embedded within a sentence — wrap text with single backticks: `console.log()`. A code block is for multi-line code samples — wrap with triple backticks on separate lines: ```javascript at the start and ``` at the end. Code blocks preserve whitespace and line breaks, and the language name (like javascript, python, bash) can be specified for syntax highlighting in some renderers.
How do checklists work in Markdown?
Checklists use the list syntax with bracket notation: - [x] for a checked item and - [ ] for an unchecked item. In this editor, they are rendered as disabled HTML checkboxes next to the item text. This syntax originated in GitHub Flavored Markdown (GFM) and is supported by most modern Markdown renderers including GitHub, GitLab, and Notion.
What are footnotes and how do I add them?
Footnotes let you add reference notes to your text without cluttering the main content. Use [^1] in your text where you want the footnote marker, and then define the footnote content with [^1]: Your footnote text on a separate line at the bottom of the document. In this editor, footnote markers are rendered as superscript numbers in the preview.
Can I use this editor to write GitHub README files?
Yes. The Markdown syntax supported by this editor closely follows GitHub Flavored Markdown (GFM), which is the standard used for GitHub READMEs, issues, and pull requests. You can write and preview your README content here, then copy it directly into your repository's README.md file. Note that some GFM-specific extensions like alerts (@note, @warning) and mermaid diagrams are not supported in this editor.