写作起因

在后台看到了有一些访客，找到了这个博客网站..

在~~2023年的~~五一假期才编写维护了一点点的无意义内容，而这个博客到现在还什么实质性的东西都没写，感觉有点羞愧、尴尬和辣眼睛，觉得对不住这里的访客

~~来自2024年12月9日的更新，不是我怎么这么能鸽又等了这么久，但是以后有空再写~~

于是决定水一篇Markdown语法的文章，正好也能加深一下我对其语法的熟练程度，为此尽量做成较详细又通俗简单的语法教程。

~~万一以后自己忘了怎么写了也好快速查对~~

Markdown教程(未完工)

写作起因
 前言
 Markdown是什么？
正式教程

前言

Markdown虽说有自己的语法，但大多比较简单，故难以实现美观或者复杂的样式效果，存粹原生的Markdown语言难以做到像Word文档那样自由的格式。

但好在Markdown支持在文档内部用html标签结合css样式来修饰，这就使它布局样式的上限极大提高

此文章中会涉及html和css相关知识，但是萌新不必担心，因为全本文简单易懂。

Markdown是什么？

链接:百度百科Markdown

我就简单描述一下：很像word文档，但是以文字代码的形式撰写，是在一定程序环境下可解读打开的文本文件

它的文件以.md作为文件后缀，例如text.md，你尝试用万能的记事本打开，却发现只看懂了一半内容。想要完整的看到它的内容你可以试试这个网站(进去时的加载会有点慢，请耐心等约半分钟)

在线网站:在线上传查看、编写、导出markdown文件

"stackedit在线导入查看文件，简易图示"

若是没有合适的环境，可以在上述这个在线网站编写

正式教程

极简html与极简css
标题
 链接和图片
 预格式化文本
 复杂段落

极简html与极简css

众所周知，纯Markdown语法对文档样式的编写不太行，但它支持在文档中写html和css啊

一对简单的 html文本标签代码这是一段文本效果如下:

这是一段文本

一个简单的style="color: pink; text-align: center"css样式（粉色+居中），修饰一下上述标签

可以组合出代码：

<p style="color: pink; text-align: center">
    这是一段粉色且居中的文本
</p>

效果如下:

这是一段粉色且居中的文本

这便是markdown中最基本最常用的格式，会这个足够了

举个更复杂一点的例子，你猜它的代码是什么？

"加了圆角与阴影的一张图片"

<div style="text-align: center;">
    <a href="https://cloud.lunprin.com/?explorer/share/file&hash=fb6azMbRbw7KgtjIRqNs7lH1tpKnxwMbQGB3r8syKb0s6amWMLfVNRIERXIIcqbdOw" title="https://cloud.lunprin.com/?explorer/share/file&hash=fb6azMbRbw7KgtjIRqNs7lH1tpKnxwMbQGB3r8syKb0s6amWMLfVNRIERXIIcqbdOw">
        <img src="https://cloud.lunprin.com/?explorer/share/file&hash=fb6azMbRbw7KgtjIRqNs7lH1tpKnxwMbQGB3r8syKb0s6amWMLfVNRIERXIIcqbdOw" style="border-radius: 3%/6%; object-fit: cover; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3)">
        <p style="color: grey">
            "加了圆角与阴影的一张图片"
        </p>
    </a>
</div>

可以点击"HTML"缩放全屏阅读

看起来还是有些繁杂的，但是其实只用到了一个格式：

<标签名 属性名="xxx" style="样式名1: xxx; ... ; 样式名n: xxx;">
	子标签或文本
</标签名>

其中的内容嵌套或者并列，就可以了。标签名、属性名和样式名具体有哪些？完全不用知道，用于Markdown只需要回归根本：

知道这串文字怎么来的足够了

而其他的..看完文章就理解的差不多了

链接和图片

链接格式：[显示的链接名称](你要放的链接网址)
图片格式：![显示的图片名称](你要放的图片网址)

很简单对吧，图片就是链接前面多加个感叹号"!"

当然少不了html的格式写法

<a title="显示的链接名称 "href="你要放的链接网址">中间放点其他东西</a>

标题

这是最简单的内容了,先说标准语法,后说html语法

N级标题（N<=6)：N个井号加个空格再加标题就是N级标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

####### 没有七级以及以上的标题，一篇文档可以有多个同级标题

你也可以用html的写法：<hN>N级标题</hN>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<h7>没有七级以及以上的标题，一篇文档可以有多个同级标题</h7>

因为博客主题的原因，有对标题样式的修改，与原始显示有差，所以放张标题原始样式图

"原始标准语法标题样式"

"原始html语法标题样式"

预格式化文本

在开讲段落之前，来先讲一下文本

普通文本大家肯定都会写，毕竟markdown中直接输入就行了。但如果多写一点你就会发现，总有那么些文本它不按你预想的那般输出呈现。

所以我来讲一个最特殊的问题：预先格式化好了的文本该怎么输出

假设李华接到了一个考验，他要在30秒内完成：将如下txt文本在markdown中完全一致地输出呈现出来：

# 这里不让呈现标题

