Markdown 的基础使用

Markdown 是一个 Web 上使用的文本到 HTML 的转换工具,可以通过简单、易读易写的文本格式生成结构化的 HTML 文档。目前 github、Stackoverflow 等网站均支持这种格式.

官方文档

  • Markdown 文件要以.md或者.markdown为后缀名
  • Markdown 文件可以导出为 word,html,pdf,image
  • MarkdownPad2, Typora 是通用的 Markdown 编辑工具
  • Markdown 支持和一些html标签一起使用

接下来描述一下常用的一些语法:

1. 标题样例

使用 # 来标记,# 与内容保留一个空格;可以选择性的闭合;
多一个#代表降一级(即字号小一级),总共有 6 级;分别对应h1 -h6

标题样例:

# 这是一级标题
## 这是二级标题
...
###### 这是六级标题

题效果:

这是一级标题

这是二级标题

这是三级标题

这是四级标题
这是五级标题
这是六级标题

2. 字体样例

  • 斜体

    斜体的内容需要使用一对下划线 _ 或者一对星号 * 进行包裹(部分编辑器会强制转换 _ 包裹);
    标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;
    .md文件中可以直接使用部分标签

    斜体样例: _斜体_ 或者 *斜体* 或者 <em>斜体</em>

    斜体效果: 斜体, 斜体, 斜体

  • 加粗

    加粗的内容需要使用两个星号 ** 或者两个下划线 __ 进行包裹(部分编辑器会强制转换 ** 包裹)
    标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;
    当页面加载时会被转成 html<strong>标签

    粗体样例: **粗体** 或者 __粗体__ 或者 <strong>粗体</strong>

    粗体效果: 粗体, 粗体, 粗体

  • 斜体加粗

    斜体加粗的内容需要使用两个星号和一个下划线 **_ 进行对称包裹;
    标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;

    斜体加粗样例: **_斜体加粗_** 或者 ***斜体加粗*** 或者 ___斜体加粗___

    斜体加粗效果:斜体加粗, 斜体加粗, 斜体加粗

  • 删除线

    增加删除线的内容需要使用两对波浪号 ~~ 进行包裹
    标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;

    删除线样例:~~删除线~~

    删除线效果:删除线

  • 下划线

    下划线是使用前端标签的方式

    下划线样例:<u>下划线</u>
    下划线效果:下划线

  • 注解

    添加注解形式的文本

    注解文字样例:这里是一个 [^Markdown]:一种标记语言

    注解文字效果:

    这里是一个 1


3. 区块引用样例

区块引用,就是描述内容标记为一个模块;Markdown 标记区块引用是使用 > 的引用方式
区块里面可以嵌套使用其他的样式

区块应用样例:

> 1. 这是一段详细的描述...
> 2. 这是描述的内部的引用...
> > 这是描述的内部的引用...

效果如下:

  1. 这是一段详细的描述…
  2. 这是描述的内部的引用…

这是描述的内部的引用…

4. 分割线样例

一条浅灰色的实线,使用三个及以上数量的星号***或者三个及以上数量减号---或者三个及以上数量下划线___进行标识,部分编辑器强制变更为减号,依据当前位置上下文环境;注意该行内不能有其他的元素

例如:

    ***
    ---
    ___

效果如下:


5. 图片样例

图片加载至支持使用网络图片,使用![alt](image_url "title"),和超链接有些相似,相对超链接就是增加了一个 !进行标识;

注意: urltitle之间不需要加,

图片样例:

![This is image](http://inews.gtimg.com/newsapp_match/0/359390627/0 "这是一张图片!")

图片效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UllGXp6C-1586745758669)(http://inews.gtimg.com/newsapp_match/0/359390627/0 “这是一张图片!”)]

6. 超链接样例

使用文字描述,支持点击进行跳转,使用 [desc](url "title"),或者直接给出(url)和图片有些相似;
当页面加载时会被转成 html<a> 标签

注意: urltitle之间不需要,

超链接样例:

[Typora官网](https://typora.io/ "Typora官网")
或者
<https://typora.io/>

超链接效果:

Typora 官网

https://typora.io/

7. 列表样例

  • 有序列表样例

    有序列表:使用 1.,2.,3.,…,注意序号和内容之间需要空格分隔;

    有序列表样例:

    1. title
    2. font
    3. image
    

    有序列表效果:

    1. title
    2. font
    3. image
  • 无序列表样例

    无序列表: +,-,*,…排下去,不需要排序,部分编辑器会自动强制,注意序号和内容之间需要空格分隔;

    无序列表样例:

    - 超链接
    * 代码
    - 逻辑条件
    

    无序列表效果:

    • 超链接
    • 代码
    • 逻辑条件

8. 代码样例

代码样式有两种:

单行代码和多行代码(两者的区别就是多行样式中区分间距和换行,保留代码块的样式,而单行则忽略);

  • 单行代码:使用一对反向单引号 `` 包裹起来; 当页面加载时会被转成htmlp` 标签;
`This is a example ......`

单行代码效果:

This is a example ......

  • 多行代码:使用三对反向单引号```包裹起来;这种模式下支持多语言:c,java,php,js,python…几乎所有开发语言)
​```java     // 这里指定代码的语言
public static void main(String[] args){
    System.out.print("Hello world !")
}

多行代码效果:

public static void main(String[] args){
   System.out.print("Hello world !")
}

9. 表格

表格使用 | tab | tab | tab |...|声明表头字段;
表格使用 | :-- | :-: | --: |...|申明表单中对应列中的内容对其方式,冒号在左侧即左对齐,在右侧即右对齐,在两侧即居中;
表格使用 |value|value|value|...|插入数据;

表格样例:

| name   | age | gender | user_info                   |
| :----  | --: | :----: | :---------------------------|
| Jack   |  18 |   男   | 高高高 de 一批............... |
| Leo    |  10 |   女   | 富富富 de 一批............... |
| Suxan  |  28 |   男   | 帅帅帅 de 一批............... |

表格效果:

nameagegenderuser_info
Jack18高高高 de 一批…
Leo10富富富 de 一批…
Suxan28帅帅帅 de 一批…

10. 流程图

我擦,这个好强大…直接看例子: 不过 github 好像不支持显示

​```mermaid
flowchat
st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
&```

效果:

Created with Raphaël 2.2.0 开始 My Operation Yes or No? End yes

工具: 推荐使用typora,官网下载 下滑至"Download" module 选择对应的版本

块与嵌套:

Title

  • This is title : A;

    content;
    1. content;
    2. content;
  • This is title : B

    content;

    • content;
    • content;

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AeDekzmW-1586745758672)(https://tse1-mm.cn.bing.net/th?id=OIP.uUT5wt6VDHJ7zAFDru9IvQHaHa&w=156&h=160&c=8&rs=1&qlt=90&pid=3.1&rm=2)]

This is title : c

链接content;


  1. ↩︎
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值