markdown基本文字效果

复制自@果冻虾仁

该文件用来测试和展示书写README的各种markdown语法。GitHub的markdown语法在标准的markdown语法基础上做了扩充，称之为GitHub Flavored Markdown。简称GFM，GFM在GitHub上有广泛应用，除了README文件外，issues和wiki均支持markdown语法。

列表目录+超链接：

• 横线
• 标题
• 文本
  • 普通文本
  • 单行文本
  • 多行文本
  • 文字高亮
  • 换行
  • 斜体
  • 粗体
  • 删除线
• 图片
  • 来源于网络的图片
  • GitHub仓库中的图片
• 链接
  • 文字超链接
    • 链接外部URL
    • 链接本仓库里的URL
  • 锚点
  • 图片链接
• 列表
  • 无序列表
  • 有序列表
  • 复选框列表
• 块引用
• 代码高亮
• 表格
• 表情
• diff语法

横线

***、—、___可以显示横线效果

***
---
___

标题

# 一级标题  
## 二级标题  
### 三级标题  
#### 四级标题  
##### 五级标题  
###### 六级标题  

文本

• 普通文本

这是一段普通的文本

• 单行文本 Hello,大家好，我是果冻虾仁。

在一行开头加入1个Tab或者4个空格。

文本块

• 语法1

在连续几行的文本开头加入1个Tab或者4个空格。

欢迎到访
很高兴见到您
祝您，早上好，中午好，下午好，晚安

• 语法2

使用一对各三个的反引号：

欢迎到访
我是C++码农
你可以在知乎、CSDN、简书搜索【果冻虾仁】找到我

该语法也可以实现代码高亮，见代码高亮

文字高亮

文字高亮功能能使行内部分文字高亮，使用一对反引号。 语法：

`linux` `网络编程` `socket` `epoll` 

效果：linux 网络编程 socket epoll

也适合做一篇文章的tag

换行

直接回车不能换行，
可以在上一行文本后面补两个空格，
这样下一行的文本就换行了。

或者就是在两行文本直接加一个空行。

也能实现换行效果，不过这个行间距有点大。

斜体、粗体、删除线

斜体、粗体、删除线可混合使用

图片

基本格式：

![alt](URL title)

alt和title即对应HTML中的alt和title属性（都可省略）：

• alt表示图片显示失败时的替换文本
• title表示鼠标悬停在图片时的显示文本（注意这里要加引号）

URL即图片的url地址，如果引用本仓库中的图片，直接使用相对路径就可了，如果引用其他github仓库中的图片要注意格式，即：仓库地址/raw/分支名/图片路径，如：

https://github.com/guodongxiaren/ImageCache/raw/master/Logo/foryou.gif

#	语法	效果
1	
2	![][code-past]

注意例2的写法使用了URL标识符的形式，在链接一节有介绍。

在文末有code-past的定义：

[code-past]:/img/codepast-logo.jpg "公众号：编程往事"

链接外部URL

语法2由两部分组成：

• 第一部分使用两个中括号，[ ]里的标识符（本例中zhihu），可以是数字，字母等的组合，标识符上下对应就行了（姑且称之为URL标识符）
• 第二部分标记实际URL。

使用URL标识符能达到复用的目的，一般把全文所有的URL标识符统一放在文章末尾，这样看起来比较干净。除了干净之外，它还能达到复用的目的，比如你在多个地方想使用同一个链接，那么文内使用标识符，只在最底部给标识符定义出实际的URL链接即可，类似编程语言中的变量。

URL标识符是我起的名字，不知道是否准确。囧。。

链接本仓库里的URL

图片链接

给图片加链接的本质是混合图片显示语法和普通的链接语法。普通的链接中[ ]内部是链接要显示的文本，而图片链接[ ]里面则是要显示的图片。
直接混合两种语法当然可以，但是十分啰嗦，为此我们可以使用URL标识符的形式。

