【三】用Markdown写blog的经常使用操做

时间 2019-11-10

原文原文链接

本系列有五篇：分别是
【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客：主要是安装方面
【二】jekyll 的使用：主要是jekyll的配置
【三】Markdown+jekyll在Gitpages上写blog的经常使用操做：主要Markdown的使用javascript

【四】搭建Markdown的编辑器 html

【五】将博客从jekyll迁移到了hexojava

参考：【Markdown+jekyll在Gitpages上写blog的经常使用操做】和【Markdown中文文档】c++

Markdown解析器

jekyll支持不一样的md文件解析器，好比kramdown和rdiscount。虽然markdown的标准语法是统一的，但每种解析器对于标准的实现都有所区别，例如加入了本身的拓展功能，所以有可能某种写法在别人的例程可使用，push到本身的博客中就没法渲染，相信这一点困惑着包括我在内的许多新手。git

我选用了kramdown做为解析器，由于彷佛它支持一些很好的功能，好比标题连接、脚注和目录。高亮渲染选择了pygments。本文下面的内容，也仅仅保证在固定的环境下但是使用。web

基本操做

字体

标题

Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。ubuntu

类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），例如：浏览器

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

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

任何数量的 = 和 - 均可以有效果。markdown

类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：网络

# 这是 H1

## 这是 H2

###### 这是 H6

你能够选择性地「闭合」类 atx 样式的标题，这纯粹只是美观用的，如果以为这样看起来比较温馨，你就能够在行尾加上 #，而行尾的 # 数量也不用和开头同样（行首的井字符数量决定标题的阶数）：

# 这是 H1 #

## 这是 H2 ##

### 这是 H3 ######

段落和换行

一个 Markdown 段落是由一个或多个连续的文本行组成，它的先后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不应用空格或制表符来缩进。

「由一个或多个连续的文本行组成」这句话其实暗示了 Markdown 容许段落内的强迫换行（插入换行符），这个特性和其余大部分的 text-to-HTML 格式不同（包括 Movable Type 的「Convert Line Breaks」选项），其它的格式会把每一个换行符都转成 <br /> 标签。

若是你确实想要依赖 Markdown 来插入 <br /> 标签的话，在插入处先按入两个以上的空格而后回车。

的确，须要多费点事（多加空格）来产生 <br /> ，可是简单地「每一个换行都转换为 <br />」的方法在 Markdown 中并不适合， Markdown 中 email 式的区块引用和多段落的列表在使用换行来排版的时候，不但更好用，还更方便阅读。

分隔线

你能够在一行中用三个以上的星号、减号、底线来创建一个分隔线，行内不能有其余东西。你也能够在星号或是减号中间插入空格。下面每种写法均可以创建分隔线：

* * *

***

*****

- - -

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

引用

引用为大于号开头，好比

> 这里是引用

显示为：

列表

有序列表项前加数字和点（注意先后面要空格）

1. 列表1

2. 列表2

显示为：

列表1
列表2

注意：有序列表的编号值仅为记号，输出顺序以列表顺序为准，与编号无关。好比：

2. 列表1

1. 列表2

输出仍然为：

列表1
列表2

无序列表为* 、+、 -中任意一个开头，用法同有序列表。而且能够混合使用。

输入：

* 无序列表1
* 无序列表2
1. 有序列表1
2. 有序列表2
+ 无序列表3
- 无序列表4

输出：

代码

代码渲染器使用的是pygments。其使用方法为加标记：

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

其中c++能够更换为任意pygments支持的语言。

注意： 彷佛有些markdown解释器支持围栏代码块的形式渲染，可是我在pygments渲染器下尝试没法使用，只能使用highlight的形式。

表格（注意段前段后要各空一行，否则可能会解析出错）

表格也是写blog中经常使用的功能之一，markdown中表格的处理和latex比较像，语句也很简单：例如：

|水果名称|价格（元/500克）|
|:-------:|-----:|
|苹果|3.2|
|香蕉|4.5|

显示为：

其中第二行的冒号表示对齐方式，默认为左对齐，冒号在右边表示右对齐，两边都有冒号表示居中对齐。

连接

