🔧 TL3 Tools

A Parser That Lives on This Page

The Markdown Editor converts plain-text Markdown into HTML and shows the result in the preview panel beside the input box. The converter is a small hand-written JavaScript parser bundled into the page itself, so there is no submit button, no page reload, and no request to a remote service between typing and seeing the rendered result. Because the parsing logic ships with the page, the editor keeps converting text even when the network is unreachable, provided you have saved the page beforehand.

Every Keystroke Re-renders the Document

The text area listens to its input event, and each change triggers a full re-parse of the document. The parser works in two passes with a fixed order. The block pass walks the text line by line, recognizing fenced code blocks, blank lines, horizontal rules, headings, blockquotes, and the two list flavors before falling back to plain paragraphs. The inline pass then formats the inside of each block, running escape-first and ending with inline code and the double-space-to-break rule. The order is deterministic, which is why the edge cases below behave the way they do.

A Release Note, Line by Line

Type the following snippet into the editor:

# Release 2.0

**Added:** dark mode toggle (`settings`).

- Faster startup
- New icon set

> Ship date: Monday

The preview receives this HTML:

<h1>Release 2.0</h1>
<p></p>
<p><strong>Added:</strong> dark mode toggle (<code class="bg-gray-100 px-1 rounded">settings</code>).</p>
<p></p>
<ul>
<li>Faster startup</li>
<li>New icon set</li>
</ul>
<p></p>
<blockquote>
<p>Ship date: Monday</p>
</blockquote>
<p></p>

Each blank line in the source becomes an empty paragraph in the output, and the final newline contributes one more, so even an empty editor previews as a single empty paragraph. That empty output is exactly what the Copy HTML button detects before showing its "Nothing to copy." message.

What This Parser Does Not Do

Nested lists are not part of the grammar. An item indented under another item does not match the list pattern, so it falls through to paragraph formatting, where its two leading spaces are themselves turned into a line break by the double-space rule. Tables, task lists, strikethrough, and reference-style links are unsupported as well, and a bare URL stays plain text unless it is wrapped in square-and-round brackets.

Raw HTML is never passed through. The escaping step runs first and rewrites angle brackets and ampersands, so typing <script> displays as visible characters instead of executing. The same step protects link destinations from breaking out of their attribute, although the parser does not screen the URL scheme itself, so treat pasted Markdown from an unknown source as untrusted input.

The inline-code rule runs last in the sequence, which means formatting inside backticks is still honored: `**bold**` renders as a bold word wrapped in a code span rather than as literal asterisks. The double-space rule also applies anywhere on a line, not only at the end, so padding a line with extra spaces can insert a break you did not intend. And a heading requires a space after the hash characters, so a line like #NoSpace renders as a paragraph that happens to start with a hash.

Questions About the Rendered HTML

What exactly does Copy HTML place on the clipboard?

It copies the rendered markup straight out of the preview panel, including the empty paragraphs. If you want the Markdown source instead, select the text inside the editor and use the operating system's copy shortcut. Copying while the preview is empty produces a "Nothing to copy." toast rather than a blank clipboard.

What happens when I press Clear?

The input box is emptied and the preview is re-rendered in the same step. There is no undo path, so move anything you still want into a file before clicking.

Why did my list split into two separate lists?

A blank line between items ends the current list group. The parser flushes the list when it reaches an empty line, so items separated by a blank line render as two <ul> blocks instead of one. Keep the items adjacent to hold a single list together.

Can I use the output in a CMS or email?

For a single post, copying the preview HTML into a CMS field works well. The grammar covers the common cases, but it omits tables, footnotes, and task lists, so check whether your publishing platform renders Markdown natively before committing a long document to this converter.

When This Editor Is the Right Size

Reach for it when you want a fast look at how a README, forum reply, or short article reads with Markdown applied, as long as the content stays inside the supported grammar. For long documents that lean on footnotes, reference links, or tables, a full-featured Markdown application is a better fit, and anything you still need should be copied out before the Clear button comes into play.