Clean Cupertino Design System

When John Gruber created the original Markdown in 2004, the syntax was defined through a simple Perl script (Markdown.pl) accompanied by a loose informal prose description. Over the subsequent decade, as different developers ported Markdown to C, Python, JavaScript, and Ruby, hundreds of subtle syntactic ambiguities emerged.

For example, what happens when an ordered list item is indented three spaces instead of four? How should nested emphasis (*foo **bar* baz**) be parsed? Different implementations produced radically conflicting HTML output.

In 2014, a group of engineers led by John MacFarlane (creator of Pandoc) and Jeff Atwood (co-founder of Stack Overflow) created CommonMark: an exhaustive, unambiguous formal specification with over 600 rigorous compliance tests. CommonMark defines an explicit parsing algorithm that builds a deterministic Abstract Syntax Tree (mdast). GitHub Flavored Markdown (GFM) builds directly upon CommonMark, adding tables, task lists, and strikethrough. TiBox adheres to GFM and CommonMark parsing standards.

Converting Markdown to HTML is fundamentally an untrusted code execution risk when input is provided by external users. A robust sanitization pipeline must evaluate every AST node before rendering:

1. Tag Filtering: Hazardous tags (<script>, <style>, <link>, <iframe>, <object>, <embed>, <applet>) must be removed from the DOM tree. 2. Attribute Stripping: Event handlers starting with "on" (onload, onerror, onclick, onmouseover) must be stripped. 3. Safe URI Whitelisting: Hyperlink href attributes and image src attributes must only permit safe protocols: http:, https:, mailto:, and relative internal anchors (#). Dangerous schemes like javascript:alert(1) or data:text/html;base64,... must be aggressively neutralized.

TiBox implements safe protocol checking and sanitization to ensure that viewing rendered Markdown never exposes your browser to malicious code execution.

A notoriously frustrating bug in split-screen Markdown editors is "scroll desynchronization." In a dual-pane setup, raw Markdown source code and rendered HTML have fundamentally different heights: a single Markdown table line | Name | Role | Email | might render as a rich 60px table row, while a multi-line fenced code block might take more vertical space in source than in rendered output.

Naive linear scroll syncing (binding editor.scrollTop directly to preview.scrollTop) causes the two viewports to drift apart rapidly, forcing the writer to constantly realign their view.

To achieve flawless Apple Cupertino fluid alignment, modern editors map scroll positions using AST line-to-DOM element mapping. Each rendered HTML block node receives a data-source-line attribute linking it to its corresponding line number in the raw editor. When a scroll event fires, the engine uses linear interpolation (lerp) between neighboring anchor elements, keeping headings, tables, and paragraphs precisely aligned in real time.