Markdown Blogs & Documentation System

Markdown Blogs & Documentation System

Published on


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.

Markdown is almost the opposite, but not quite. Markdown is a way of producing HTML with simple syntax.

  • Simple, forgiving syntax generates the HTML for you.
  • No special editor required.
  • Easier than writing HTML.
  • Powerful! It can be extended to do more than HTML.
  • Has its limitations! It is not intended to replace HTML but rather to make it easier to generate HTML.

Common HTML Tags

We can use markup to create HTML.

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 <> OR [link text to show](<)
img Image ![alt(https://source.jpg)]

Level Up!

Now the creators of markup are fairly smart people. They realized that the idea of generating HTML with basic syntax was a good idea. So they took it a step further and allowed the syntax to create complex HTML, styling and functionality!

Inline Highlighting

Sample of inline highlighting sum = parseInt(num1) + parseInt(num2) is done by wrapping text in tick(`) marks.

Blocks Highlighting

Block wrapping of text is done by wrapping it with three tick (```) marks before and after.

This is a paragraph.
This is some more stuff.

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}
p_1 \\
. \\
. \\
. \\


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


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

Least Squares

y_i = \mathbf{x}'_i \beta + u_i


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

Find \beta that minimises sum of squared errors:

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)

Hints: Q is a 1 \times 1 scalar, by symmetry \frac{\partial b'Ab}{\partial b} = 2Ab.

Take matrix derivative w.r.t \beta:

\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
\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.


Now let's talk a little nerd. If you don't follow, that's okay. This is for us nerds.

MDX blends markdown and 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!

Markup Blogs

This blog uses 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.