日常 Markdown 语法记录

1、文字

!>(空格)文字 表示黄色警告框

!> 文字 表示黄色警告框

i>(空格)文字 表示蓝色信息框

i> 文字 表示蓝色信息框

@>(空格)文字 表示银色引用框

@> 文字 表示银色引用框

x>(空格)文字表示红色错误框

x> 文字表示红色错误框

√>(空格)文字 表示绿色成功框

√> 文字 表示绿色成功框

抖动文字
<div class="shaky">这里是你需要抖动的文字!</div>

[tag type="dark"]<div class="shaky">这里是你需要抖动的文字!</div>[/tag]

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
[tag type="danger"]注意:tag 需要加方框 [ ][/tag]
2、图片居中缩小
<img src="图片地址" width = 30% height = 30% div align=center />

参数:位置 align=center(中)、right(右),大小 width = 30%(大小比例) height = 30%(大小比例)

3、超级链接
[超链接名](超链接地址 "鼠标悬浮文字")
4、图片
![图片描述](图片地址 "鼠标悬浮文字")
5、表格

表格公式

表头|表头|表头
:--|:--:|--:
内容|内容|内容
内容|内容|内容

表格参数
--: 设置内容和标题栏居右对齐。
:-- 设置内容和标题栏居左对齐。
:--:设置内容和标题栏居中对齐。

6、字体

1、 删除线 文字前后加 ~~

~~这是要删除的文字~~

2、 斜体 文字前后加 *

*这是斜体文字*

3、 加粗 文字前后加 **

**这是加粗文字**

4、 斜体加粗 文字前后加 *

***这是加粗斜体文字***

7、代码

1、 单行代码 代码前后加 ` (~键)
2、 多行分段 代码前后加 `(三个)

8、隐藏某行文字

<!-- 此行文字不显示 -->

9、警告框

警告框组件通过提供一些灵活的预定义消息
<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>

<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>
10、可用的变体

用下面的任何一个类即可改变标签的外观
DefaultPrimarySuccessInfoWarningDanger

<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、进度条

1、堆叠效果
把多个进度条放入同一个.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>
[collapse status="false" title="代码"]

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

[/collapse]
2、动画效果
为 .progress-bar-striped 添加 .active 类,使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持
<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>
[collapse status="false" title="代码"]

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

[/collapse]
3、条纹效果
通过渐变可以为进度条创建条纹效果,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>
[collapse status="false" title="代码"]

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

[/collapse]
4、根据情境变化效果
进度条组件使用与按钮和警告框相同的类,根据不同情境展现相应的效果。
<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>
[collapse status="false" title="代码"]

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

[/collapse]
5、低百分比进度条
展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 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>
[collapse status="false" title="代码"]

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

[/collapse]
6、带有提示标签的进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

60%

</div>
</div>
[collapse status="false" title="代码"]

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

[/collapse]

12、键盘按钮

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

13、上下标注

演示如下:
H2O CO2
210
代码如下:

H<sub>2</sub>O  CO<sub>2</sub>
2<sup>10</sup>

简单代码录入如上,更多高级使用方法,请找谷歌/度娘

标签:Markdown 语法 上篇:代码解除网页右键/复制/快捷键限制 下篇:疫情还在,征程开始

4 条评论

  1. 小有名气的男士 小有名气的男士

    请问警示框是怎么在typora编辑器里用?

    1. i>(空格)文字 表示蓝色信息框

  2. 花野猫 花野猫

    想问问博主警示框的那个 markdown 解析是怎么做的呢

    1. 这个问题有点专业,需要专业人士回答 ::twemoji:bigsmile::

2020-02-25

阿里云虚拟主机安装Typecho

2018-12-08

拥有过的手机

2022-09-20

不完美的完美

2022-09-28

登封少林路,没有和尚

2019-11-01

此内容被密码保护

2020-12-16

倒腾一波米

2020-10-02

此内容被密码保护

2022-09-22

AI 作业记录

2022-01-07

超大空间,不限速!值得尝试

2021-11-24

解读“内卷”

2021-10-23

名人贴标签

2022-09-08

逃离枷锁,寻找大海

2010-01-20

此内容被密码保护

2019-12-11

《前任3 再见前任》催泪的结尾

2020-01-23

2020 新年集卡活动

2022-07-22

虎妞手账分享之一

2018-10-10

考驾照那些事

2019-12-10

《下一站,别离》经历和结果