Markdown代码(markdown代码块语法)
怎样在 Markdown 中使程序代码带上行号
用 Markdown 写文章时，如果在一段文字的每行开头加上四个空格，或者一个制表符（Tab），这段文字就会被视为程序代码。这样，就会自动识别所用的编程语言，进行代码染色，语法高亮显示。但是，如果这段程序很长的话，就有两个小问题：
每行的开头要加上空格或制表符，很麻烦。
如果要显示行号的话，就更麻烦了。
因此，我用 C# 语言写了小程序，建设一个 ASP.NET 4 网站来解决上述两个麻烦：
[+]查看原图
在这个网页中：
Line Count 复选框表示是否需要加上行号。
Prefix 中的的 Space 和 Tab 无线按钮让你选择每行开头是增加空格还是制表符。
Prefix Count 文本框让你输入缩进的层次。默认是缩进一层 。但是如果遇到在有序列表或无序列表中的程序代码，就需要缩进两层，甚至更多层了。
这个网站的总体结构如下所示：
网站的配置文件 Web.config 如下所示：
?xml version="1.0" encoding="utf-8"?
configuration
system.web
httpRuntime requestValidationMode="2.0" /
globalization requestEncoding="utf-8" responseEncoding="utf-8" /
/system.web
/configuration
网站的 Web 页面文件 CodeFormat.aspx 如下所示：
%@ Page validateRequest="false" Language="C#" inherits="Skyiv.Ben.Web.CodeFormatPage" %
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www w3 org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http //www w3 org/1999/xhtml"
head runat="server"
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleCode Format/title
/head
body
form id="form1" runat="server"
asp:Button Onclick="Submit" Text="Submit" Runat="Server" /
span style="background-color:LightBlue;"
asp:CheckBox Id="chkLineCount" Text="Line Count" Checked="True" Runat="Server" /
/span
span style="background-color:LightBlue;"
Prefix:
asp:RadioButton Id="rbnSpace" Text="Space" Checked="True"
GroupName="Prefix" Runat="Server" /
asp:RadioButton Id="rbnTab" Text="Tab"
GroupName="Prefix" Runat="Server" /
/span
span style="background-color:LightBlue;"
Prefix Count:
asp:TextBox Runat="Server" Id="tbxLevel" Text="1" Columns="2" MaxLength="1" /
/span
hr /
div
asp:TextBox Runat="Server" Id="tbxInput" Wrap="False"
TextMode="MultiLine" Columns="80" Rows="10" /
br /
asp:TextBox Runat="Server" Id="tbxOutput" ReadOnly="True" Wrap="False"
TextMode="MultiLine" BackColor="LightBlue" Columns="80" Rows="10" /
/div
/form
/body
/html
以及对应的后台 C# 代码 CodeFormat.aspx.cs：
1: using System;
2: using System.IO;
3: using System.Web;
4: using System.Web.UI;
5: using System.Web.UI.WebControls;
6: using Skyiv.Utils;
7:
8: namespace Skyiv.Ben.Web
9: {
10: public class CodeFormatPage : Page
11: {
12: protected TextBox tbxInput;
13: protected TextBox tbxOutput;
14: protected TextBox tbxLevel;
15: protected CheckBox chkLineCount;
16: protected RadioButton rbnTab;
17:
18: protected void Page_Load(object sender, EventArgs e)
19: {
20: tbxOutput.Text = string.Format(" OS: {1} ({2}-bit){0}CLR: {3}",
21: Environment.NewLine, Environment.OSVersion,
22: Environment.Is64BitOperatingSystem ? 64 : 32,
23: Environment.Version);
24: }
25:
26: protected void Submit(object sender, EventArgs e)
27: {
28: var writer = new StringWriter();
29: new CodeFormat(new StringReader(tbxInput.Text),
30: writer).Run(chkLineCount.Checked, rbnTab.Checked, GetLevel(tbxLevel.Text));
31: tbxOutput.Text = writer.ToString();
32: }
33:
34: int GetLevel(string str)
35: {
36: int n;
37: if (!int.TryParse(str, out n)) n = 1;
38: return Math.Min(5, Math.Max(0, n));
39: }
40: }
41: }
上述程序中：
第 34 至 39 行的 GetLevel 方法读取 Prefix Count 文本框中的缩进层次，返回结果限制在 0 到 5 之间。
第 26 至 32 行的 Submit 方法在 Web 页面中的 Submit 按钮被点击时被调用。
第 29 至 30 行调用 CodeFormat 类的 Run 方法对程序代码进行格式化（加行号、行首空格等）。
下面就是 CodeFormat 类的源程序代码 CodeFormat.cs：
1: using System;
2: using System.IO;
3: using System.Collections.Generic;
4:
5: namespace Skyiv.Utils
6: {
7: sealed class CodeFormat
8: {
9: TextReader reader;
10: TextWriter writer;
11:
12: public CodeFormat(TextReader reader, TextWriter writer)
13: {
14: this.reader = reader;
15: this.writer = writer;
16: }
17:
18: public void Run(bool hasCount, bool isTab, int level)
19: {
20: Write(Read(), hasCount, isTab, level);
21: }
22:
23: Liststring Read()
24: {
25: var lines = new Liststring();
26: for (string s; (s = reader.ReadLine()) != null; ) lines.Add(s);
27: return lines;
28: }
29:
30: void Write(Liststring lines, bool hasCount, bool isTab, int level)
31: {
32: var prefix = "".PadLeft((isTab ? 1 : 4) * level, isTab ? '\t' : ' ');
33: var format = "{0}" + (hasCount ? "{1," +
34: lines.Count.ToString().Length + "}: " : "") + "{2}";
35: var count = 0;
36: foreach (var line in lines)
37: writer.WriteLine(format, prefix, ++count, line);
38: }
39: }
40: }
上述程序中：
第 9 至 10 行的 TextReader 和 TextWriter 分别用于读取数据和输出格式化后的结果，这两个类是抽象基类。
在这个网站中，是使用 StringReader 和 StringWriter 派生类，对应于 Web 页面的 tbxInput 和 tbxOutput 文本框。
如果使用 StreamReader 和 StreamWriter 派生类，就可以从输入流读取数据，写到输出流中。
如果使用 Console.In 和 Console.Out，就可以从标准输入读取数据，写到标准输出。
第 23 至 28 行的 Read 方法读取数据到内存的 Liststring 数据结构中。
第 30 至 38 行的 Writer 方法将内存中的数据格式化后写出去。
第 32 行根据 isTab 和 level 参数决定程序代码数据每行的前缀。
第 33 至 34 行根据 hasCount 参数决定行号的内容。
第 34 行的 lines.Count.ToString().Length 是行号所占的宽度。
第 36 至 37 行的循环逐行格式化数据。
最后是 Makefile：
CSC = dmcs
DLL1 = -r:System.Web.dll
../bin/CodeFormat.dll: CodeFormat.aspx.cs CodeFormat.cs
$(CSC) -out:$@ -t:library $(DLL1) CodeFormat.aspx.cs CodeFormat.cs
有了上面的源程序后，执行 make 命令编译整个网站：
src$ make
dmcs -out:../bin/CodeFormat.dll -t:library -r:System.Web.dll CodeFormat.aspx.cs CodeFormat.cs
这就大功告成了。
githubmarkdown以源码方式显示了
注意：Windows环境下载时，分为User版和System版（推荐），User版只能安装在C盘的用户文件夹下，System版可以自定义安装位置，用户可以安装需求选择下载哪个版本。
设置中文
安装好VS Code后，软件默认为英文，以下步骤可以将其设置为中文。
选择View - Command Palette，或使用快捷键Ctrl+Shift+P，搜索configure language，然后选择Configure Display Language，然后选择zh-cn，如下图。
在这里插入图片描述
注意： 若选择Configure Display Language后，未出现上图所示选项，而是出现如下图的json文件编辑页面，则可能为旧版的VS Code，将json文件中的locale后面的en改为zh-cn，然后按照步骤3中安装Chinese （Simplified）Language Pack扩展。
在这里插入图片描述
若没有zh-cn，可以选择Install additional languages，然后安装扩展包Chinese (Simplified) Language Pack，然后重复步骤1。
也可以先在View - Extensions中安装Chinese （Simplified）Language Pack中文简体语言包扩展，如下图第1个扩展，然后进行步骤1。
在这里插入图片描述
安装扩展
在查看 - 扩展中可以查看、设置、启用、禁用、卸载已安装扩展，即对已安装扩展进行管理，同时可以搜索并安装各种扩展，如下图。
在这里插入图片描述
编辑Markdown文档
在VS Code中打开或新建.md格式的文件即可进行编辑（在VS Code中新建文件时可能需要先保存为.md格式文件），点击右上角的预览按钮可以进行实时预览。下图第一个按钮即为预览按钮。
在这里插入图片描述
配合Markdown使用的扩展
推荐的扩展套装：
基于Markdown Preview Enhanced扩展预览窗口（推荐）：Markdown Preview Enhanced 和 Prince软件 + markdownlint + Mermaid Markdown Syntax Highlighting + Maridown PDF（可选） + vscode-pdf（可选）
优点：支持各种CSDN博客特殊语法，如：mermaid绘图，注脚，注释，等等。而且预览窗口不受VS Code软件深色主题的影响，更加形象的展示所编写文件的pdf文档样式。
基于原生预览窗口：markdownlint + Markdown+Math + Mermaid Markdown Syntax Highlighting + Markdown Preview Mermaid Support + Maridown PDF + vscode-pdf（可选）
优点：预览窗口反应快速，无需安装额外的预览扩展，主题可以跟随VS Code软件的深色主题。
缺点：部分特殊语法无法得到支持。
以下为各个扩展的详情介绍：
markdownlint：一个好用的 Markdown 格式检查扩展，它规定了许多规则并实时对文档进行检查，防止一些语法错误，同时维持文档风格的统一，使用此工具有助于形成一个良好的写作习惯和规范。
Markdown Preview Enhanced：一个很好用的完善预览功能的插件，可以更加形象的展示所编写文件的pdf文档样式。优点是支持LaTeX数学公式和Mermaid图表等内容的显示。
安装后，你会发现工作区的右上角多了一个预览按钮，这个按钮就是Markdown Preview Enhanced插件产生的，如下图。直接右键.md文件的页面也可以开启Markdown Preview Enhanced。
在这里插入图片描述
注意：右键Markdown Preview Enhanced预览页面也有一些选项，如下图。Open in Browser是在浏览器中打开预览，HTML是打印成HTML文件，PDF是打印成PDF文件（此选项需额外安装Prince软件，VS Code扩展库中没有，安装方法见后文）。
在这里插入图片描述
安装Prince软件：进入Prince官网，点击下载，选择对应的版本进行下载并安装。然后添加环境变量，右键我的电脑-属性-高级系统设置-环境变量-系统变量-Path-编辑，新建一条Prince安装路径\engine\bin即可。然后重启VS Code。
Markdown All in One：集成了各种功能，同时也支持LaTeX数学公式（在扩展设置中启用基本的数学支持选项可以开启与关闭该功能），但貌似没有显示Mermaid图表和打印PDF的功能。个人建议，若启用Markdown+Math扩展，则不必启用此扩展。
Markdown+Math：使VS Code原生的Markdown预览窗口支持显示LaTeX数学公式。可以与Markdown All in One扩展同时使用，同时使用时，LaTeX公式显示风格以Markdown+Math为标准。
Mermaid Markdown Syntax Highlighting：支持Mermaid图表代码高亮，但无法在原生预览窗口显示。
Markdown Preview Mermaid Support：支持原生预览窗口显示Mermaid图表。
Maridown PDF：可以简单的将编写的.md文件转换成其他格式的文件，右键.md文件的页面可以进行转换，如下图。生成的文件将会直接保存在.md文件的文件夹下。但不支持LaTeX数学公式和Mermaid图表等内容的显示。
在这里插入图片描述
vscode-pdf：若希望在VS Code中直接打开并浏览pdf格式文件，可以通过安装该插件来达到该目的。
Markdown Pad 2
介绍
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。而Markdown Pad 2 便是编辑Markdown语言的一款编辑器，其功能强大，便捷，速度快，无广告，而且还可以进行个性化设置。下面介绍一下Windows系统下，该工具的安装与配置方法。
安装
进入官网：官网链接，然后点击Download MarkdownPad；或者直接点击该链接，下载链接，会立刻开始下载。
运行上一步骤下载到的exe文件，开始安装，并完成安装。
注意：Win10若提示HTML渲染组件出错，错误的表现形式为，不能实时预览Markdown生成的HTML页面。则需要安装awesomium_sdk，下载地址：Download awesomium_v1.6.6_sdk_win.exe。
设置中文
Tool — Options — Editor — Language，选择中文。
Key
在初次打开软件时单击Enter Key按钮，或点击帮助—升级到MarkdownPad专业版。输入如下Email和Key。
Soar360@live.com
1
1
Key
GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH+s4UcSeQ==
1
1
个性化设置
菜单栏 — 工具 — 选项
Markdown — GitHub 风格 Markdown （离线）
样式表 — Markdownpad-github.css
文件 — 在导出的PDF文件中包含CSS背景
Markdown与HTML的联系
Markdown支持HTML的大部分标签，但反之HTML不支持Markdown语法；即Markdown兼容HTML。例如换行标签br，键盘文本kbd，预格式文本pre，上标sup，下标sub，等等。更多标签和用法请参照HTML标签 。
例子：
键盘文本-复制的快捷键：kbdCtrl/Command/kbd + kbdC/kbd
显示：
Ctrl/Command + C
Markdown中支持HTML的大部分字符实体，如大于号： ，显示为。更多HTML字符实体请参照HTML字符实体 。
编辑技巧
快捷键
在编辑页面可以适当的使用快捷键提升效率。以下为CSDN的快捷键，其中有些是可以通用于各个编辑器的。
CSDN快捷键：
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
待办列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
列表
当使用顺序列表时，按回车会自动生成序号，想中断排序，再按一次回车即可。
在顺序列表的编号后面按回车，不会打乱编号的顺序。
当使用列表后，缩进中断时，可以使用Tab进行缩进。
标记失效
在使用Markdown标记语言时，一些标记后需要加空格才会生效，如标题标记：# 。
一些标记的前面需要有回车才会生效，如分隔符：--- 。
一些字体标记，当结束标记前的字符为标点符号时可能会失效。
例如：**标点符号。**是句号。
显示：**标点符号。**是句号。
解决方案：在结束标记**后加空格即可，其他字体标记同理。
例如：**标点符号。** 是句号。
显示：标点符号。 是句号。
页面内跳转
由于Markdown目前没有实现页面内跳转的方法，故可以使用HTML的方法进行页面内跳转，因为Markdown支持HTML。值得一提的是，跳转到锚点时，可以使用Markdown的链接语法进行跳转。
注意： 示例中锚点的h1标签可以换成任何其他标签，如text标签等。
纯HTML示例：
!-- 跳转到锚点 --
a href="#1"锚点目标/a
!-- 创建锚点 --
h1 id="1"锚点/h1
1
2
3
4
1
2
3
4
HTML创建锚点+Markdown跳转示例：
跳转到锚点：[锚点目标](锚点id '标题')
创建锚点（同上）：h1 id="1"锚点/h1
展示：
HTML语法跳转：锚点目标
Markdown语法跳转：锚点目标
锚点
CSDN博客技巧
CSDN目录
输入#，并按下Space后，将生成1级标题。
输入##，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用@[TOC](自定义目录标题)或@[toc](自定义目录标题)语法后生成一个有缩进的目录，可实现页内跳转。
CSDN快捷键
同编辑技巧章节的快捷键。此处省略。
自定义列表
CSDN编辑器支持，某些本地编辑器不支持。
例子（最前面要有空行）：
Authors
: John
: Luke
1
2
3
1
2
3
显示：
Authors
John
Luke
注脚
CSDN编辑器支持，某些本地编辑器不支持。
注脚会按照文章的顺序自动排序。
例子：
一个具有注脚的文本。[^1]
[^1]: 注脚的解释
1
2
1
2
显示：
一个具有注脚的文本。1
注释
CSDN编辑器支持，某些本地编辑器不支持。
例子（注释词前后要有空格）：
Markdown兼容 HTML 语言。
*[HTML]: 超文本标记语言
1
2
1
2
显示：
Markdown兼容 HTML 语言。
LaTeX公式
CSDN编辑器中支持LaTeX数学公式，详情请见后文的LaTeX公式章节。Typroa软件支持，设置方法详见上文的 Markdown工具 - Typroa - 设置 章节。
Mermaid制图
CSDN编辑器中支持mermaid绘图，如甘特图，UML图等。详情及具体用法请见参考文档。
参考文档：链接 。
需要注意的是：有些本地编辑器不支持mermaid绘图，但如果使用VS Code，则可以通过安装Markdown Preview Enhanced或Markdown Preview Mermaid Support扩展的方式支持，详情请见上文的 Markdown工具 - VS Code - 配合Markdown使用的扩展 章节。
下方是一些图的简单绘制方法。
甘特图
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划一 : des3, after des2, 5d
计划二 : des4, after des3, 5d
```
显示：
Mon 06
Mon 13
Mon 20
已完成
进行中
计划一
计划二
现有任务
Adding GANTT diagram functionality to mermaid
UML图
```mermaid
sequenceDiagram
张三 - 李四: 你好！李四, 最近怎么样?
李四–王五: 你最近怎么样，王五？
李四–x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了
不适合放在一行.
李四–张三: 打量着王五…
张三-王五: 很好… 王五, 你怎么样?
```
显示：
张三
李四
王五
你好！李四, 最近怎么样?
你最近怎么样，王五？
我很好，谢谢!
我很好，谢谢!
李四想了很长时间, 文字太长了
不适合放在一行.
打量着王五...
很好... 王五, 你怎么样?
张三
李四
王五
FLowchart流程图
```mermaid
flowchat
st=start: 开始
e=end: 结束
op=operation: 我的操作
cond=condition: 确认？
st-op-cond
cond(yes)-e
cond(no)-op
```
显示：
开始
我的操作
确认？
结束
yes
no
导出与导入
导出
用户可以在CSDN文章中任意编辑。完成了一篇文章的写作后, 可以在上方工具栏找到 导出按钮 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果用户想加载一篇自己写过的.md文件或者.html文件，在上方工具栏可以选择导入按钮进行对应扩展名的文件导入，并继续创作。
字符实体
前言
与HTML字符实体相同，详情可参照HTML字符实体 。
空格
?
不换行空格，全称是 No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
?
半角空格，全称是 En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
?
全角空格，全称是 Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
其他
显示结果 描述 实体名称 实体编号
空格 ? ?
小于号
|大于号 | |
≦ |小于等于 |≤
≧ |大于等于 |≥
|和号 | |
" |引号 |" |"
’ |撇号 |' (IE不支持) |'
￠ |分 |￠ |￠
￡ |镑 |￡ |￡
￥ |日圆 |￥ |￥