菜鸟教程—如何在简书上用markdown写博客

最近在简书上看文章,发现很多大神的文章里面都是将代码以块状方式显示在文章中,看起来又清晰又美观,而我还傻乎乎的在编辑器中敲完代码再截图,这样文章看起来好low啊,就找个一位大神请教他是怎么弄的,他告诉我用的markdown,我在网上找了资料学习了之后,觉得又简单又方便,在这里分享一下我学习心得。(熟悉markdown的大神请自动忽略此文章)

导语:Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

准备工作
首先进入“设置”在常用编辑器中勾选“markdown”。

进入设置区
选择Markdown编辑器

之后就可以新建文章,将模式调整到预览模式

切换到预览模式

之后界面就变成这样了,在左边编辑后可以直接在右边预览

markdown4.png

好了准备工作已经做好了,下面学习一下Markdown的语法
Markdown的语法

  • 标题

在Markdown中,如果一段文字被定义为标题,只须在这段文字前加#号即可(标准的语法中需要在*后边加一个空格)。一级标题加一个#,二级加两个#,一共有六级标题。

标题.png

一级标题和二级标题还有另外的写法,一级标题在后边加=(大于等于2个),二级标题在后边加-(大于等于2个)

一级标题
==
二级标题
--
### 三级标题

效果如下

一级标题

二级标题

三级标题

  • lala

可以看出这个效果与加了#的效果是一样的。

  • 粗体和斜体

用两个*包含一段文本就是粗体的语法,用一个*包含一段文本就是斜体的语法。

粗体和斜体.png
  • 有序列表和无序列表

列表的显示只需要在文字前加上-或*即可变为无序列表,看其他人的博客说有序列表则需要在文字前加1. 2. 3.符号并且文字之前加上一个字符的空格,但是我实验的不是这样的,加了空格反而变成了无序列表,所以觉得应该是不加空格的(哪位大神能帮忙看下是为什么,请看列表3。问题已解决可以在有序和无序之间加两个回车)。

列表.png
  • 添加引用

如果你要引用别处的句子,那么就要用引用的格式。需要在文本前加入>这种尖括号(大于号)即可。
例如

>这是引用啦啦啦

效果是这样的

我是引用啦啦啦

也可以在引用中嵌套引用,例如

>我是引用啦啦啦
>>我是二级引用啦啦啦

效果如下

我是引用啦啦啦

我是二级引用啦啦啦

  • 代码块

块状显示代码要在代码的开头和结尾加三个反引号,这个符号在Esc键下面,切换到英文下即可。

代码块.png
  • 行内代码

还有一种是行内代码,同样使用反单引号,代码开头结尾各加一个反单引号,例如

行内代码.png
  • 链接

链接包括两种形式:行内式和参考式。
1.行内链接

使用[](link "Optional title")表示行内链接。
其中[]内的内容为要添加链接的文字
link为链接地址
Optional title为显示标题。

Optional title显示标题的效果就是在你将鼠标放到链接上后,会显示一个小框提示,提示的内容就是Optional title里的内容(中文乱码,不能识别)。

[樱桃的简书](www.baidu.com "baidu")

效果:樱桃的简书

2.参考链接

1. [html][1]
2. [css][2]
3. [iavascript][3]
[1]: 网址1
[2]: 网址2
[3]: 网址3

效果如下

  1. [html][1]
  2. [css][2]
  3. [iavascript][3]
    [1]: 网址1
    [2]: 网址2
    [3]: 网址3
    因为我这里没给具体的网址,所以点击是没有效果的,找不到网页。
    参考式链接可以重复使用,一般都是将一些链接放在一起统一管理,如一段文字后面或文章结尾。
  • 图片

插入图片与插入链接的语法很像,区别在一个!号,而且也有行内式和参考式两种。
1.行内式
插入图片语法为:

![](/path/to/img.jpg "Optional title")

其中

Alt text为如果图片无法显示时显示的文字。
/path/to/img.jpg为图片所在路径。
Optional title为显示标题。

Optional title的显示效果为在你将鼠标放到图片上后,会显示一个小框提示,提示的内容就是Optional title。
更简单的方法就是直接将图片拖拽进来,图片会自动生成这样的一种格式,例如以下是我拖拽进来的一张图片。

图片.png

2.参考式

![图片1][1]
[1]: 图片地址

效果如下,插入了图1。
![图片1][1]
[1]: http://upload-images.jianshu.io/upload_images/5217911-b5888a0b4800ae86.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

  • 表格

第一种写法
先来看代码

 |one | two|three |four|
 |:---|---:| :----:|---|
 |1   |  2 |      3|  4|

结果

one two three four
1 2 3 4

从结果可以看出来,这四列的标题及文本对齐的方式不一样,这个是有第二行的冒号决定的

冒号在左边标题及文本左对齐
冒号在右边标题及文本右对齐
冒号在两边标题及文本居中
没有冒号的第四列是默认格式

第二种写法

 one  | two |three|four
 :----|----:| :--:|-----
 1    | 2   | 3   |  4

效果

one two three four
1 2 3 4

可以看出效果是一样的。第二种写法就是去掉最外层的竖线。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Markdown是一种轻量级的[标记语言],它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请...
    李阿昀阅读 7,741评论 1 1
  • 为什么学习Markdown 自从搭建了 Hexo 博客之后,发现还有 Markdown 这种写文章的方法,想到以后...
    lifeColder阅读 20,308评论 10 216
  • 写在前面 之前在 CSDN 写过一段时间的博客,使用的是传统的文本。最近利用 Github+Hexo 搭建了一个静...
    Lucky_Light阅读 5,625评论 0 21
  • << 访问 Wow!UbuntuNOTE: This is Simplelified Chinese Editio...
    Xiaosonl阅读 5,115评论 0 2
  • 小玉是个成熟稳重的女生。 在我认识的朋友中,她是最早嘚瑟她有男朋友的。 有一天,她跟我抱怨。她的这个男朋友当初喜欢...
    写作者娴哥阅读 3,352评论 4 4

友情链接更多精彩内容