Markdown To HTML Viewer

Why Add This

I'm getting tired of writing large markdown files in VS code only to not know what the resulting HTML will look like (actually, there are a couple good extensions for this - I use the Markdown Preview Enhanced extension), so I created this page with codemirror and marked js that shows what the resulting HTML will look like when markdown is transformed to HTML and put in the form of my design system.

As mentioned above, there are actually good extensions for rendering markdown to HTML, but I want to keep track of my notes on this website, and I also need to be able to translate my Lexical Implementation from and to Markdown, so I went ahead and tried to create this.

I haven't finished implementing this. I need to learn more about / get better at regular expressions before trying to add more features to the markdown parser, but I wanted to move on to different things, so this is its current state.

Things to Keep In Mind

This is a custom implementation of Markdown, and there are custom features beyond the Basic Syntax.

Katex / Equations

The marked katex extension allows you to render katex code inline and with a block element. To render elements inline, wrap the katex expression in single dollar signs ($).

$x^{2}+y^{2}=z^{2}$

Results in: x2+y2=z2x^{2}+y^{2}=z^{2}

You can render block Katex elements by wrapping the expression in double dollar signs or a fenced block with an info string of math. If you use the double dollar sign, the katex will be rendered in the primary text color and will inherit the page background, else the katex expression will be rendered with a white background, black text, and will be able to be copied.

$$x^{2}+y^{2}=z^{2}$$ x2+y2=z2x^{2}+y^{2}=z^{2} ```math
x^{2}+y^{2}=z^{2}
```
x2+y2=z2x^{2}+y^{2}=z^{2}

Extended Tables

The marked-extended-tables plugin allows for cells that span multiple columns / rows and for multi-row headers.

Column Spanning:

| H1 | H2 | H3 |
|---------|---------|---------|
| This cell spans 3 columns |||

Row Spanning:

| H1 | H2 |
|--------------|---------|
| This cell | Cell A |
| spans three ^| Cell B |
| rows ^| Cell C |

Multi-row Headers:

| This header spans two || Header A |
| columns *and* two rows ^|| Header B |
|-------------|------------|----------|
| Cell A | Cell B | Cell C |

Footnotes

The marked-footnote extension allows you to use markdown footnotes. See an example of markdown footnotes in the default text in the editor below.

To Do

I haven't decided yet whether or not I want to try to implement markdown so lexical state could be translated from markdown / to markdown correctly. If I did that, I would have to add a lot of code to the current marked implementation (if I wanted to do it properly and not just render most of the lexical state as HTML).
At the very least, I should try to implement the rest of what is included in the extended markdown syntax.
Also, for the code editor below, and for the website in general, I should probably implement better CTRL+F search functionality. (Regex Search and styling).
Also, the parsing is pretty slow right now, which needs to be improved.

Markdown Editor

more characters required

Design System
Options