All in the game. Markdown是一种纯文本格式的标记语言
优点：
1.因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。
2.操作简单。比如:WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而 Markdown只需要在标题内容前加#即可
缺点：
1.需要记一些语法（当然，是很简单。五分钟学会）。
2.有些平台不支持 Markdown 编辑模式。
1.标题
在想要设置为标题的文字前面加#来表示
一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。
注：标准语法一般在#后跟个空格再写文字。
示例如下：
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
·······这是一级标题
这是二级标题
这是三级标题
这是四级标题
...
2.字体
要加粗的文字左右分别用两个*号包起来
要倾斜的文字左右分别用一个*号包起来
要倾斜和加粗的文字左右分别用三个*号包起来
要加删除线的文字左右分别用两个~~号包起来
示例如下:
**这是加粗的文字**
*这是倾斜文字*
***这是斜体加粗的文字***
~~这是加删除线的文字~~这是加粗的文字
这是倾斜的文字
这是斜体加粗的文字这是加删除线的文字
3.引用
我们可能希望对某段文字进行强调处理，Markdown提供了一个特殊符号>用于段首进行强调，被强调的文字部分将会高亮显示。引用也可以嵌套，如加两个 >> 三个>>> n个...
示例如下：
>这是引用的内容
>>这是引用的内容这是引用的内容
这是引用的内容
4.分割线
三个或者三个以上的 - 或者*都可以。
示例如下：颜色有点浅，好像都差不多的
---
***5.图片或链接
添加图片或链接，引用图片和链接的唯一区别就是在最前方添加一个感叹号
示例如下:
[点击跳转至百度](http://www.baidu.com)
6.列表
Markdown支持有序列表和无序列表两种形式，注意：- + 跟内容之间都要有一个空格。无序列表使用 或+ 或-标识，符号后加空格。有序列表使用数字加.示例如下:
- 列表内容
+ 列表内容
* 列表内容
1.列表内容
2.列表内容
3.列表内容- 列表内容
- 列表内容
- 列表内容
1.列表内容
2.列表内容
3.列表内容
7.代码块
使用反引号`进行包裹即可。如果是行内代码引用，使用单个反引号进行包裹，整段代码用三个包裹，并在后面标记语言，很多人不知道怎么输入反引号。在英文模式下，找到键盘最左侧esc键下面的第一个键点击即可。示例如下
行内代码
<!DOCTYPE HTML> 这是HTML ```HTML
<html class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>编辑 Markdown 编辑器语法指南 - Flat tire - Powered by Typecho</title>
<meta name="robots" content="noindex, nofollow">
</body>
</html>
<?php $this->need('includes/hero.php'); ?> 这是PHP ```PHP
<div class="All_Page_width">
<div class="All_Page_title">
#标签云
</div>
<?php $this->widget('Widget_Metas_Tag_Cloud', 'sort=count&ignoreZeroCount=1&desc=1&limit=50')->to($tags); ?>
<div class="Tags_Cloud">
<?php $this->content(); ?>
<?php if ($tags->have()) : ?>
<?php while ($tags->next()) : ?>8.插入表格
- |、-、:之间的多余空格会被忽略，不影响布局。
- 默认标题栏居中对齐，内容居左对齐。
- -:表示内容和标题栏居右对齐，:-表示内容和标题栏居左对齐，:-:表示内容和标题栏居中对齐。
- 内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。
示例如下
name | 价格 | 数量
-|-|-
香蕉 | $1 | 5
苹果 | $1 | 6
草莓 | $1 | 7| name | 111 | 222 | 333 | 444 |
|---|---|---|---|---|
| aaa | bbb | ccc | ddd | eee |
| fff | ggg | hhh | iii | 000 |
name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee
fff | ggg| hhh | iii | 0009.空格和换行
和HTML语言一致， & nbsp;< /br >
你 好 （空格）
</br>
你
好 （换行）示例如下：
你 好 （空格）
你
好 （换行）
10.键盘按钮
使用 Ctrl+Alt+Del 重启电脑
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑11.各种标签
11.1 进度条
带有提示标签的进度条
将设置了 .sr-only 类的 标签从进度条组件中移除 类，从而让当前进度显示出来
代码
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>低百分比进度条
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置
min-width 属性代码
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>根据情境变化效果
进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。
代码
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
条纹效果
通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。
代码
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>堆叠效果
把多个进度条放入同一个
.progress 中，使它们呈现堆叠的效果。代码
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>11.2可用的变体
用下面的任何一个类即可改变标签的外观Default Primary Success Info Warning Danger
代码
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>11.3 警告框
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。
...
...
...
...
代码
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>12文章段落内引入图标
<i class="iconfont icon-github"></i>
<i class="iconfont icon-weixin"></i>
<i class="iconfont icon-aiqiyi"></i>
<i class="iconfont icon-zhifubao"></i>13 文章段落symbol 引用
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-denglong"></use>
</svg>14 外链卡片调用
1.1. title：必填，外链的名称/标题
1.2. url：必填，外链的地址（请填写绝对地址，就是浏览器地址栏什么样的就填什么样的）
1.3. intro：（可选）外链网站的简介/介绍
1.4. cover：（选填）外链网站的介绍图片地址
代码
[
post url="https:\/\/www.ihewro.com" title="友人C" intro="一个个人博客" cover="https://**.png" /
]15标签tag
默认白色文字
紫色文字
蓝色文字
黄色文字
红色文字
绿色文字
黑色文字
代码
[
tag]默认白色文字[/tag]
[
tag type="primary"]紫色文字[/tag]
[
tag type="info"]蓝色文字[/tag]
[
tag type="warning"]黄色文字[/tag]
[
tag type="danger"]红色文字[/tag]
[
tag type="success"]绿色文字[/tag]
[
tag type="dark"]黑色文字[/tag]16时间线
2020大事记
2020-1-20
武汉封城，疫情让一起变得慌乱起来
2020-3-20
开始远程办公，慢慢有序起来
生活变得好起来了
2020-10-1
国庆节去哈尔滨旅行，和老同学见面
代码
[timeline title="2020大事记" type="small" start="梦开始的地方" end="新的一年开始"]
[item date="2020-1-20"] 武汉封城，疫情让一起变得慌乱起来 [/item]
[item date="2020-3-20"] 开始远程办公，慢慢有序起来[/item]
[item]生活变得好起来了[/item]
[item date="2020-10-1"] 国庆节去哈尔滨旅行，和老同学见面[/item][/timeline]17计划表
计划表中包含了三种类型的任务：
- check类型，该类型任务只有两种状态，完成和未完成
- progress，该类型任务可以显示任务执行的进度，需要手动填写进度
- start、end，该类型任务设置一个起始时间和终止时间，进度会根据当前时间自动更新进度
- 时间格式：必须是正确的时间格式，比如2021-01-02 12:00 ，也可以只写日期2021-01-022021的小目标
阅读10本书 ：
每天锻炼30分钟 ：
代码
[goal title="2021的小目标"]
[item check="true"] 每天早睡 [/item]
[item check="false"] 每天早起 [/item]
[item progress="50%"] 阅读10本书 [/item]
[item start="2021-01-02" end="2021-10-1"] 每天锻炼30分钟 [/item]
[/goal]18视频播放器
有两款代码可以实现
效果1：不能全屏
代码
<iframe align="center" width="100%" height="500px" src="https://bili.sangxuesheng.com/player/?url=（视频链接）"frameborder="no" border="0" scrolling="no"marginwidth="0" marginheight="0" ></iframe>效果2： 可以全屏
代码
<iframe src="https://bili.sangxuesheng.com/player/?url=(视频链接)" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" width="100%" height="600px" frameborder="0"></iframe>可以解析bilibi
<iframe src="https://jx.parwix.com:4433/player/?url=(视频链接)" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" width="100%" height="500px" frameborder="0"></iframe>19视频播放器
方法1
代码
[vplayer url="http://xxx.com/xxx.mp4" pic="http://xxx.com/xxx.png"]方法2
默认使用的第三方云解析视频地址
https://okjx.cc/?url=，支持b站、爱奇艺、优酷等常见平台 剧集列表
代码
[vplayer status="true"]
[Video url="https://www.bilibili.com/video/BV1Bi4y1d7if" title="抱歉 Louis C.K.: Sorry (2021) " /]
[Video url="https://www.bilibili.com/video/BV1RL4y1J7wJ" title="一根弦" /]
[/vplayer]20挂载bilibili
<div class="video">
<iframe src="//player.bilibili.com/player.html?aid=657099346&bvid=BV1Lh4y1R798&cid=1158402282&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>21折叠内容
<details> <summary>Title</summary>
contents ...
</details>内容里面可以嵌套使用 Markdown 语法和 HTML 语法。
效果： Title
contents ...
View Code
code ...
部分内容引用自爆胎
19 条评论
真好呢
你的文章内容非常卖力，让人点赞。 https://www.yonboz.com/video/92723.html
你的文章让我感受到了生活的美好，谢谢！
你好，第16个时间线的代码需要更新一下了，我这边输入解析不出来，我不太清楚怎么回事
源代码
武汉封城，疫情让一起变得慌乱起来
开始远程办公，慢慢有序起来
国庆节去哈尔滨旅行，和老同学见面
那个表格的线看不到有什么解决方法吗我的也是这样
可以的呀，我下面放了模板了.
你的视频解析是怎么做出来的，可以参考吗？
播放器源码我放到网盘了,可以自取,不会的可以问我哈?
https://www.xn--9qr844m.cn:5244/d/%E6%9C%AC%E5%9C%B0/%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98%E8%B5%84%E6%96%99%E5%A4%87%E4%BB%BD%E5%85%B1%E4%BA%AB/%E7%BD%91%E7%AB%99%E4%B8%8A%E4%BC%A0%E9%99%84%E4%BB%B6/%E6%92%AD%E6%94%BE%E5%99%A8.zip
非常感谢
相互学习哈！
嗯呢
18的两个是自己搭建的播放器,19第二个是8.4版本新增的
18的看着得劲，我也想自己搭建，但是没有找到参考的地方
OωO
1