There are five articles in this series ： Namely
【 One 】Ubuntu14.04+Jekyll+Github Pages Build a static blog ： It's mainly about installation
【 Two 】jekyll Use ： Mainly jekyll Configuration of
【 3、 ... and 】Markdown+jekyll stay Gitpages Write on blog Common operations of ： The main Markdown Use

【 Four 】 build Markdown Editor for

【 5、 ... and 】 Blog from jekyll Moved to hexo

Reference resources ：【Markdown+jekyll stay Gitpages Write on blog Common operations of 】 and 【Markdown Chinese document

### Markdown Parser

jekyll Support different md File parser , such as kramdown and rdiscount. although markdown The standard grammar is unified , But each parser differs from the standard implementation , For example, it has added its own expansion function , Therefore, it is possible that some writing method can be used in other people's routines ,push You can't render it in your own blog , I believe this puzzles many beginners, including me .

I chose kramdown As a parser , Because it seems to support some good features , Like title Links 、 Footnotes and table of contents . Highlight rendering selected pygments. The following part of this article , It can only be used in a fixed environment .

### Basic operation

##### typeface

###### title

Markdown Support the syntax of two titles , class Setext And the class atx form .

class Setext Form is in the form of the bottom line , utilize = （ The highest level title ） and - （ Second level title ）, for example ：

This is an H1
=============

This is an H2
-------------


Any amount of = and - All can have effect .

class Atx The form is inserted at the beginning of the line 1 To 6 individual # , Corresponding to the title 1 To 6 rank , for example ：

#  This is a  H1

##  This is a  H2

######  This is a  H6


You can selectively 「 closed 」 class atx The title of the style , It's purely for aesthetic purposes , If you think this looks more comfortable , You can add... At the end of the line #, And at the end of the line # The quantity doesn't have to be the same as the beginning （ The number of characters at the beginning of a line determines the order of the title ）：

#  This is a  H1 #

##  This is a  H2 ##

###  This is a  H3 ######
##### Paragraphs and line breaks

One Markdown A paragraph is made up of one or more consecutive lines of text , There should be more than one blank line before and after it （ A blank line is defined as a line that appears empty on display , Will be regarded as a blank line . For example , If a line contains only spaces and tabs , Then the line will also be treated as a blank line ）. Normal paragraphs should not be indented with spaces or tabs .

「 Consists of one or more consecutive lines of text 」 This sentence actually implies Markdown Allow forced line breaks within paragraphs （ Insert line break ）, This feature and most of the other text-to-HTML The format is different （ Include Movable Type Of 「Convert Line Breaks」 Options ）, Other formats convert each newline character to <br /> label .

If you exactly Want to rely on Markdown To insert <br /> Label words , Press in more than two spaces at the insertion, then enter .

You bet , It's going to take a little bit more （ Add more space ） To produce <br /> , But simply 「 Every line feed is converted to <br />」 The method of in Markdown It's not suitable for , Markdown in email Type Block references And multi paragraph list When using line feed for typesetting , Not only is it better to use , It's also easier to read .

##### Separation line

You can use more than three asterisks in a line 、 minus sign 、 Bottom line to create a separation line , There can't be anything else in the line . You can also insert spaces between asterisks or minus signs . Each of the following can be used to create a separator line ：

* * *

***

*****

- - -

---------------------------------------


##### quote

The reference starts with a greater than sign , such as

> Here is the reference

Is shown as ：

##### list

There are sequence table entries preceded by numbers and dots （ Pay attention to the space before and after

1. list 1

2. list 2

Is shown as ：

1. list 1
2. list 2

Be careful The numbered value of an ordered list is just a token , The output order is in the list order , It's not about numbers . such as ：

2. list 1

1. list 2

The output is still ：

1. list 1
2. list 2

The unordered list is * 、+、 - Any one of the beginning of , It has the same usage as sequence table . And it can be mixed .

Input ：

* Unordered list 1
* Unordered list 2

1. Ordered list 1

2. Ordered list 2

+ Unordered list 3

- Unordered list 4

Output ：

##### Code

The code render uses pygments. It is used by marking ：

void main()
{
std::cout << "Hello StackEdit" << std::endl;
return;
}

among c++ It can be changed to any pygments Supported languages .

Be careful ： There seems to be something markdown The interpreter supports rendering in the form of fenced code blocks , But I am pygments Render is not available , Only use highlight In the form of .

##### form （ Pay attention to a blank line before and after the paragraph , Otherwise, there may be an error in parsing ）

Forms are also written blog One of the functions commonly used in ,markdown How to deal with and latex More like , The sentence is also very simple ： for example ：

| Fruit name | Price （ element /500 g ）|
|:-------:|-----:|

| Apple |3.2|

| Banana |4.5|

Is shown as ：

The colon on the second line indicates the alignment , The default is left alignment , A colon on the right indicates right alignment , There are colons on both sides to indicate center alignment .