在文中对某些文字插入超连接是很经常使用的操做。好比上面的pygments支持的语言。方法为: [须要超连接的正文](连接) 具体到刚才的例子： [pygments支持的语言] (http://pygments.org/docs/lexers/) >

注意： 插入的连接必须带http或者https，不然连接为相对路径，没法访问。

输入：有两种方法，一个红框对应一种方法

输出：

公式（使用mathjax）

更多公式语法参考《MathJax使用LaTeX语法编写数学公式教程》

插入公式可以使用直接在markdown中添加html语言，可是这种作法丧失了markdown的可读性。markdown支持MathJax引擎渲染公式。

MathJax是一个开源JavaScript库。它支持LaTeX、MathML、AsciiMath符号，能够运行于全部流行浏览器上。它的设计目标是利用最新的web技术，构建一个支持math的web平台。支持主要的浏览器和操做系统,包括那些移动设备。对大部分用户而言它不须要安装，即没有插件须要下载也没有软件须要安装，因此网页做者能够编写包含数学公式的页面并有信心能够天然而容易的浏览到它们。只须要在页面中包含MathJax脚本和一些数学公式，其余的事情交给MathJax来处理吧。

MathJax使用网络字体（大部分浏览器都支持）去产生高质量的排版，使其在全部分辨率均可缩放和显示，这远比使用包含公式的图片要有效得多。 MathJax也能够用于屏幕阅读器，让视力受损者也可使用。

使用MathJax显示数学公式是基于文本的，而非图片。它能够被搜索引擎使用，这意味着方程式和页面上的文字同样是能够被搜索的。 MathJax容许页面做者使用TeX、LaTeX符号和 MathML 或者 AsciiMath 去书写公式。 MathJax甚至能够将Tex格式转化为MathML格式，使其能够被原生支持MathML格式的浏览器更多的渲染。转化为MathML格式后你能够复制粘贴它们到其余程序中。

MathJax是模块化的，因此它仅仅在须要时才加载它的组件，同时也能够被扩展以实现更多功能。 MathJax同时也是高度可配置的，容许做者做出更适宜网站自身的自定义。最重要的，MathJax的API可让你在你的网页上动态的建立公式。

mathjax官网

mathjax中文官方文档

下面以Jekyll为例。。。

为了使用Mathjax，须要在布局文件（好比default.html中添加）：

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

因为mathjax和Markdown部分符号冲突，因此须要增长配置以下：

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

能够是公式插入与stackoverflow中插入公式样式相同。行内公式为单美圆号 $ 公式 $ ，例如[Math Processing Error]，行间公式双美圆号 $$ 公式 $$,例如：

更多公式语法请参考【【转】LATEX数学公式基本语法】

图片

Gitpages中插入图片是一件相对比较麻烦的事。简单的方法是将图片直接放入目录中，而后直接在文中引用。 markdown的语法为

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

html的语法为：

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

html的语法要灵活一些，而且能够控制图片的大小。

Gitpages中用于静态blog的大小是有限制的，因此这种方法试用与图片很少，图不大的状况。因此比较推荐的方法是将图片上传到图片存储网站，而后插入图片外链。以flickr为例，先将图片上传到本身的flickr帐号，而后将连接文件目录变为图片外链目录便可。好比

小技巧： 使用flickr进行批量图片插入时，可使用一个工具quickr pickr, 它支持批量插入上传到flickr的图片，而且能够选择合适的分辨率。具体使用方法可查看这里。

脚注

脚注的语法很简单，有些像特殊的连接。语法为：

[^ 脚注名称]

[^脚注名称]: 脚注内容

好比，你知道上面图片中的歌手是谁吗?是Barry White¹

注意： 脚注的内容能够写在任意位置，建议写在脚注声明的下方，但必须与脚注声明部分有一行的间隔，不然没法渲染出脚注。

另外，脚注名称要用英文或者数字，中文会解析错误，会被解析成前面的连接

输入：

输出：

在页面后面会显示：

标题引用

标题引用是kramdown支持的小众特性之一，便可以像引用外部连接同样引用文中的标题（估计不少人都使用过word中的相似功能）。

markdown的实现语法也与连接和脚注相似，为：（#ID不要用中文）

###这是一个标题 {#ID1}

引用[标题1](#ID1)

渲染效果为

这是一个标题

引用标题1

阅读全文

在正文须要截断的地方添加使用 标签便可。

反斜杠

Markdown 能够利用反斜杠来插入一些在语法中有其它意义的符号，例如：若是你想要用星号加在文字旁边的方式来作出强调效果（但不用 <em> 标签），你能够在星号的前面加上反斜杠：

\*literal asterisks\*

Markdown 支持如下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

后记

目前本身也只是markdown和jekyll写blog的初学者，不少功能估计尚未开发出来，所写的内容估计也有纰漏。本身将会在博客写做的过程当中不断完善本身使用过程当中的实践经验，也但愿看官们批评指正。

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