Markdown HTML Generator

Authors
  • avatar
    Name
    Paul Bonnette
    Twitter

Markdown Generated PaulBonnette.app Website

The PaulBonnette.app is a React.js website featuring MDX.js, Tailwind CSS, Next.js and a few other technologies worth noting.

What is Markdown?

To understand markdown we first need to understand HTML. HTML stands for HyperText Markup Lanaguage. It requires extremely strict syntax so that browsers can draw the document correctly. Here is a "Hello World!" message and a link to Google:

<html><body><p>Hello World! Want to go to <a href="https://google.com">Google</a>?</p></body></html>

Yuck! Right?

Markdown is almost the opposite of this type of strict syntax. Markdown is a way of producing HTML with simple syntax. The same blog output can be generated with a simple:

Hello World! Want to go to [Google](https://google.com)?

So here it is:

Hello World! Want to go to Google?

Markdown MDX.js features:

  • Simple, forgiving syntax generates complex HTML automatically.
  • No special editor required.
  • Powerful! It can be extended to do more than HTML.
  • Has its limitations! It is not intended to replace HTML.

Common HTML Tags

Each of the following HTML Tags has a simplier markdown syntax.

Tag Name Syntax/Example Comments
p Paragraph Simply type text with a space above and below it
h1 Heading 1 # X Heading1 X
h2 Heading 2 ## X Heading2 X will be drawn
h3 Heading 3 ### X Heading3 X will be drawn
h4 Heading 4 #### X Heading4 X will be drawn
h5 Heading 5 ##### X Heading5 X will be drawn
h6 Heading 6 ###### X Heading6 X will be drawn
blockquote Blockquote > Display X as a quote
ul List - X Unordered list item X
ol Ordered List ol Ordered item 1. X
table Table Pipes are used for columns. Dashes for second row.
code Code code
inlineCode InlineCode inlineCode
em Emphasis _emphasis_
strong Strong **strong**
del Strikethrough ~~strkethrough~~
hr Thematic break --- or \*\*\*
a Link https://xyz.com OR [link text to show](https://xyz.com)
img Image ![alt(https://source.jpg)]

MDX.js can do more than produce HTML

MDX can also create complex HTML, styling and functionality!

How about Inline Highlighting?

Sure. Just wrap any text in the backtick character tick(`).

Highlighting looks like this when rapped in back ticks.

Block Highlighting

Block wrapping of text is done by wrapping it with three tick (```) marks before and after. It looks like this:

This is a paragraph.


This is some more stuff.

When I show the source and I don't want MDX.js to translate it I simply wrap it in code blocks so you can see the syntax.

Math Formulas

Math formulas are very difficult to draw, even in HTML. With markdown and KATEX they are an order of magnitude easier.

$$
\mathbf{Y} = \left[\begin{array}
	{c}
	p_1 \\
	. \\
	. \\
	. \\
	p_n
\end{array}\right]
$$

produces

Y=[p1...pn]\mathbf{Y} = \left[\begin{array} {c} p_1 \\ . \\ . \\ . \\ p_n \end{array}\right]
$$
c = \pm\sqrt{a^2 + b^2}
$$

produces

c=±a2+b2c = \pm\sqrt{a^2 + b^2}

Least Squares

Start:
yi=xi′β+uiy_i = \mathbf{x}'_i \beta + u_i

Assumptions:

  1. Linearity (given above)
  2. E(U∣X)=0E(\mathbf{U}|\mathbf{X}) = 0 (conditional independence)
  3. rank(X\mathbf{X}) = kk (no multi-collinearity i.e. full rank)
  4. Var(U∣X)=σ2InVar(\mathbf{U}|\mathbf{X}) = \sigma^2 I_n (Homoskedascity)

Aim:
Find β\beta that minimises sum of squared errors:

Q=∑i=1nui2=∑i=1n(yi−xi′β)2=(Y−Xβ)′(Y−Xβ)Q = \sum_{i=1}^{n}{u_i^2} = \sum_{i=1}^{n}{(y_i - \mathbf{x}'_i\beta)^2} = (Y-X\beta)'(Y-X\beta)

Solution:
Hints: QQ is a 1×11 \times 1 scalar, by symmetry ∂b′Ab∂b=2Ab\frac{\partial b'Ab}{\partial b} = 2Ab.

Take matrix derivative w.r.t β\beta:

\begin{aligned}
	\min Q           & = \min_{\beta} \mathbf{Y}'\mathbf{Y} - 2\beta'\mathbf{X}'\mathbf{Y} +
	\beta'\mathbf{X}'\mathbf{X}\beta \\
	                 & = \min_{\beta} - 2\beta'\mathbf{X}'\mathbf{Y} + \beta'\mathbf{X}'\mathbf{X}\beta \\
	\text{[FOC]}~~~0 & =  - 2\mathbf{X}'\mathbf{Y} + 2\mathbf{X}'\mathbf{X}\hat{\beta}                  \\
	\hat{\beta}      & = (\mathbf{X}'\mathbf{X})^{-1}\mathbf{X}'\mathbf{Y}                              \\
	                 & = (\sum^{n} \mathbf{x}_i \mathbf{x}'_i)^{-1} \sum^{n} \mathbf{x}_i y_i
\end{aligned}
min⁡Q=min⁡βY′Y−2β′X′Y+β′X′Xβ=min⁡β−2β′X′Y+β′X′Xβ[FOC]   0=−2X′Y+2X′Xβ^β^=(X′X)−1X′Y=(∑nxixi′)−1∑nxiyi\begin{aligned} \min Q & = \min_{\beta} \mathbf{Y}'\mathbf{Y} - 2\beta'\mathbf{X}'\mathbf{Y} + \beta'\mathbf{X}'\mathbf{X}\beta \\ & = \min_{\beta} - 2\beta'\mathbf{X}'\mathbf{Y} + \beta'\mathbf{X}'\mathbf{X}\beta \\ \text{[FOC]}~~~0 & = - 2\mathbf{X}'\mathbf{Y} + 2\mathbf{X}'\mathbf{X}\hat{\beta} \\ \hat{\beta} & = (\mathbf{X}'\mathbf{X})^{-1}\mathbf{X}'\mathbf{Y} \\ & = (\sum^{n} \mathbf{x}_i \mathbf{x}'_i)^{-1} \sum^{n} \mathbf{x}_i y_i \end{aligned}

Some other useful operators

Markup can produce Footnotes!

Generate footnote #1 by starting it with a [^1]. It will automatically appear at the foot of the page, not where you place it.

[^1]: Draw this at the bottom as footer notation 1.


[^2]: This footer will automatically be shifted to the bottom of the page.

Should my website support markdown?

Being able to add blogs and pages using a simple editor is handy. It is much faster to produce documents and generates cleaner, faster web pages as a result. This speeds up your Google Insight's rating and helps dramatically with SEO.

TLDR

MDX generates complex HTML using simply syntex and blends markdown with JSX syntax. You can import JSX components and render them in your MDX document. Markdown is created at compile time so it is super fast!

This is a MDX.js Blog

This blog uses MDX.js markdown technology to generate HTML easily. I'm not using a fancy editor to build these blogs. I'm just typing and the markdown does the hard work.