markdown语法图文全面详解(几分钟就能学会)以及idea如何创建markdown文件

导读:本篇文章讲解 markdown语法图文全面详解(几分钟就能学会)以及idea如何创建markdown文件,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

1. 前言

写过csdn、segmentfault等博客或者github上面的文档的,应该知道Markdown语法的重要性,不知道的朋友们也别着急,一篇博客轻松搞定Markdown语法。话说这个语法超级简单,一看就会,不信你点进来看看。

1.1 markdown是什么

Markdown 是一种方便记忆、书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档:譬如您正在阅读的这份文档。

它使用简单的符号标记不同的标题,分割不同的段落,粗体 或者 斜体 某些文字等等。

2. idea创建md文件

以创建test.md来说明如何使用Markdown创建Markdown文件。

  1. 在项目上右键点击 new -> File

file->new ->

  1. 输入File文件名称:test.md

在这里插入图片描述

  1. 如下图所示,即可创建test.md

在这里插入图片描述

3 教程

3.1 快捷键

  • 加粗 Ctrl + B
  • 斜体 Ctrl + I
  • 引用 Ctrl + Q
  • 横线 Ctrl + R
  • 撤销 Ctrl + Z
  • 重做 Ctrl + Y
  • 插入链接 Ctrl + L
  • 插入代码 Ctrl + K
  • 插入图片 Ctrl + G
  • 提升标题 Ctrl + H
  • 有序列表 Ctrl + O
  • 无序列表 Ctrl + U

3.2 基本语法

3.2.1 字体设置斜体、粗体、删除线

这是正常字体
*这是倾斜字体*
_这是倾斜文字_
**这是加粗文字**
***这是加粗倾斜文字***
~~这是删除线文字~~

在这里插入图片描述

3.2.2 分级标题

分级标题有两种写法,如下所示

  1. 写法1

#和标题之间要有一个空格

# 我是一级标题
## 我是二级标题
### 我是三级标题
#### 我是四级标题
##### 我是五级标题
###### 我是六级标题

在这里插入图片描述

  1. 写法2
这是一级标题
============================

这是二级标题
----------------------------

在这里插入图片描述

  1. 备注

我们在实际中,一般采用第一种方式写标题。

3.2.3 链接

  1. 添加本地图片链接,语法规则,有以下两种写法:
![在这里插入图片描述](图片路径 "title")

![在这里插入图片描述](图片路径)

可以不写图片描述。

在这里插入图片描述

  1. 添加互联网上图片,语法规则:
[在这里插入图片描述](网络图片路径)

可以不写图片描述。

在这里插入图片描述

  1. 自动链接

Markdown支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用<>包起来, Markdown 就会自动把它转成链接。也可以直接写,也是可以显示成链接形式的,如下图所示:

在这里插入图片描述

3.2.4 分割线

可以在一行中用三个以上的星号(*)、减号(-)、底线(_)来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。

***
---
___

在这里插入图片描述

3.2.5 代码块

对于程序员来说这个功能是必不可少的,插入程序代码的方式有两种,一种是利用缩进(tab), 另一种是利用英文“`”符号(一般在ESC键下方,和~同一个键)包裹代码。

  1. 代码块

缩进 4 个空格或是 1 个制表符,如下图所示:

在这里插入图片描述

  1. 行内式

如果在一个行内需要引用代码,只要用反引号“`”引起来就好(Esc健)

在这里插入图片描述

  1. 多行代码块与语法高亮

