前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Markdown上手指南

Markdown上手指南

作者头像
CRPER
发布2019-12-12 15:32:34
7370
发布2019-12-12 15:32:34
举报
文章被收录于专栏:CRPER折腾记CRPER折腾记

Markdown上手指南

前言

markdown 是一门很实用的标记语言,若是有HTML 基础学起来会非常快。

演示效果均是从typora 展示的,为什么用它,因为它是一个成熟的 md 编辑器!

  • markdown 所见即所得, 部分还增加了人性化的交互(比如代码高亮)
  • 支持公式
  • 支持大部分的拓展语法
  • 支持主流的流程图渲染

温馨提示:

已经会的不用往下面看了,这文章一开始输出的目的是给我们研发组的小伙伴快速上手的。

因为前端这块的文档基本切换到MD来维护,花了点时间录制了一波GIF演示

基础语法

基础语法是支持度最高的,市面上主流的 markdown 解析器基本都支持。

拓展语法需要借助不同的插件或者库实线,通用性没那么强。

注意点 : 所有标记仅支持英文模式(半角)!!

标题

代码语言:javascript
复制
# H1
## H2
### H3
#### H4
##### H5
###### H6
2019-12-11 11.19.10.gif
2019-12-11 11.19.10.gif

文字强调

粗体
代码语言:javascript
复制
**我是粗体**
2019-12-11 11.25.40.gif
2019-12-11 11.25.40.gif
粗体
代码语言:javascript
复制
_我是斜体_
*我也是斜体_
2019-12-11 11.26.17.gif
2019-12-11 11.26.17.gif
着重强调(粗体+斜体)
代码语言:javascript
复制
***我着重的强调,再哔哔我嫩死你***
2019-12-11 11.38.08.gif
2019-12-11 11.38.08.gif

列表

有序列表

有序列表的格式是:   数字小数点+空格+文本

代码语言:javascript
复制
1. afdslf
2. fsadfae
3. Ewarewr
2019-12-11 11.29.24.gif
2019-12-11 11.29.24.gif

无序列表

格式: 横线(星号) + 空格 + 文本

代码语言:javascript
复制
- asdklfjsaf 
- fasdfsadf 


* 发水电费卢卡斯
* 发顺丰惹我
2019-12-11 11.33.56.gif
2019-12-11 11.33.56.gif

列表混合及嵌套

不管是有序列表还是无序列表,都支持多级嵌套,也支持有序无序列表混用。

若是增加一些外部扩展,还支持todo混入

代码语言:javascript
复制
- 测试啊
  - 真的测试啊
  - 你不信啊
    1. 我是三级有序列表
    2. 呵呵哒
  - 唉
2019-12-11 11.57.09.gif
2019-12-11 11.57.09.gif

外部链接

格式:感叹号方括号小括号(链接)