[这里不让呈现链接](https://www.lunprin.com)

		我需要缩进TAB两次，并在接下来换行两次


<img alt="此标签不应该呈现出图片" src="https://cloud.lunprin.com/?explorer/share/file&hash=fb6azMbRbw7KgtjIRqNs7lH1tpKnxwMbQGB3r8syKb0s6amWMLfVNRIERXIIcqbdOw">

<pre><code><p>需要完整展示这些标签名</p></code></pre>

无论怎么写，都应该按输入的原始文本输出

当李华尝试直接Ctrl+C复制Ctrl+V粘贴时，他发现这文本一旦粘贴到markdown中，就仿佛遇水变大变高，瞬间被md解读的十分混乱。

他知道原因所在，想将相关字符全用转义字符的写法来规避，可是他只有30秒，30秒怎么可能转义替换的完。

那有没有什么方法，能快速解决这事？让预先格式化好的文本，经过复制粘贴再稍微处理一点点就能在markdown中原封不动地照搬呢？

标准markdown语法提供了两种方法，分别是：以缩进的方式展示 和 以代码的方式展示

	# 这原本会呈现为一个一级标题
	
	[这里本会呈现成链接](https://www.lunprin.com)
	
			我需要缩进TAB两次，并在接下来换行两次
	
	
	<img alt="这里本会呈现为图片" src="https://cloud.lunprin.com/?explorer/share/file&hash=fb6azMbRbw7KgtjIRqNs7lH1tpKnxwMbQGB3r8syKb0s6amWMLfVNRIERXIIcqbdOw">
	
	<pre><code><p>这里本无法展示标签名</p></code></pre>
	
	无论怎么写，都会按输入的原始文本输出

md会将缩进的行视为预格式化文本输出

```
# 这原本会呈现为一个一级标题

[这里本会呈现成链接](https://www.lunprin.com)

		我需要缩进TAB两次，并在接下来换行两次


<img alt="这里本会呈现为图片" src="https://cloud.lunprin.com/?explorer/share/file&hash=fb6azMbRbw7KgtjIRqNs7lH1tpKnxwMbQGB3r8syKb0s6amWMLfVNRIERXIIcqbdOw">

<pre><code><p>这里本无法展示标签名</p></code></pre>

无论怎么写，都会按输入的原始文本输出
```

md会将被``````包住的行视为代码块格式化文本输出

李华如果会这两种标准md写法，他就能快速暴力的通过考验了。

关于这种文本html+css的写法，见下一节复杂段落吧

复杂段落

预格式化文本看完了没？

如果看完了的话，思考一个问题，倘若上述txt预格式化文本中，另有文字颜色、文本对齐、字体大小等要求，移除时间限制，李华该如何通过考验。

显然，这些属性，在标准markdown语法中是无法定义的，或者说，md设计出来就没想弄这些多样的样式

在WPS Word文档里，你可以用工具栏来调整文字或者段落达到各种你想做到的样式。但是markdown与Word文档不同的一点是：你很难指定段落的具体格式

现在我想输入以下两个段落：

我要先段落首行缩进，然后我还要段中连续空格4下，我还想输入特殊文字比如"<"和"&lt"，随后我要写第二个段落，但是想先换行空出2行。
我想让两段落均呈现出"lightcoral"(大致为粉红色)的文字颜色，使用"Noto Serif SC"的字体。以上就是第二段内容，接下来想再弄一个右对齐的签名。

——这是右对齐的签名

就这么一段在word文档里可以轻松实现的文本，在markdown文档里想实现却很是困难，代码如下：

<pre style="color: lightcoral;font-family: Noto Serif SC;white-space: pre-wrap;">
&#9;我要先段落首行缩进，然后我还要段中    连续空格4下，我还想输入特殊文字比如"&lt;"和"&amp;lt"，随后我要写第二个段落，但是想先换行空出2行。
<br>
&#9;我想让两段落均呈现出"lightcoral"(大致为粉红色)的文字颜色，使用"Noto Serif SC"的字体。以上就是第二段内容，接下来想再弄一个右对齐的签名。
<p style="text-align: right; color: lightcoral;font-family: Noto Serif SC;white-space: pre-wrap;">——这是右对齐的签名</p></pre>

其中的 "	" 转义缩进字符(TAB) ， "<" 转义 '<' ， "&" 转义 '&'

至于为什么这么难写，原因有两个：

标准markdown语法不支持这些特殊的样式（比如右对齐），想实现这些只能靠markdown支持的html+css来实现
在html的标签中，如果出现“套娃”的标签，或者诸如“<"的特殊符号，会被电脑自动翻译的。想要输出这些特殊内容，就得需要用转义字符的方法处理这些，比如将“<”用“&lt”来替代防止被电脑误解。

在html中这标签<pre> </pre>,它的是，显示其中预先格式化的文本，也就是上一节讲的内容

不过很可惜的一点是，它虽然能原样显示文字的排列规律，但是对于特殊字符，它会自发的进行“多余的解释”，所以只能靠转义的写法去避免这种情况了

如果你要问我，有没有只用标准markdown不用html/css就能做到上述段落的写法？

我的回答只能是:都用markdown了，就别想着做太多的美化工作了，这种事md真做不了；想做样式美化那就只能用html+css救急了，或者打开你的WPS回归Word。

表格与流程图

标准markdown语法支持绘画简单的表格与流程图！

终于靠谱了一会了，不用倚靠html和css的力量也能做成一件有用的事了，倍感欣慰。~~不过你要是会写一点网页前端还是可以用html+css薄纱md~~

后续其他内容..

开鸽！

~~反正最难的文字格式化已经讲完了，其他的内容都是一查就会用，和这个难度都没法比~~

但是先为自己后续要补充的内容做一个提醒，也方便查漏补缺：

各种字体：比如斜体、粗体、删除线、下划线
引用（也称为区块）、列表（无序和有序）、代码框
补充链接中的高级链接注脚内容
补充讲解一下段落换行机制
完成表格、流程图构建代码

markdown语法教程