markdown排版效果

评论

来自这里

尝试学习一些markdown语法,以及一些效果,但是换成HTML之后可能就糊掉了,想不到解决方法

基础部分

typora能够实时渲染,所以记得开源代码显示器

标题

这个我不用多说吧

段落

除了这个回车之外

还有这个
换行或者shift+entet我
我

我

风格

以下代码能够实现换行,大概,放在最后一行

分割线

这样或者

这样

项

  • 无序项
    • 及其连环套
  • 简单吧
  1. 有序
    1. 同理
  2. 项

引用

引用

和交叉引用

很简单

对吧

层数

强调

包括加粗和斜体甚至可以这样

辅助线

删除和下划线

字体

使用 <font> 标签的修改字体

这里是默认字体

这里是黑体

这里是楷体

这里是扩展字体

使用 <font> 标签的修改字号

这里是默认正文字号

1号字 最小

2号字

3号字 默认

4号字

5号字

6号字

7号字 最大

前景色和背景色

使用 <font> 的标签的修改文字前景色

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

使用 style 属性修改文字的背景色

红色
绿色
蓝色

使用 rgb 颜色值

使用十六进制颜色值

更丰富背景样式

I wish you a Merry Christmas

使用图片作背景

太阳太阳，给我们带来，七色光彩

渐变背景色

行内代码和代码块

定义行内代码

行内的 html 代码：<head><title>网页标题</title></head>

行内的 json 代码：var json = {key: value};

使用反引号定义代码块

1
2
3
pubic static void main(String[] args) {
  System.out.println("Hello world");
}

超链接

声明超链接

一对中括号就可以将文字转换为超链接，如: 北京，上海，广州，深圳

声明超链接的细节

声明超链接的细节

天坛公园，是明清两代皇帝每年祭天和祈祷五谷丰收的地方。天坛以严谨的建筑布局、奇特的建筑构造和瑰丽的建筑装饰著称于世。

图片

使用全局声明方式插入图片


![][img2]

![][img2]

拓展

此时很多东西就需要有相应插件了,自己查看

任务列表

在 Markdown 文件中，在 " 无序列表 -,+,* " 后面使用 「中括号 []」 声明复选框。在中括号中写入 x ，便可实现选中效果。

就像是

复选框 checkbox

转义

在文档中使用特殊字符

如果不使用转义字符，以下算式将不能按预期输出
234=24
以上算式的正确写法为：
2*3*4=24

注释

基于 HTML 样式

这是一段被注释掉的文字

这是一段没有被注释的文字

通过 Markdown 解析达到注释效果

这是一段没有被注释的文字

表格

Markdown 表格包含三个部分：表头、分割线、数据。

  • 表头 用来对列名对象进行描述，也就是通常所说的列名；
  • 数据 用来展示每行的具体内容，数据是表格的核心；
  • 分割线 用来区分表头和数据，也是 Markdown 中表格定义的最基本语法要求。

表格内容的对齐

左对齐 居中对齐 右对齐
1 张三 17岁
2 李四 18岁
3 王五 19岁

流程图

纵向

1
2
graph TD
    开始 --> 结束

横向

1
2
graph LR
    开始 --> 结束

名字和内容分开

1
2
3
4
graph LR
    一号节点[在此输入希望在一号节点上显示的文字内容]
    二号节点[如常]
    一号节点 --> 二号节点

特殊形状

1
2
3
4
5
6
7
8
9
graph TD
 圆((节点显示文本))
 这种>也可以]
 长方形[或者]
 这个{菱形}
 我{{六角形}}
 平行四边形[/这个/]
 或者这种[\难以理解的脑洞/]

连接线

一般的

1
2
3
4
5
graph LR
    A --- B -- 带文字连接线 --- C
    B --> A
    C -.-> D
    E -.带文字也可以.-> f ==> A ==一样的 ==> C

更高级的

1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph 第一组
    a1-->a2
    end
    subgraph 第二组
    b1-->b2
    end
    subgraph 第三组
    c1-->c2
    end

时序图

类型 描述
-> 没有箭头的实线
–> 没有箭头的虚线
->> 有箭头的实线
-->> 有箭头的虚线
-x 有交叉箭头的实线
–x 有交叉箭头的虚线 
1
2
3
sequenceDiagram
    李雷 ->韩梅梅: Hi LiLei, How do you do?
    韩梅梅-->>李雷: How do you do!

别名

1
2
3
4
5
6
sequenceDiagram
    participant l as 李雷
    participant h as 韩梅梅
    l->>h: Hello Hanmeimei, how are you?
    h->>l: Hello Lilei, I am fine, thank you, and you?
    l-->h: I am fine, thank you.

添加备注

1
2
3
4
sequenceDiagram
    李雷->>韩梅梅: Hi Hanmeimei, How do you do?
    Note over 李雷,韩梅梅: Lesson 1
    韩梅梅-->>李雷: How do you do!

聚焦和另一种备注