代码语言:javascript
复制
[点击我就跳到百度了](https://www.baidu.com) 
2019-12-11 11.51.50.gif
2019-12-11 11.51.50.gif

图片引用展示

格式:感叹号+外部链接的格式。 链接支持相对引用!

代码语言:javascript
复制
![closeup photo of computer code screengrab](https://images.unsplash.com/photo-1524666643752-b381eb00effb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80)
2019-12-11 11.55.22.gif
2019-12-11 11.55.22.gif

水平分割线

格式: 空行 ---

代码语言:javascript
复制
呼叫逗比

---

逗比回应你了
2019-12-11 12.00.06.gif
2019-12-11 12.00.06.gif

引用

一般你引用了别处的内容,这个就可以用上了

格式: 大于号(>) + 空格 + 内容

代码语言:javascript
复制
>床前明月光
>
>疑是地上霜
>
> - 这是**李白**的诗歌 
2019-12-11 13.41.43.gif
2019-12-11 13.41.43.gif

行内代码

行内代码的效果通用都是灰色,不能针对语法高亮

格式:反引号+内容+反引号

代码语言:javascript
复制
`module.exports= ()=>{}`
2019-12-11 12.02.41.gif
2019-12-11 12.02.41.gif

拓展语法

表格

表格的语法也很简单,就是写的多一些,因为列越多写的越多。

默认的列左对齐,也支持设置居中和右对齐, 横杆大于等于3, 列的竖必须闭合才能代表一列!

  • 默认对齐(左对齐) :  :----
  • 居中对齐 : :---:
  • 右对齐: ---:
代码语言:javascript
复制
| 默认左对齐     |       居中对齐       |     右对齐 |
| :--- | :------------------: | -------: |
| 啊水电费萨德 | 阿斯顿六块腹肌阿斯顿 | 发水电费 |
| 1321 | 432 | 654645 |
| 啊水电费萨德 | 阿斯顿六块腹肌阿斯顿 | 发水电费 |
| 1321 | 432 | 654645 |


2019-12-11 13.50.51.gif
2019-12-11 13.50.51.gif

代码高亮

代码高亮看采用的是什么高亮库了,比如前端这块有用highlightjs 或 prism的。 所以高亮支持语言也得看高亮库是否支持!!

代码语言:javascript
复制

我是纯文本 plain text,因为我没有指定语言

代码语言:javascript
复制


```javascript
// 我是 js 高亮
import vue from 'vue';
代码语言:javascript
复制
# 我是 bash 高亮
ls -l | grep 'haha'
代码语言:javascript
复制
![Kapture 2019-12-11 at 14.27.58.gif](https://cdn.nlark.com/yuque/0/2019/gif/186190/1576045737085-f6be40e7-da20-4df1-94a6-1504d879940e.gif#align=left&display=inline&height=412&name=Kapture%202019-12-11%20at%2014.27.58.gif&originHeight=412&originWidth=854&size=1097891&status=done&style=none&width=854)

<a name="UToYb"></a>
### 任务列表

这个很实用,就是展示待办事项效果, 算是列表的变种,可以混合使用

- `- [ ] text` : 方括号内部空格代指是待办事项
- `-  [x] text` : 方括号内部 x代指事项已经完成


```markdown
- v1版本
  - [x] 用户接口打通
  - [ ] 用户接口合并
    - [ ] 合并重复字段
    - [ ] 呵呵到

Kapture 2019-12-11 at 14.36.32.gif
Kapture 2019-12-11 at 14.36.32.gif

文字高亮

格式:双等号+文本+双等号

代码语言:javascript
复制
===听说我要呗高亮了===

==是啊==

==亮瞎眼了==
Kapture 2019-12-11 at 14.40.08.gif
Kapture 2019-12-11 at 14.40.08.gif

脚注

这个东西在写文献用的最多

格式:

  • 声明: [^text]: description
  • 引用: hello[^text]
代码语言:javascript
复制
[^李白]: 一个喝酒的诗人

床前明月光[^李白]

Kapture 2019-12-11 at 14.45.25.gif
Kapture 2019-12-11 at 14.45.25.gif

删除线

你没看错,这不属于第一个版本的草案的内容,也是后续才有的

格式:两个波浪线+文本+波浪线

代码语言:javascript
复制
~~我给删除了,你看~~
Kapture 2019-12-11 at 14.52.08.gif
Kapture 2019-12-11 at 14.52.08.gif

下标

把字缩放,适合用来表现公式类的

代码语言:javascript
复制
H~2~o
Kapture 2019-12-11 at 14.53.46.gif
Kapture 2019-12-11 at 14.53.46.gif

mermaid

mermaid 不仅仅可以画流程图,具体可以看mermaid 上手指南

image.png
image.png
Kapture 2019-12-11 at 18.07.24.gif
Kapture 2019-12-11 at 18.07.24.gif

总结

Markdown 的标准方案一直都没有更新,现在的增强大多都是依赖第三方实现。 比如更加丰富的表格功能,数学公式等等! 但是这并不能阻挡 md 流行, 随时可见的身影,代码社区,编程工具内置实现等等。 有不对之处请留言,谢谢阅读

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年12月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Markdown上手指南
    • 前言
      • 基础语法
        • 标题
        • 文字强调
        • 列表
        • 无序列表
        • 列表混合及嵌套
        • 外部链接
        • 图片引用展示
        • 水平分割线
        • 引用
        • 行内代码
      • 拓展语法
        • 表格
        • 代码高亮
        • 文字高亮
        • 脚注
        • 删除线
        • 下标
        • mermaid
      • 总结
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档