4

写作利器——Markdown语法指南基础篇

 2 years ago
source link: https://jelly.jd.com/article/6163a42e2685d0019947afa4
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
写作利器——Markdown语法指南基础篇
上传日期:2021.10.14
前端小伙伴们经常会发表一些技术文章,我发现虽然大家都能正常的完成一篇文章,但是在格式细节上还有很多问题,为了帮助大家规范文章格式,特此整理一下 Markdown 基本规范,方便后面的小伙伴更好的畅所欲言~

为什么选择 Markdown?

在学习语法之前,我们先来看下什么是 Markdown

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档,文档后缀为 .md。 目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。

鉴于 Markdown 以上的特性,用 Markdown 有如下好处:

  1. 什么人都能打开,因为是纯文本,所以不需要特殊的软件,最简单的记事本就可以浏览;
  2. 转HTML非常方便,HTML是 web 的标记语言,用 Markdown 标注格式之后,可以很方便的转为以上格式;
  3. Markdown让我更专注写作,而不是排版

看了以上这么多优点,你是不是很心动呢,接下来就让我们来学习 Markdown 的语法吧,虽然 Markdown 的语法已经足够简单,但是还是有很多细节需要我们注意,每一种格式之后我会根据自己的写作经验提出一些自己的见解,帮助大家更合理的运用每一种格式。

  • MarkDown 文件均使用 .md 作为后缀 (小写字母)
  • 普通文本换行,使用行末尾2空格触发

在 Markdown 中,如果一段文字被定义为标题,只要在这段文字前加 # 即可:

# 一级标题

## 二级标题

### 三级标题

以此类推,总共有六级标题,需要注意的是 # 号和文字中间要有一个空格,标题与上下文之间使用空行隔开。

PS:建议行文从二级标题开始使用哦~

  • **加粗** 相当于 <strong></strong> 标签,表现为加粗,例如:此处需要加强表示;
  • *斜体* 相当于 <em></em> 标签,表现为倾斜,例如:此处需要特殊表示;
  • ~~删除线~~ 表现为给文字添加删除线,例如:此处需要 删除线
  • 有序列表的显示只需要在文字前使用1. 2.符号即可;
  • 无序列表使用-或者*标识;
  • 列表标识符号和其后面的内容使用空格分开;
  • 列表内嵌套列表时,在第二层列表前面加tab缩进即可;
  • 列表块前后整行隔开
1. 7:00~9:00 自我投资 大脑的黄金时间
2. 9:00~12:00 专注时间 罐头工作术
3. 12:00~13:00 吃午餐 血清素提升
    * 谷物
    * 水果
    * 蔬菜
4. 13:00~16:00 非专注性工作

实际预览效果:

  1. 7:00~9:00 自我投资 大脑的黄金时间
  2. 9:00~12:00 专注时间 罐头工作术
  3. 12:00~13:00 吃午餐 血清素提升
  4. 13:00~16:00 非专注性工作

代码块规范

  • 行内代码使用1对波浪号 如: hello world!
  • 块级代码使用3个波浪号整体4空格缩进,且上下均用整行隔开;
  • 代码块支持部分语法高亮,使用方式是在波浪号后加语法关键字,如下:
11d36b920f7b79f2.png

支持高亮显示的语言

我使用表格方式整理了 Markdown 目前支持的高亮语法,方便后期查阅。

名称关键字调用的jsAppleScriptapplescriptshBrushAppleScript.jsActionScript 3.0actionscript3 , as3shBrushAS3.jsShellbash , shellshBrushBash.jsColdFusioncoldfusion , cfshBrushColdFusion.jsCcpp , cshBrushCpp.jsC#c# , c-sharp , csharpshBrushCSharp.jsCSScssshBrushCss.jsDelphidelphi , pascal , passhBrushDelphi.jsdiff&patchdiff patchshBrushDiff.jsErlangerl , erlangshBrushErlang.jsGroovygroovyshBrushGroovy.jsJavajavashBrushJava.jsJavaFXjfx , javafxshBrushJavaFX.jsJavaScriptjs , jscript , javascriptshBrushJScript.jsPerlperl , pl , PerlshBrushPerl.jsPHPphpshBrushPhp.jstexttext , plainshBrushPlain.jsPythonpy , pythonshBrushPython.jsRubyruby , rails , ror , rbshBrushRuby.jsSASS&SCSSsass , scssshBrushSass.jsScalascalashBrushScala.jsSQLsqlshBrushSql.jsVisual Basicvb , vbnetshBrushVb.jsXMLxml , xhtml , xslt , htmlshBrushXml.jsObjective Cobjc , obj-cshBrushObjectiveC.jsF#f# f-sharp , fsharpshBrushFSharp.jsRr , s , splusshBrushR.jsmatlabmatlabshBrushMatlab.jsswiftswiftshBrushSwift.jsGOgo , golangshBrushGo.js

引用需要在被引用的文正前加>符号,引用内容每行前面都需要添加>符号,一旦断开就会默认为下段引用。

>这是一句引用
>> 这是嵌套引用

显示效果:

这是一句引用

这是嵌套引用

[链接文字](链接地址 "title")

[链接文字][id]

// 在文章末尾处添加
[id]: link "Title"

使用 <> 包括的 URL 或邮箱地址会被自动转换为超链接:

<http://www.baidu.com/>

<[email protected]>

http://www.baidu.com/

[email protected]

![image](image.link)

![demo](https://i.loli.net/2020/07/30/5r6ak4cvZhHUXlC.jpg)
11d36b920f7b79f2.png

在文档要插入图片的地方写![图片Alt][标记]

在文档的末尾写上[标记]:图片地址 "Title",和链接同理。

![imgDemo][1]

[1]:https://i.loli.net/2020/07/30/5r6ak4cvZhHUXlC.jpg "Markdown图片示例"
11d36b920f7b79f2.png

<preview>

| 表头 | 表头 | 表头 |

| :--- | ---: | :---: |

| 文字 | 文字 | 文字 |

| 文字| 文字 | 文字 |

</preview>

注: :---代表左对齐,---:代表右对齐,:---:代表居中对齐,-数目至少一个,没有冒号默认左对齐,第二行必须有,否则不是表格形式。

显示效果

左对齐居中右对齐CSScssshBrushCss.jsJavaScriptjs , jscript , javascriptshBrushJScript.jsShellbash , shellshBrushBash.js

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:

* * *

***

*****

- - -

---------------------------------------

显示效果


掌握以上内容,你就可以轻松的完成一篇文章的撰写了,后续我将撰写进阶版语法指南,介绍一些 Markdown 的小技巧和不常用到的图表类展示, 最后教大家如何在 Markdown 中使用 emoji,让你的文章更鲜活~ 😉。

如果这篇文章对你有所帮助,或者有任何疑问,欢迎留言探讨~

Markdown 官方文档


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK