继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

厌倦了富文本编辑器?试试Markdown吧

前端GoGoGo
关注TA
已关注
手记 59
粉丝 116
获赞 6940

以此文来介绍Markdown以及测试慕课网对Markdown的支持。

Markdown概述

Markdown是一种易读易写的标记语言。它能被生成HTML。Markdown 的目标是:成为一种适用于网络的书写语言。

Markdown 与 Office Word 相比,其控制文本的格式更容易;与 HTML 相比,其写法上更简洁和简单。虽然 Markdown 在功能上没有 Office Word 和 HTML 强大,但如果只是用 Markdown 来写写文章和文档,也够用了~

Github,Stackoverflow,慕课网,简书等网站都支持Markdown。

标题
# h1
## h2
### h3
#### h4
##### h5
###### h6

转化成HTML的效果如下

h1 h2

h3

h4

h5
h6

不支持 h5 和 h6 呢。

换行

四个及以上空格加回车。

链接
跳至[落网](http://www.luoo.net/)    
新窗口跳至<a href="http://www.luoo.net/" target="_blank">落网    
带title的链接 [落网](http://www.luoo.net/ '落网')    
地址与文字一样的链接的简写 <http://www.baidu.com>

转化成HTML的效果如下

跳至落网
新窗口跳至<a href="http://www.luoo.net/" target="_blank">落网
带title的链接 落网
地址与文字一样的链接的简写 http://www.baidu.com

图片
![头像](https://avatars0.githubusercontent.com/u/2120155?v=3&s=40)

转化成HTML的效果如下
头像

列表

有序列表

1. 第一个
    1. 第1.1个
1. 第二个
1. 第三个

转化成HTML的效果如下

  1. 第一个
    1. 第1.1个
  2. 第二个
  3. 第三个

无序列表

* 葡萄
    * 夏黑
    * 巨峰
* 荔枝
* 梨

转化成HTML的效果如下

  • 葡萄
    • 夏黑
    • 巨峰
  • 荔枝
强调
**强调内容**

转化成HTML的效果如下
强调内容

不支持强调。

斜体
*斜体内容*

转化成HTML的效果如下
斜体内容

删除线
~~这种理解是有问题的~~

转化成HTML的效果如下
这种理解是有问题的

分割线
****

转化成HTML的效果如下


行内代码
`npm i`

转化成HTML的效果如下
npm i

块级代码
3个`js
function say(str){
    console.log(str);
}
3个`

3个`css
#main{
    width: 80%;
    margin: 20px auto;
}
3个`

转化成HTML的效果如下

function say(str){
    console.log(str);
}
#main{
    width: 80%;
    margin: 20px auto;
}
表格
| Tables        | Are           | Cool  |
| :------------ |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

转化成HTML的效果如下

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
引用
> 天才就是99%的努力加上1%的灵感。-爱迪生

转化成HTML的效果如下

天才就是99%的努力加上1%的灵感。-爱迪生

块状元素
∙∙∙∙天才就是99%的努力加上1%的灵感。
∙∙∙∙1%的灵感是很重要的。
∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙-爱迪生

其中代表空格。

转化成HTML的效果如下

天才就是99%的努力加上1%的灵感。
1%的灵感是很重要的。
                        -爱迪生
复选框
- [x] Be awesome
- [ ] Prepare dinner
  - [x] Research recipe
  - [ ] Buy ingredients
  - [ ] Cook recipe
- [ ] Sleep

转化成HTML的效果如下(简书还不支持复选框,Github支持)

  • [x] Be awesome
  • [ ] Prepare dinner
    • [x] Research recipe
    • [ ] Buy ingredients
    • [ ] Cook recipe
  • [ ] Sleep
转义

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号,例如:如果你想要用星号加在文字旁边的方式来做出强调效果(但不用<em>标签),你可以在星号的前面加上反斜杠:

\*sth\*

转化成HTML的效果如下
*sth*

参考 拓展阅读
打开App,阅读手记
10人推荐
发表评论
随时随地看视频慕课网APP

热门评论

请问,java如何获取markdown提交的编辑数据

∙∙∙∙天才就是99%的努力加上1%的灵感。 ∙∙∙∙1%的灵感是很重要的。 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙-爱迪生

@小词 markdown很好学的~

查看全部评论