# parsing Mark Down syntax ## with the <mark-down> Web Component - [GitHub](https://github.com/mark-down/mark-down.github.io) ### Brief History of Markdown Markdown was created in 2004 by John Gruber, with significant contributions from Aaron Swartz. Its goal was to make writing for the web as easy-to-read and easy-to-write as possible, using plain text formatting syntax.- Markdown quickly gained popularity due to its simplicity and readability, and today it is widely used in documentation, blogging platforms, and collaborative tools like GitHub and Stack Overflow. --- ### Load & Use the Web Component. ``` <script src="https://mark-down.github.io/element.min.js"></script> ``` ``` <mark-down>Hello **Web Component**</mark-down> (also see this document source) ``` ### There _are_ Web Components available that parse **markdown**: * [<zero-md>](https://zerodevx.github.io/zero-md/) _'zero' config, **not** zero dependencies_ * [<wc-markdown>](https://github.com/vanillawc/wc-markdown) #### They look tiny:

### _But_ above sizes are _deceptive_, **both** load the MarkedJS library:

#### 12 KiloBytes is a bit much for parsing *basic* Markdown * So I copied a _basic_ parser from a [blog](https://betterprogramming.pub/create-your-own-markdown-parser-bffb392a06db) * cleaned its custom styling * optimized it for a balance between `file-size` and `speed` * It ain't as fancy as MarkedJS, but it does the job for me #### The result is a [½ KB minified file](https://mark-down.github.io/element.min.js): * click to open GZip analysis:

Markdown example

# Only **basic** Markdown supported # H1 ## H2 ### H3 #### H4 H5 and H6 removed for brevity # <ul> Lists * **Bold** and _Italics_ and **bold** * Hyperlinks: [<mark-down> GitHub source](https://github.com/mark-down/mark-down.github.io/blob/main/element.js) * Images must have ```alt text```**!!** title is optional) ```![alt](https://placehold.co/80 "title")``` ![alt](https://placehold.co/80 "title") escape code blocks between **triple** backticks ` * ```**bold** or _italics_``` * ```__bold__ or *italics*``` * ```_**bold and italics**_``` **create:** * **bold** or _italics_ * __bold__ or *italics* * _**bold and italics**_ # Not supported: * Tables * Blockquotes * Ordered Lists