美文网首页
Markdown快速入门

Markdown快速入门

作者: 微笑的鱼23333 | 来源:发表于2019-12-21 16:59 被阅读0次

    Markdown是一种类似于HTML又兼容HTML标签的标记语言。通常用作记录学习笔记和api文档,它在程序员中的工作中用途广泛,如果你现在还不会,赶紧学起来吧,学完了再去鄙视其他不会写markdown的程序员(反正我就是这么干的- - )。

    经常上GitHub的程序员应该知道,在GitHub上浏览别人的代码仓库时,代码仓库下面会显示一些文本内容,项目根目录下有个README.md文件,这个文件主要是作为代码仓库的功能介绍和文件结构。

    比如spring项目的代码仓库介绍如下:

    image

    Markdown为什么适合做学习基本和文档呢?除了TXT文件之外,我们最常用的文档格式如微软的word文档,但是word文档要排版,而且在Windows系统之外兼容性不好,其他的如PDF文档我们喜欢打开浏览,但是有几个愿意自己动手制作PDF文件呢?太复杂了对吧。HTML文件应该是最适合做文档的,浏览起来很方便。但是它同样跟PDF文件一样,制作成本太高,我们制作一个HTML文件,需要熟悉CSS样式,除了样式需要精心调整之外,可能还需要适配不同浏览器和操作系统。

    Markdown相比Word/PDF/HTML文件最方便的地方是它让我们不用专注于样式代码,它会帮我们自动处理文本内容的排版问题。

    这里我采用微软公司的vscode来编辑markdown文件,用其他工具的同学请自动忽略。

    vscode安装markdown插件

    在插件搜索框输入Markdown Preview Enhanced,点击install,安装完成重启vscode。

    image

    当然你也可以按照Markdown All in One,这个插件下载最多可能功能更强大,不过我就不折腾了,你们喜欢可以随便玩哈。

    上面提到markdown类似于HTML标签语言,所以我们先来熟悉一下markdown的标签与语法。

    首先,我们新建一个文件保存为md格式,先命名为test.md文件。然后点击vscode右上角的图标就可以打开md文件预览功能。如下图:

    image0.png

    接着进入正题,开始编辑文件内容,慢慢熟悉语法规则:

    1.标题

    在HTML文件中,如果要显示不同层次的标题可以采用h1, h2,h3...等等标签来实现,在markdown中我们可以采用#来表示标题,一级标题用#,二级标题用##,三级标题用###...再往后面大家都那么聪明肯定懂了吧。

    标题的使用方法

    在md文件中编辑内容如下:

    # Markdown快速入门(文档标题)
    
    ## 二级标题   
    
    ### 三级标题
    
    #### 四级标题
    
    ##### 五级标题
    

    效果如下:

    Markdown快速入门(文档标题)

    二级标题

    三级标题

    四级标题

    五级标题

    我们上面安装的插件还提供了很多功能,比如在浏览器打开或者保存为图片PDF文件等等,同学们可以自行研究。

    2.列表

    无序列表

    用+,-, *来表示列表选项。
    注意用空格来间隔,不然没有效果。

    用-来表示

    - cpp
    - java
    - javascript
    

    显示效果:

    • cpp
    • java
    • javascript

    也可以用+来表示:

    + cpp
    + java
    + javascript
    
    • cpp
    • java
    • javascript

    也可以用*来表示:

    * cpp
    * java
    * javascript
    
    • cpp
    • java
    • javascript

    有序列表

    用数字编号开头,请注意这里必须用.加空格连接。

    1. cpp
    2. java
    3. javascript
    

    效果如下:

    1. cpp
    2. java
    3. javascript

    3.文本样式

    显示粗体文字

    **这一段是粗体字**
    

    显示效果如下:
    这一段是粗体字

    显示斜体文字

    *这一段是斜体字*
    

    显示效果如下:
    这一段是斜体字

    4.引用

    我们在写文档时可能引用其他人的语句,或者突出一段文本内容。

    比如在上一节里我们书写标题时,需要主要到以下要点:

    ###### 表示不同的标题层次,如果需要显示预期的效果,我们需要在#后面加上空格,多几个空格不要紧,至少要一个。

    以上的文字样式叫做引用,在markdown里面用>来表示,当然>后面有个空格字符,需要注意

    文件中编辑内容如下:

    # Markdown快速入门(文档标题)
    
    ## 如何引用一段文本内容  
    
    鲁迅先生有句话大家应该都记得:
    
    > 这世上本没有路,走的人多了也就有了路。
    
    

    预览效果如下:

    这世上本没有路,走的人多了也就有了路。

    注意:

    >是可以嵌套的,有兴趣可以自己嵌套玩。

    5.插入代码块

    假设大家都是程序员,写博客干巴巴地讲理论肯定没意思,肯定要贴代码才行,怎么显示一段代码呢?了解HTML的同学肯定知道在HTML中引用代码使用<code>这里贴代码</code>来显示一段代码。在markdown中如何贴代码呢?

    采用```引用代码(不是引号也不是逗号,而是键盘上ESC和Table中间的那个键

    具体用法是在一段代码的前面和后面插入```符号,比如想在markdown中显示以下一段javascript代码:

    console.log('hello world')
    

    支持关键字高亮

    以上的效果很简陋,如果我们希望根据代码对各自的关键字进行高亮显示,该如何做呢?

    方法就是在```符号之后加上语言类别关键字,如果是js代码加上javascript, 如果是Python代码加上python,如果是java代码加上java,如果是C/C++代码加上cpp,根据不同语法显示不同关键字的效果如下图:

    image6.png

    6.插入图片

    有时看技术博客,都是一坨坨的代码和文字看着也很累的,这时候我们需要放几张图片缓解一下

    美女李沁
    • 在线加载网络图片
      这种方式能显示比如http/https站点的图片,加载图片的速度依赖于当前的网络环境。

    加载网络图片的语法如下:

    ![名称](网络图片地址)

    比如以上的的图片链接地址是https://img.haomeiwen.com/i20553365/e4649e27e312cee1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240,那么我们再markdown中如何显示这种图片呢?

    image7.png
    • 显示本地图片
      我们都希望图片加载的速度能快一点,或者有时候会放一些简单的图片放在本地目录,这时候图片的加载速度肯定快许多。

    加载本地图片的语法如下:

    ![名称](本地图片路径)

    • 如果你当前md文件的同目录下有个image.png图片,那么显示这种图片应该这么写:

    ![image.png](image.png)

    也可以是

    ![image.png](./image.png)

    ./表示当前路径的意思。

    • 如果你当前md文件的上级目录叫做images,image.png图片放在那个目录,那么应该是以下这种写法:

    ![image.png](../images/image.png)

    7.插入网站链接

    有时候我们需要在markdown中贴上一些网站的链接,这样会显得自己很专业是吧。

    比如在文档中我们就这样写:

    想了解这方面的更多信息,请自行百度。
    

    大家都知道百度是个网站,希望点击百度两个字可以直接打开网站,这时候我们怎么把链接地址关联上去呢?

    插入网站链接的用法如下

    [显示的文字](链接地址)
    

    要想实现上面的功能很简单,编辑md文件内容如下:

    想了解这方面的更多信息,请自行[百度](www.baidu.com)。
    
    image8.png

    简单吧?

    8.显示表格

    markdown中支持用table标签来显示表格,不过通常情况下我们可以采用更加简洁的表达方式来显示表格。

    显示简单表格

    输入以下内容:

    | 第一列 | 第二列| 第三列 |
    | ------ | ------ | ------ |
    | 第一列1 | 第二列2 | 第三列3 |
    |第一列2 | 第二列2 | 第三列3 |
    
    第一列 第二列 第三列
    第一列1 第二列2 第三列3
    第一列2 第二列2 第三列3

    表格对齐方式

    在第二行中冒号的位置来表示对齐方式,比如左对齐为:---,右对齐---:,居中对齐则是:---:

    • 文本左对齐方式:
    | 第一列 | 第二列| 第三列 |
    | :------ | :------ | :------ |
    | 第一列1 | 第二列2 | 第三列3 |
    |第一列2 | 第二列2 | 第三列3 |
    
    第一列 第二列 第三列
    第一列1 第二列2 第三列3
    第一列2 第二列2 第三列3
    • 文本右对齐方式:
    | 第一列 | 第二列| 第三列 |
    | ------: | ------: | ------: |
    | 第一列1 | 第二列2 | 第三列3 |
    |第一列2 | 第二列2 | 第三列3 |
    
    第一列 第二列 第三列
    第一列1 第二列2 第三列3
    第一列2 第二列2 第三列3
    • 文本居中方式:
    | 第一列 | 第二列| 第三列 |
    | :------: | :------: | :------: |
    | 第一列1 | 第二列2 | 第三列3 |
    |第一列2 | 第二列2 | 第三列3 |
    
    第一列 第二列 第三列
    第一列1 第二列2 第三列3
    第一列2 第二列2 第三列3

    如果需要更加丰富的表格,建议使用table来表示

    9.支持HTML标签

    前面我们提到,markdown本身支持HTML标签的,如果需要采用复杂的样式,可以使用HTML标签来实现,比如复杂表格用table能实现更加丰富的样式。

    我们看看简单的HTML标签在markdown中的应用。

    image9.png

    相关文章

      网友评论

          本文标题:Markdown快速入门

          本文链接:https://www.haomeiwen.com/subject/qdmgnctx.html