It's a common operation to insert hyperlinks in some text . Like the one above pygments Supported languages . Method is : [ Need the body of the hyperlink ]( link ) Let's go to the example just now ： [pygments Supported languages ] (http://pygments.org/docs/lexers/) >

Be careful ： The inserted link must have http perhaps https, Otherwise, the link is a relative path , cannot access .

Input ： There are two ways , A red box corresponds to a method

Output ：

##### The formula （ Use mathjax）

More formula syntax reference 《MathJax Use LaTeX Grammar to write a mathematical formula course

Insert formula can be used directly in markdown Add html Language , But it loses markdown Readability .markdown Support MathJax Engine rendering formula .

MathJax It's a Open source JavaScript library . It supports LaTeX、MathML、AsciiMath Symbol , Can run on all popular browsers . It's designed to take advantage of the latest web technology , Build a support math Of web platform . Support for major browsers and operating systems , Including those mobile devices . For most users, it doesn't need to be installed , There are no plug-ins to download and no software to install , So Web authors can write pages that contain mathematical formulas and have the confidence to browse them naturally and easily . Just include... In the page MathJax Scripts and some mathematical formulas , Other things to MathJax Let's deal with it .

MathJax Use web fonts （ Most browsers support ） To produce high quality typesetting , Make it zoom and display at all resolutions , This is much more effective than using pictures that contain formulas . MathJax It can also be used for screen readers , It can also be used by people with impaired vision .

Use MathJax It shows that the mathematical formula is Text based , Not pictures . It can be used by search engines , This means that equations can be searched just like the text on the page . MathJax Allow page authors to use TeX、LaTeX Symbols and  MathML  perhaps  AsciiMath  To write formulas . MathJax You can even put Tex Format into MathML Format , Make it natively supported MathML Format browser, more rendering . Turn into MathML After formatting, you can copy and paste them into other programs .

MathJax It's modular , So it only loads its components when needed , It can also be extended to achieve more functions . MathJax It's also highly configurable , Allow authors to make customization that is more appropriate for the site itself . The most important ,MathJax Of API It allows you to create formulas dynamically on your web page .

mathjax Official website

mathjax Official documents in Chinese

Let's say Jekyll For example ...

In order to use Mathjax, Need to be in layout file （ such as default.html Add ）：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

because mathjax and Markdown Some symbols conflict , So the configuration needs to be added as follows ：

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$', '$'] ],
displayMath: [ ['$$', '$$']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] },
messageStyle: "none",
"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] }
});
</script>

It can be formula insertion and stackoverflow Insert formula in the same style . The formula in the line is single dollar $The formula$, for example [Math Processing Error], Double dollar sign between lines $$The formula$$, for example ：

For more formula syntax, please refer to 【【 turn 】LATEX Basic grammar of mathematical formula

##### picture

Gitpages It's a relatively troublesome thing to insert pictures in . The simple way is to put the picture directly into the catalog , And then directly quote . markdown The grammar of is

![alt text](/path/image.jpg "Title")

html The grammar of is ：

<img src="/path/image.jpg" height="100%" width="100%">

html Be flexible in grammar , And you can control the size of the picture .

Gitpages For static blog There is a limit to the size of , So this method is not much to try with pictures , The picture is not big . So the recommended method is Upload the image to the image storage website , Then insert the picture outside the chain . With flickr For example , First upload the picture to your own flickr account number , Then change the linked file directory into the picture outer link directory . such as

Tips ： Use flickr When doing batch image insertion , You can use a tool quickr pickr, It supports batch insert upload to flickr Pictures of the , And you can choose the right resolution . For details, please refer to here .

##### footnote

The syntax of footnotes is simple , Some are like special links . The grammar is ：

[^ Name of footnotes ]

[^ Name of footnotes ]: Footnote content

such as , Do you know who the singer in the picture above is ? yes Barry White1

Be careful ： Footnotes can be written anywhere , It is suggested to write below the footnotes statement , But it has to be with There is a one line gap in the footnotes declaration section , Otherwise, the footnotes cannot be rendered .

in addition , The name of the footnotes should be in English or numbers , Chinese will parse errors , Will be parsed into the previous link

##### Output ：

At the back of the page ：

##### Title Reference

The title reference is kramdown One of the niche features of support , That is to say, you can quote the title of a text just like an external link （ It's estimated that many people have used word Similar functions in ）.

markdown The implementation syntax of is similar to links and footnotes , by ：（#ID Don't use Chinese ）