#	语法	效果
1	[![weibo-logo]](http://weibo.com/linpiaochen)
2	[][zhihu]
3	[![csdn-logo]][csdn]

因为图片本身和链接本身都支持URL标识符的形式，所以图片链接也可以很简洁（见例3）。
注意，此时鼠标悬停时显示的文字是图片的title，而非链接本身的title了。

本文URL标识符都放置于文末

锚点

其实呢，每一个标题都是一个锚点，和HTML的锚点（#）类似，比如我们

不过要注意，标题中的英文字母都被转化为小写字母了。

以前GitHub对中文支持的不好，所以中文标题不能正确识别为锚点，但是现在已经没问题啦！

列表

* 昵称：果冻虾仁
- 别名：隔壁老王
* 英文名：Jelly

• 编程语言
  • 脚本语言
    • Python

面向对象的三个基本特征：

1. 封装

2. 继承

3. 多态

4. 这是一级的有序列表，数字1还是1

   1. 这是二级的有序列表，阿拉伯数字在显示的时候变成了罗马数字
      1. 这是三级的有序列表，数字在显示的时候变成了英文字母

复选框列表

• 需求分析
• 系统设计
• 详细设计
• 编码
• 测试
• 交付

您可以使用这个功能来标注某个项目各项任务的完成情况。

Tip:

在GitHub的issue中使用该语法是可以实时点击复选框来勾选或解除勾选的，而无需修改issue原文。

块引用

文本摘自《深入理解计算机系统》P27
　令人吃惊的是，在哪种字节顺序是合适的这个问题上，人们表现得非常情绪化。实际上术语“little endian”（小端）和“big endian”（大端）出自Jonathan Swift的《格利佛游记》一书，其中交战的两个派别无法就应该从哪一端打开一个半熟的鸡蛋达成一致。因此，争论沦为关于社会政治的争论。只要选择了一种规则并且始终如一的坚持，其实对于哪种字节排序的选择都是任意的。

“端”（endian）的起源
以下是Jonathan Swift在1726年关于大小端之争历史的描述：
“……下面我要告诉你的是，Lilliput和Blefuscu这两大强国在过去36个月里一直在苦战。战争开始是由于以下的原因：我们大家都认为，吃鸡蛋前，原始的方法是打破鸡蛋较大的一端，可是当今的皇帝的祖父小时候吃鸡蛋，一次按古法打鸡蛋时碰巧将一个手指弄破了，因此他的父亲，当时的皇帝，就下了一道敕令，命令全体臣民吃鸡蛋时打破较小的一端，违令者重罚。”

• 块引用有多级结构

> 数据结构
>> 树
>>> 二叉树
>>>> 平衡二叉树
>>>>> 满二叉树

数据结构

树

二叉树

平衡二叉树

满二叉树

代码高亮

在三个反引号后面加上编程语言的名字，另起一行开始写代码，最后一行再加上三个反引号。

public static void main(String[]args){} //Java

int main(int argc, char *argv[]) //C

echo "hello GitHub" #Bash

document.getElementById("myH1").innerHTML="Welcome to my Homepage"; //javascipt

string &operator+(const string& A,const string& B) //cpp

表格

表格可以指定对齐方式

混合其他语法

表格单元中的内容可以和其他大多数GFM语法配合使用，如：

• 使用普通文本的删除线，斜体等效果

• 表格中嵌入图片（链接） 其实前面介绍图片显示、图片链接的时候为了清晰就是放在在表格中显示的。

图片	描述
	百度

diff语法

版本控制的系统中都少不了diff的功能，即展示一个文件内容的增加与删除。 GFM中可以显示的展示diff效果。使用绿色表示新增，红色表示删除。

其语法与代码高亮类似，只是在三个反引号后面写diff， 并且其内容中，可以用 + 开头表示新增，- 开头表示删除。 另外还有有 !和#的语法。

+ 人闲桂花落，
- 夜静春山空。
! 月出惊山鸟，
# 时鸣春涧中。

下面的内容使用Markdown创作完成并由Jekyll自动转换为网页内容。如果第一次听说，可是花几分钟看看 Markdown基本语法。

演示内容

演示内容

演示内容

演示内容

表格：

markdown语法插入图片

代码块：

var foo = function(x) {
  return(x + 5);
}
foo(3)

数学公式

嵌入形式公式：

也就是$ \boldsymbol{\alpha} = \boldsymbol{E\cdot\alpha} $这个式子默认了向量$ \boldsymbol{\alpha} $单独出现的时候，其坐标是对于坐标系$ \boldsymbol{E} $而言的，这是个很重要的思路，在坐标变换、后面的矩阵对角化用会强化这个角度的思考。

复杂的数学公式：

$$ \ln c, \lg d = \log e, \log_{10} f $$

$$\lim_{x \to \infty} \frac{1}{n(n+1)}$$

$$\sqrt[3]{\frac{x^3+y^3}{2}}$$

$$\begin{matrix} 5050 \ \overbrace{ 1+2+\cdots+100 } \end{matrix}$$

$$\oint_{C} x^3, \mathrm{d}x + 4y^2, \mathrm{d}y$$

$$ \begin{bmatrix} 0 & \cdots & 0 \ \vdots & \ddots & \vdots \ 0 & \cdots & 0 \end{bmatrix} $$

$$ \left[ \begin{array}{cc|c} 1&2&3\ 4&5&6 \end{array} \right] $$

复杂表格

|:—–:|:—–:|:—–:|:—–:| —- | | (0,0) | (0,1) | (0,2) | (0,3) | | | (1,0) || ^^ | (1,3) | |

|:—–:|:—–:|:—–:|:—–:| —- | | (0,0) | (0,1) | (0,2) | (0,3) | | | (1,0) ||| (1,3) ||

|:—–:|:—–:|:—–:|:—–:| —- | | (0,0) | (0,1) | (0,2) | (0,3) | | | (1,0) ||| ^^ | |

|:—–:|:—–:|:—–:|:—–:| —- | | (0,0) | (0,1) | (0,2) | (0,3) |
| (1,0) ||| ^^ | |

{:color-style: style=“background: black;” } {:color-style: style=“color: white;” } {:font-style: style=“font-weight: 900; text-decoration: underline;” }

Heading	Column 1	Column 2
Row 1	Apple1	Youtube (Home)
Row 2	Banana	Github
Row 3 (merged)	Blueberry	Google ***** Github
^^	Plum	Raspberry
Row 4	https://www.google.com	test{:target="_blank"}
^^	^^ https://www.youtube.com
Row 5	https://www.google.com

https://www.google.com

Not in table: <Mail Gateway>

In table:

9 * 9

| 1 * 1 = 1 | | 1 * 2 = 2 | 2 * 2 = 4 | | 1 * 3 = 3 | 2 * 3 = 6 | 3 * 3 = 9 | | 1 * 3 = 3 | 2 * 3 = 6 | 3 * 4 = 12 | 4 * 4 = 16 |

Emoji表情

:+1: :kissing_closed_eyes: :flushed: :relieved: :grin: :wink: :stuck_out_tongue_winking_eye:

PlantUML画图插件

https://plantuml.com/

• 顺序图

@startuml Alice -> Bob: Authentication Request Bob –> Alice: Authentication Response

Alice -> Bob: Another authentication Request Alice <– Bob: Another authentication Response @enduml

Bob -> Alice : hello world

@startuml (*) –> “Initialization”

if “Some Test” then –>[true] “Some Activity” –> “Another activity” -right-> () else ->[false] “Something else” –>[Ending process] () endif @enduml

@startuml skinparam handwritten true

skinparam usecase { BackgroundColor DarkSeaGreen BorderColor DarkSlateGray

BackgroundColor« Main » YellowGreen BorderColor« Main » YellowGreen

ArrowColor Olive ActorBorderColor black ActorFontName Courier

ActorBackgroundColor« Human » Gold }

User « Human » :Main Database: as MySql « Application » (Start) « One Shot » (Use the application) as (Use) « Main »

User -> (Start) User –> (Use)

MySql –> (Use)

@enduml

pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35

@startmermaid sequenceDiagram Alice -» Bob: Hello Bob, how are you? Bob–»John: How about you John? Bob–x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

Bob–>Alice: Checking with John… Alice->John: Yes… John, how are you? @endmermaid

graph TD
A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
  +String beakColor
    +swim()
    +quack()
}
class Fish{
  -int sizeInFeet
    -canEat()
}
class Zebra{
  +bool is_wild
    +run()
}

stateDiagram
[*] --> Still
Still --> [*]

Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

链接视频

1.直接使用B站的嵌入代码，加上宽高属性。

2.使用Markdown链接语法

插入音频

MP3文件 (".mp3") :

WAV文件(".wav") :