A Quick Start for Blog Writing-Markdown

Posted on In Views:
Basic Markdown and Hexo Usage

This post introduces some basic writing grammar of Markdown language. For easy reading, the code scripts are shown on the left and the results are presented on the right.

BTW, some basic operation of hexo is also introduced in this post. Hexo is a useful tool for blog writing. I will write another post about how to deploy a github blog with hexo.

Title Format

There are six levels of titles in total.

Fig.0 Title Format

Add a Code Block

Here some basic bash commands of hexo tool are introduced as well.

Fig.1 Code Block: Bash of Hexo Commands

Text Highlight

Underline “__“ and “_“ are used for text highlight.

Fig.2 Text Highlight: Bold and Italic

Split Line&Quote

Fig.3 Split Line and Quote

Add a Hyperlink

Use “[]()“ for hyperlink.

Fig.4 Hyperlink

Add a Image

Use “![]()“ for image. “()“ includes the image path.

Fig.5 Image

The image path has three types: Absolute path, Relative path, and Network path. At first I created a “my images”(see my directory structure below, with green underlined) folder in the root directory of my blog. And I set the relative path but the images did not show well. It is because the image path has some constraints.

Fig.6 Directory Structure

I don’t know if it works only for hexo blog. But you can try the following method if you meet the same problem:

Absolute Path

You can also see from my directory structure above, there is a folder “images” (with red underlined) in the folder “YUZehuiIC.github.io/source/“. If only a few images are used in hexo program, these images can be stored in this folder. And you can use the following markdown code to add the image:

1
![The image name presented when the image cannot show well](/images/xxx.jpg)

Relative Path

Still from my directory structure above, there is another folder “A-Quick-Start-for-Blog-Writing-Markdown” (with blue underlined) in the folder “source/_posts”. The folder’s name is the same as this post. Images used in this post are stored in this folder and I use relative path to add images. For example, to add the first image “0-Title-Format.jpg”:

1
![Fig.1 Title Format](0-Title-Format.jpg)

This folder is generated automatically by setting “_config.yml” in the root directory:

1
post_asset_folder = true	# _config.yml

Then when you create a new post by bash command “hexo new post “post_title””, both “post_title.md” file and “post_title” folder will be generated.

You can also create the folder manually (must be exactly the same as the post name). But the _config.yml file should also be set as above.