1
2
3
4
5
6
7
8
9
10
sequenceDiagram
 participant l as 李雷
    participant h as 韩梅梅
    l->>h: Hello, what's your name?
    activate h
    h-->>l: Hello, my name is Hanmeimei!
    deactivate h
    Note left of l : test
    l->>+h:yeah 
    h->>-l :great

逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sequenceDiagram
 participant l as 李雷
    participant h as 韩梅梅
    l ->> h: Hello, what's your name?
    loop test 听到与否
     opt 听到了吗
         l->>h:can you hear me?
         alt yes
          h->>l: yeah
         else no
          h->>l: what
         end
     end
    end
    
    h ->> l :great

类图

包括用class或者关系声明类,用冒号声明类成员

1
2
3
4
5
6
7
classDiagram
    class 动物
    class 我
    动物 : 吃()
    动物 : 我
    我 --|> 动物
    我:另一个

更多声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
classDiagram
  class 银行账户 {
      +String 户主
      +BigDecimal 余额
      +存(数量)* bool
      +取(数量)- int
  }
  classA --|> classB : 继承
  classC --* classD : 组成
  classE --o classF : 集合
  classG --> classH : 关联
  classI -- classJ : 实线连接
  classK ..> classL : 依赖
  classM ..|> classN : 实现
  classO .. classP : 虚线连接

状态图

使用 <<fork>> 描述分支，使用 <<join>> 描述聚合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
stateDiagram
        [*] --> 下单成功
        下单成功 --> 备货
        state 出货中 <<fork>>
        备货 --> 出货中
        出货中 --> 出货失败
        出货失败 --> [*]
        出货中 --> 出货确认
        state 出货确认{
            出货中 --> NumLock关
            NumLock关 --> NumLock开 : 按下 NumLock 键
            NumLock开 --> NumLock关 : 按下 NumLock 键
            --
            出货中 --> CapsLock关
            CapsLock关 --> CapsLock开 : 按下 CapsLock 键
            CapsLock开 --> CapsLock关 : 按下 CapsLock 键
            --
            [*] --> ScrollLock关
            ScrollLock关 --> ScrollLock开 : 按下 ScrollLock 键
            ScrollLock开 --> ScrollLock关 : 按下 ScrollLock 键
        }
        出货确认 --> 出货完毕
        出货完毕 --> 订单完成
        订单完成 --> [*]

甘特图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
gantt
       dateFormat           :YYYY-MM-DD
       title                :甘特图实例

       section 基本任务
       已完成任务            :done,    des1, 2014-01-06,2014-01-08
       进行中任务            :active,  des2, 2014-01-09, 3d
       未开始任务1           :         des3, after des2, 5d
       未开始任务2           :         des4, after des3, 5d

       section 紧急任务
       已完成的紧急任务 :crit, done, 2014-01-06,24h
       已完成紧急任务1       :crit, done, after des1, 2d
       进行中紧急任务2       :crit, active, 3d
       未开始紧急任务3       :crit, 5d
       未开始一般任务4       :2d
       未开始一般任务5       :1d

       section 文档编写
       进行中文档任务1       :active, a1, after des1, 3d
       未开始文档任务2       :after a1  , 20h
       未开始文档任务3       :doc1, after a1  , 48h

       section 其他部分
       其他任务1            :after doc1, 3d
       其他任务2            :20h
       其他任务3            :48h

饼图

1
2
3
4
pie title 宠物的选择
    "狗" : 386
    "猫" : 185
    "兔子" : 15

上下标

如题不难但是test这个方式实际上不兼容

有一个更实用的HTML

abcd

数学公式

最基本的是这个,将等式包裹在$$里面

四则

加法符号：
减法符号：
加减符号：
减加符号：
叉乘符号：
点乘符号：
星乘符号：
除法符号：
斜除符号：
分式1 ：
分式2 ：
绝对值：

逻辑运算

等于符号：
大于符号：
小于符号：
大于等于符号：
小于等于符号：
不等于符号：
不大于等于符号：
不大于等于符号：
不小于等于符号：
不小于等于符号：
约等于符号：
恒定等于符号：

高级运算

平均数符号：

开二次方符号：

开方符号：

对数符号：

极限符号：

极限符号：

求和符号：

求和符号：

积分符号：

积分符号：

微分符号：\partial，如：

矩阵符号：

公式里的上下标

上标符号：
下标符号：
组合符号：

希腊字母

阿尔法：，
贝塔：，
伽玛：，
德尔塔：，
艾普西龙：，
捷塔：，
依塔：，
西塔：，
艾欧塔：，
喀帕：，
拉姆达：，
缪：，
拗：，
克西：，
欧麦克轮：，
派：，
柔：，
西格玛：，
套：，
宇普西龙：，
发艾：，
器：，
普赛：，
欧米伽：，

脚注

这里有一个脚注1。

这里有一个脚注2。

test

这里主要测数学公式

  1. 此处是 脚注 的 文本内容。↩︎

  2. 对吧↩︎

Noirking's Pawn

个人简介。