Proper use of input, preview, and split screen
Markdown Editor & Live Preview is a tool that converts your left-side input into HTML using a custom lightweight conversion to check editing results.
You can choose from "Edit", "Preview", and "Split" views. Edit shows only the input field, Preview widely displays only the conversion result, and Split arranges both side-by-side on wide screens.
On narrow screens under 1024px, selecting Split will return to the edit view rather than arranging them top and bottom, so use them according to your device width.
From the toolbar above the input, you can insert symbols for bold, italics, headings, links, inline code, code blocks, blockquotes, and bullet points.
If text is selected, symbols are placed around the selection; if unselected, a template is inserted at the cursor position. This is a function to assist with formatting input, not WYSIWYG editing that directly decorates text on the screen.
Check the Markdown itself after insertion and adjust necessary closing symbols and link destinations.
Loading a sample or clearing the input replaces or empties the content. There is no undo or auto-save history to revert these actions.
If you want to try features while working, please save your Markdown first.
Basic syntax handled by this custom parser
For blocks, it handles headings using one to six # at the start of a line, paragraphs separated by empty lines, horizontal rules with three or more hyphens, asterisks, or underscores, bulleted lists using hyphens or asterisks at the start of a line, numbered lists using numbers and periods, and blockquotes using a greater-than sign at the start of a line.
Bulleted lists do not support the plus sign. Every non-empty line becomes an independent paragraph, and it does not support nested lists that create hierarchies from indentation.
Fenced code starting with three backticks turns the text into a code block up to the next fence. The language name written after the start line is added as a display class name, restricted strictly to 1 to 40 ASCII letters, digits, underscores, or hyphens to avoid invalid or malicious attribute values.
Angle brackets and ampersands in the code are displayed as plain characters rather than executed as HTML. Inline code is sheltered before emphasis processing occurs, ensuring that asterisks and underscores inside code snippets remain intact.
Furthermore, if you do not close a fenced code block, the unclosed block is automatically flushed at the end of the text rather than discarded, while other lightweight syntax limitations continue to apply.
For inline elements, it handles short code enclosed in backticks, links written with square and round brackets, bold text with double asterisks or double underscores, and italic text with single asterisks or single underscores.
Link href values are not validated. The replacement order and boundary detection do not cover all CommonMark rules, and text with consecutive symbols may produce different results compared to other processors.
Unsupported syntax and differences from CommonMark/GFM
This tool is not a parser intended to pass CommonMark or GitHub Flavored Markdown compliance tests. Tables using pipe symbols, image syntax, task lists, footnotes, strikethrough, autolinks, heading IDs, definition lists, math formulas, Mermaid, and HTML extensions are outside the supported scope.
Even if entered, they will not be converted to the intended HTML elements and may be displayed as normal strings or paragraphs.
Bulleted and numbered lists are single-level. It does not strictly interpret indentation, starting number preservation, multiple paragraphs within items, or code blocks within lists.
Blockquotes also use a simple process that combines consecutive quote lines into a single block, and it does not construct multi-level quote hierarchies.
If you are moving the same manuscript to GitHub, a CMS, or a static site generator, check the differences in the preview of each destination.
Markdown has different extension scopes depending on the implementation. If you need to reproduce the results seen on this screen at the publication destination, an effective method is to first compare headings, line breaks, lists, links, and code with a short manuscript, and adjust only the notations that differ to match the destination's rules.
Boundaries between links and HTML preview
Markdown links convert the display string and URL into an HTML anchor element. The parser checks link targets and rejects explicit schemes other than http, https, and mailto, filtering out dangerous protocols such as javascript or vbscript.
It also rejects protocol-relative URLs starting with double slashes (//) and values containing control characters, while escaping quotation marks in link attributes.
Relative URLs remain supported, but this validation does not perform destination-trust verification or serve as a universal sanitizer, and other lightweight syntax limits remain in effect.
The preview is displayed in a restricted area through SafeHtmlPreview, which restricts scripts and external resources, treating HTML-like strings in the input as normal text.
This restriction is only to narrow the execution scope when checking the conversion result on the editor screen. This protection does not carry over to the text extracted via "Save HTML" or HTML copy; it does not control the output after pasting it into another site or app.
Therefore, if you are publishing Markdown entered by a third party or registering output HTML to a CMS, you must validate and sanitize allowed tags, attributes, and URLs using another reliable process before publication.
The fact that it could be displayed within this tool is not proof that the output is safe for arbitrary destinations or that the links are reliable.
It is not recommended as a safe HTML converter.
Text limits and file input/output
There is no strict character limit for the text body, meaning no error will be displayed if you input large amounts of text. However, since it converts to HTML with every input, the operation feel may change depending on the document structure, device performance, and browser memory status.
When handling massive logs or long-form manuscripts, it is easier to check if you divide them by chapters.
File loading reads Markdown or text files as strings and reflects them in the editor without a 1MB file size limit or error display for large files.
There is no function to convert character encodings based solely on the file name extension, and unreadable character encodings may result in garbled text.
It simply attempts to load the file, so be cautious not to inadvertently overwrite your existing manuscript with extremely large files.
Markdown saving downloads the current input as document.md, and HTML saving wraps the conversion result in a basic HTML document and downloads it as document.html.
The saved HTML keeps lang="ja". The HTML includes basic display CSS but does not reproduce the theme or responsive design of a public site.
The editor awaits clipboard write completion before reporting success, presents a dedicated manual selection field if automatic copying fails, and immediately clears copy feedback whenever document content changes.
Steps to protect manuscripts in edits without autosave
The Markdown being entered is held in memory as React state while the page is open. There is no auto-save to localStorage or IndexedDB, no past version history, no dedicated Undo function, no cross-account synchronization, and no collaborative editing.
Editing states cannot be restored upon reloading, closing tabs, or quitting the browser, so please save as MD at each break during long tasks.
In practice, it is best to first check the display differences with the destination using a short sample, keep MD as the primary save format while drafting, and verify the HTML as an auxiliary output upon completion.
If you only save the HTML, spaces and structures may change when you later try to revert to Markdown syntax. If there is a possibility of resuming editing, prioritize keeping the original MD file.
This editor assists with drafting basic syntax and checking displays; it does not automatically determine the Markdown specifications of the publication destination, HTML safety, accessibility, or link validity.
After saving, actually open the file and check for garbled characters, code ranges, link destinations, and heading hierarchies before using it.