### This is a title {#ID1}

 quote [ title 1](#ID1)

The rendering effect is

##### This is a title

quote title 1

Add where the body needs to be truncated <!-- more --> Labels can be .

The backslash

Markdown You can use backslashes to insert symbols that have other meanings in grammar , for example ： If you want to use an asterisk next to the text to make an emphasis （ But not <em> label ）, You can put a backslash in front of the asterisk ：

\*literal asterisks\*


Markdown The following symbols are supported to be preceded by a backslash to help insert ordinary symbols ：

\    Backslash
    The quotation marks
*    asterisk
_    The bottom line
{}   Curly braces
[]   square brackets
()   brackets
#    Well number
+    plus
-    minus sign
.    English period
!    Exclamation mark `

#### Postscript

Now I'm just markdown and jekyll Write blog Beginners , Many functions have not been developed yet , It is estimated that there are also mistakes in the content of the writing . I will constantly improve my practical experience in the process of blog writing , I also hope that the officials will criticize and correct me .

## 【 3、 ... and 】 use Markdown Write blog More related articles on common operations of

1. [Android L]SEAndroid Open device file node permissions ( Read or write ) Method ( Covers common operations ：sys/xxx、proc/xxx、SystemProperties)

reminder       I suggest you learn about the last blog post first ([Android L]SEAndroid enhance Androd Security background summary and impact ) What I'm talking about , First pair SEAndroid Look at the whole picture , Then continue with this section .   ...

2. MarkDown Write blog（ test ）

Block elements Paragraphs and line breaks One Markdown A paragraph is made up of one or more consecutive lines of text , There should be more than one blank line before and after it ( A blank line is defined as a line that appears empty on display , Will be regarded as a blank line . For example , If a line contains only spaces and tabs , Then ...

3. Wiz Write Blog? No more love , A full embrace Markdown+Pandoc

Wiz Write Blog? No more love , A full embrace Markdown+Pandoc Article reprinted from http://iout.in/archives/454.html Why we write ? Ever since people started writing , Writing is recording . ...

4. ( 3、 ... and ) Docker Common operations and CentOS7 Firewall command

Reference and thanks Docker Common commands https://docs.docker.com/engine/reference/commandline/docker/ Docker Sign in docker Account doc ...

5. mongodb Common operations of ( 3、 ... and )

continue mongodb To learn and summarize : 11.mongodb Of mapreduce function mapreduce Can be said to be mongodb A very powerful function of , Can achieve complex operations and Statistics , Make a brief summary : Suppose there is user ...

6. web The front-end study （ 3、 ... and ）css Learn the notes section （3）-- css Common operations

5.  CSS Common operations 5.1  alignment Use margin Properties are aligned horizontally <!DOCTYPE html> <html lang="en"> <head ...

7. Verse 300 ,python operation redis cache - Other common operations , Used to operate redis The data in name, Whatever data type

python operation redis cache - Other common operations , Used to operate redis The data in name, Whatever data type delete(*names) According to delete redis Any data type in #!/usr/bin/env pyt ...

8. Learn quickly Scala The third class （ Fixed length array , Variable length array , Array loop , Array transformation , Array common operations ）

Fixed length array definition : val ar = new Array[Int](10) val arr = Array("aa", "bb") Fixed length array assignment : arr(0) = ...

9. c++ MFC The image processing CImage Class common operation code

Original author :aircraft Original address :https://www.cnblogs.com/DOMLX/p/9598974.html MFC The image processing CImage Class common operations CImage The class header file is #inclu ...

## Random recommendation

1. cocos2d-x3.0 Physics The new physics engine

1. explain : 3.0 In the future box2d and chipmunk These two physical engines are packaged , It's very convenient to use 2. Detailed usage : 1. Create a physical world scene auto scene = Scene::createWithPhy ...

2. bootstrap-js(3) Rolling monitoring

Navigation bar example ScrollSpy The plug-in automatically updates the corresponding navigation items in the navigation bar according to the scrolling position . Drag the scroll bar in the area below , Make it lower than the position of the navigation bar , observe active Class changes . The sub items in the drop-down menu will also become highlighted . 1. transfer ...

3. javascript Buffer animation of animation effect ( Revised edition )

When writing multiple blocks to trigger motion at the same time , Find a BUG, timer = setInterval(show, 30); Originally show It's a custom function , When set to timer = setInterval(show(one ...

4. Windows 10 16251 Added api

This article focuses on Microsoft's latest sdk Added features , I can't download it yet , To 7 month 29 , Now you can download it 16232 , Support Neon effect In fact, set the minimum version of the software to 16232 Automatic support Neon effect . Mainly added A ...

5. es crul Inquire about （ One ）

6. obtain Type In three ways

using System;using UnityEngine; public class Type_Test : MonoBehaviour{    private void Awake()    { ...

7. JAVA The realization of single linked list - No leading node and no tail pointer

This procedure adopts JAVA Language realizes the chain realization of linear list . First, the interface of linear table is defined ListInterface, then LList Class implements the ListInterface Completed the realization of linked list . In this implementation , A linked list does not have a header node , And there are ...

8. 【Ray Tracing The Next Week Super detailed explanation 】 Ray tracing 2-9

Let's sort out the project code Catalog ----include --hit --texture --material ----RTdef.hpp ----ray.hpp ----camera.hpp ---- ...

9. ( turn )Python3 And shutil modular

original text :https://www.cnblogs.com/wang-yc/p/5625046.html One . brief introduction shutil It's a high-level document , Folder , Compressed packet processing module . Two . Use shutil.copy ...

10. P3866 [TJOI2009] War games

P3866 [TJOI2009] War games Background Small R Playing a war game . The game map is a M That's ok N Columns of the matrix , Each grid can be an obstacle , It could be empty space , At the beginning of the game, there are several enemy troops scattered in different open spaces . Every enemy is ...