Markdown Tips and Tricks I Used

Markdown is a lightweight markup language with plain text formatting syntax ^[1]. I prefer using Markdown to write simple blogs. In this blog, I will introduce some useful tips and tricks I learned.

 Editor

Visual Studio Code is my main editor to write Markdown. And the suggested extensions includes markdownlint, markdown+math (mdmath), and markdown preview enhanced. mdmath helps to render Latex math. Markdown preview enhanced provides one useful functionality of HTML export I appreciate most. The following images show how to export the HTML file  in visual studio code.

 

Embedding images

There are two ways to add an image^[3].
Markown
Use markdown syntax to add an image.

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

Also you can add an local image by setting the link with the image's relative path.

![Image of Github Markdown](./learn_markdown/github_markdown.jpg)

 

HTML

<p align="center">
    <img src="./learn_markdown/github_markdown.jpg" width="256" title="The First Lady of the Internet">
</p>

Math typesetting

Katex inside the mdmath allows Visual Studio Code to reanding Tex math in a markdown file.
Inline math
Einstein mass-energy equation: \(E = mc^2\)
Display math 
The Quadratic Formula: \[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]
However, the exported HTML file via Markdown Preview Enhanced extension uses the local .css file to render Tex math, as shown in the follow codes:

<link rel="stylesheet" href="file:///C:\Users\username\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.3.2\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css">

The local katex.min.css can not be found after uploaded to the web server. To solve this problem, I uploaded the katex folder along with the exported HTML file and used a relative path.

<link rel="stylesheet" href="./katex/katex.min.css">

References:

1. Wikipedia: Markdown
2.  认识与入门Markdown
3.  Tips and tricks that you probably don't know with the Github Markdown in readme.md files