Markdown是一种纯文本格式的标记语言

优点:
1.因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作。
2.操作简单。比如:WYSIWYG编辑时标记个标题,先选中内容,再点击导航栏的标题按钮,选择几级标题。要三个步骤。而 Markdown只需要在标题内容前加#即可
缺点:
1.需要记一些语法(当然,是很简单。五分钟学会)。
2.有些平台不支持 Markdown 编辑模式。

1.标题

在想要设置为标题的文字前面加#来表示
一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。
注:标准语法一般在#后跟个空格再写文字。
示例如下:

#  这是一级标题
##  这是二级标题
###  这是三级标题
####  这是四级标题
·······

这是一级标题

这是二级标题

这是三级标题

这是四级标题

...

2.字体

要加粗的文字左右分别用两个*号包起来
要倾斜的文字左右分别用一个*号包起来
要倾斜和加粗的文字左右分别用三个*号包起来
要加删除线的文字左右分别用两个~~号包起来
示例如下:

**这是加粗的文字**
*这是倾斜文字*
***这是斜体加粗的文字***
~~这是加删除线的文字~~

这是加粗的文字
这是倾斜的文字
这是斜体加粗的文字
这是加删除线的文字

3.引用

我们可能希望对某段文字进行强调处理,Markdown提供了一个特殊符号>用于段首进行强调,被强调的文字部分将会高亮显示。引用也可以嵌套,如加两个 >> 三个>>> n个...
示例如下:

>这是引用的内容
>>这是引用的内容

这是引用的内容

这是引用的内容

4.分割线

三个或者三个以上的 - 或者*都可以。
示例如下:颜色有点浅,好像都差不多的

---
***


5.图片或链接

添加图片或链接,引用图片和链接的唯一区别就是在最前方添加一个感叹号
示例如下:

[点击跳转至百度](http://www.baidu.com)
![图片](https://youpaiyun.sangxuesheng.cn/%E8%99%8E%E5%B9%B4%E5%A8%83%E5%A8%83-01.png)

点击跳转至百度
图片

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.插入表格

  1. |、-、:之间的多余空格会被忽略,不影响布局。
  2. 默认标题栏居中对齐,内容居左对齐。
  3. -:表示内容和标题栏居右对齐,:-表示内容和标题栏居左对齐,:-:表示内容和标题栏居中对齐。
  4. 内容和|之间的多余空格会被忽略,每行第一个|和最后一个|可以省略,-的数量至少有一个。
    示例如下
name | 价格 |  数量  
-|-|-
香蕉 | $1 | 5 
苹果 | $1 | 6 
草莓 | $1 | 7
name111222333444
aaabbbcccdddeee
fffggghhhiii000
name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee 
fff | ggg| hhh | iii | 000

9.空格和换行

和HTML语言一致, & nbsp;< /br >

你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好 (空格)
</br>
你
好 (换行)

示例如下:

你       好 (空格)



好 (换行)

10.键盘按钮

使用 Ctrl+Alt+Del 重启电脑

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

11.各种标签

11.1 进度条
带有提示标签的进度条
将设置了 .sr-only 类的 标签从进度条组件中移除 类,从而让当前进度显示出来

60%

代码

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

0%
2%

代码

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


根据情境变化效果
进度条组件使用与按钮和警告框相同的类,根据不同情境展现相应的效果。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

代码

<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 及更低版本不支持。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

代码


<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 中,使它们呈现堆叠的效果。

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

代码

<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-02
    2021的小目标

    阅读10本书 :

    50%

    每天锻炼30分钟 :

    435%

代码

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

部分内容引用自爆胎
最后修改:2024 年 01 月 25 日
如果你喜欢,请随意赞赏