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 .

link

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

Input :

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

Read the whole passage

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 .

  1. https://en.wikipedia.org/wiki/Barry_White

【 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 )

    C:\Users\Administrator>elasticdump --input=D:\test --output=http://localhost:9200/logs_apipki_201 ...

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