在需要高亮的代码块的前一行及后一行使用三个单反引号“`”包裹,就可以了,如下图所示:

在这里插入图片描述

  1. 代码块里面包含html代码

在代码区块里: & 、< 和 > 会自动转成HTML实体。它让你非常容易使用Markdown插入范例用的HTML原始码。你只需要复制贴上,剩下的Markdown都会帮你处理。

简书代码块里不支持html。

在这里插入图片描述

3.2.6 引用

在被引用的文本前加上>符号,以及一个空格就可以。如果只输入了一个>符号会产生一个空白的引用。

  1. 基本使用,如下图所示:

在这里插入图片描述

  1. 引用的嵌套使用,如下图所示:

在这里插入图片描述

  1. 引用其它要素

引用的区块内也可以使用其他的Markdown语法,包括标题、列表、代码区块等,如下图所示:

在这里插入图片描述

3.2.7 列表

  1. 无序列表,使用*,+,- 表示无序列表。

符号后面一定要有一个空格,起到缩进的作用。

图片

  1. 有序列表,使用数字和一个英文句点表示有序列表。

英文句点后面一定要有一个空格,起到缩进的作用。

在这里插入图片描述

  1. 无序列表和有序列表同时使用

在这里插入图片描述

  1. 列表和其它要素混合使用

列表不光可以单独使用,也可以使用其他的Markdown语法,包括标题、引用、代码区块等。

【注意事项】:

  • 加粗效果不能直接用于列表标题里面,但是可以嵌套在列表里面混合使用。

  • 列表中包含代码块(前面加2个tab或者8个空格,并且需要空一行,否则不显示)。

图片

  1. 内嵌无序列表
- 外列表1
  - 内列表1
  - 内列表2
 - 歪列表2
   - 内列表3 

在这里插入图片描述

  1. 注意事项

在使用列表时,只要是数字后面加上英文的点,就会无意间产生列表,比如2017.12.30 这时候想表达的是日期,有些软件把它被误认为是列表。

解决方式:在每个点前面加上\就可以了。如下图所示:

在这里插入图片描述

3.2.8 表格

  1. 基本写法

表格的基本写法很简单,就跟表格的形状很相似,如下图所示:

在这里插入图片描述

  1. 表格对齐方式

我们可以指定表格单元格的对齐方式,冒号在左边表示左对齐,右边表示有对齐,两边都有表示居中,如下图所示:

在这里插入图片描述

3.3 常用技巧

3.3.1 换行

  • 方法1:连续两个以上空格+回车
  • 方法2:使用html语言换行标签:<br>

3.3.2 缩进字符

  1. 不断行的空白格&nbsp;&#160;
  2. 半角的空格&ensp;&#8194;
  3. 全角的空格&emsp;&#8195;

在这里插入图片描述

3.3.3 打出部分特殊符号

  1. 对于Markdown中的语法符号,前面加反斜线\即可显示符号本身,如下图所示:

在这里插入图片描述

  1. 其他特殊字符,示例如下:

在这里插入图片描述

  1. 想知道字符对应的Unicode码,可以看这个网站:https://unicode-table.com/cn/

在这里插入图片描述

  1. 附上几个工具对特殊字符的支持的对比图:

图片

3.3.4 字体、字号与颜色

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的!

CSDN-markdown编辑器是其衍生版本,扩展了Markdown的功能(如表格、脚注、内嵌HTML等等)!对,就是内嵌HTML,接下来要讲的功能就需要使用内嵌HTML的方法来实现。

字体,字号和颜色编辑如下代码:

在这里插入图片描述

具体颜色分类及标记请看下表:

在这里插入图片描述

3.3.5 链接的高级操作

  1. 行内式。

这个在上文的3.2.3 链接这个小节已经过,这里就不继续讲解了。

  1. 参考式链接。

在文档要插入图片的地方写![图片或网址链接][标记],在文档的最后写上[标记]:图片地址 “标题”。(最后这个”标题”可以不填写)

在这里插入图片描述

  1. 内容目录

在段落中填写 [TOC] 以显示全文内容的目录结构。

  1. 锚点

语法说明:在你准备跳转到的指定标题后插入锚点{#标记},然后在文档的其它地方写上连接到锚点的链接。如下图所示:

在这里插入图片描述

锚点其实就是页内超链接。比如我这里写下一个锚点,点击回到目录,就能跳转到目录。 在目录中点击这一节,就能跳过来。

【注意】:在简书中使用锚点时,点击会打开一个新的当前页面,虽然锚点用的不是很舒服,但是可以用注脚实现这个功能。

  1. 注脚

语法说明:在需要添加注脚的文字后加上脚注名字[^注脚名字],称为加注。 然后在文本的任意位置(一般在最后)添加脚注,脚注前必须有对应的脚注名字。如下图所示:

在这里插入图片描述

【注意事项】:

  1. 脚注自动被搬运到最后面,请到文章末尾查看,并且脚注后方的链接可以直接跳转回到加注的地方。

  2. 由于简书不支持锚点,所以可以用注脚实现页面内部的跳转。

3.3.6 背景色

Markdown本身不支持背景色设置,需要采用内置html的方式实现:借助table, tr, td等表格标签的bgcolor属性来实现背景色的功能,如下代码所示:

<table><tr><td bgcolor=orange>背景色是:orange</td></tr></table>

在这里插入图片描述

3.3.7 emoji表情符号

emoji表情使用:EMOJICODE:的格式,详细列表可见:https://www.webpagefx.com

当然现在很多markdown工具或者网站都不支持。

如下列出几个平台的对比:

在这里插入图片描述

在这里插入图片描述

3.4 高端用法

我用过的简书,CSDN,包括markdownPad软件都不支持下面这些功能,但有一个在线网站https://www.zybuluo.com 可以支持。

3.4.1 使用LaTex数学公式

  1. 行内公式

使用两个$符号引用公式:$公式$

  1. 行间公式

使用两对$$符号引用公式:$$公式$$

在这里插入图片描述

具体可以参考markdown编辑器使用LaTex数学公式https://katex.org

3.4.2 流程图

简单介绍流程图的语法,仅作为了解,如下图所示:

在这里插入图片描述

  1. 制作一份待办事宜—-Todo 列表

在这里插入图片描述

  1. 绘制 序列图

在这里插入图片描述

  1. 绘制 甘特图

在这里插入图片描述

3.5 Markdow工具

3.5.1 markdownpad软件

使用markdown语言写笔记的,官网下载地址:http://markdownpad.com

软件安装之后的示意图如下图所示:

图片

3.5.2 有道云笔记

支持markdownpad语法,也支持html语法,官方网址:http://note.youdao.com

它有在线网页版,网页版使用markdown示例图如下:

在这里插入图片描述

3.5.3 在线编辑markdown

官网地址:https://www.zybuluo.com

3.5.4 yporaio软件

  1. 一款 Markdown 编辑器和阅读器
  2. 风格极简 / 多种主题 / 支持 macOS,Windows 及 Linux
  3. 实时预览 / 图片与文字 / 代码块 / 数学公式 / 图表
  4. 目录大纲 / 文件管理 / 导入与导出

官网地址:https://typoraio.cn

4. 参考文章

  1. https://mp.weixin.qq.com/s?__biz=Mzg2MTYzNzM5OA==&mid=2247509103&idx=1&sn=33eeb63a7e0b57f47d9035664c792f72

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/99179.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!