Markdown语法还不太熟悉，特意整理一番，方便翻阅

优点：

1.因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。
2.操作简单。比如:WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即可

 
缺点：

1.需要记一些语法（当然，是很简单。五分钟学会）。
2.有些平台不支持Markdown编辑模式。

 

1.标题

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

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

这是一级标题

这是二级标题

这是三级标题

这是四级标题

·······

 

2.字体

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

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

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

 

3.引用

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

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

这是引用的内容

这是引用的内容

 

4.分割线

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

---
***

 

5.图片或链接

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

[点击跳转至百度](http://www.baidu.com)
![图片](https://itggg.cn/cdn/admin.svg)

点击跳转至百度
图片

 

6.列表

Markdown支持有序列表和无序列表两种形式，注意：- + * 跟内容之间都要有一个空格。无序列表使用*或+或-标识，符号后加空格。有序列表使用数字加.示例如下:

- 列表内容
+ 列表内容
* 列表内容

1.列表内容
2.列表内容
3.列表内容
  • 列表内容
  • 列表内容
  • 列表内容

1.列表内容
2.列表内容
3.列表内容

 

7.代码块

使用反引号`进行包裹即可。如果是行内代码引用，使用单个反引号进行包裹，整段代码用三个包裹，并在后面标记语言，很多人不知道怎么输入反引号。在英文模式下，找到键盘最左侧esc键下面的第一个键点击即可。示例如下

行内代码  <meta charset="UTF-8">

<!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
name价格数量
香蕉$15
苹果$16
草莓$17
name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee 
fff | ggg| hhh | iii | 000
name111222333444
aaabbbcccdddeee
fffggghhhiii000

 

9.空格和换行

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

你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好 （空格）
</br>
你好 （换行）

示例如下

你       好 （空格）


你好 （换行）

 

10.键盘按钮

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

使用 Ctrl+Alt+Del 重启电脑

Q

 

11.各种标签

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

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-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持

45% Complete

代码 

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</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>
最后修改：2024 年 10 月 08 日
© 允许规范转载
钥匙你想请我喝酱香拿铁的话！