Markdown入门

By zsh2517

有电脑的人输入网址打开课件

如果没带电脑,等一下可以扫描二维码

http://pages.zsh2517.com/01/main.html

我建议在讲的时候同时进行实践,下面是一些不错的在线编辑器。
如果你有VSCode(或者Atom)可以找一下Markdown Preview Enhanced插件。

cmd markdown

editor.md

关于slide的一些使用帮助

触屏设备可以点击右下角方向键或者滑动进行翻页
双指缩小的滑动操作,查看全部页面

电脑等使用P(Previous前一张)/N(Next后一张)翻页
光标键或者HJKL(VIM按键)切换页面

?(Shift+/)打开帮助
Esc或者O查看全部页面

扩展内容

2019-11-16 星期六晚上的内容

课件点这

课件的markdown源文件点这

课件上的东西在讲的时候基本都会提到,这里对其进行一些进一步的扩展。如果对markdown有兴趣的话,可以看看。

扩展的参考资料

各markdown编辑器带的语法介绍(不列举)
markdown.cn 对于markdown的语法说明
Markdown Preview Enhanced 文档 (VSCode/Atom的MPE插件)

reveal.js幻灯片插件

MPE对reveal.js(幻灯片制作)的支持(国内无法访问,需要科学上网)

reveal.js GitHub

到现在,我感觉你们发现这个课件的不同之处了

对的,这个是完全使用Markdown写的展示

使用了reveal.js进行了渲染

页面已经上传到了我的网站上,可以直接打开预览

另外,每个样例都提供了其对应的代码,可以直接复制粘贴测试(部分使用了相对路径的可能不行)

就像这样,上面是渲染效果,下面是源代码

加粗 斜体删除线

**加粗** *斜体*~~删除线~~

emm...什么是Markdown

markdown是一种文本的标记语言。
就像百度上这么说的

有什么用

相比于专业的排版软件,比如Office,WPS,TeX\TeX等,markdown支持的东西显然要少。那么有什么用呢?

markdown是基于纯文本的标记的语言。相比于纯文本,markdown支持更多的格式。相比于其他标记语言,比如HTML或者UBB,更易于书写。而相较于doc,docx等文档格式,不需要任何软件即可轻易阅读。

有什么应用?

作为一种支持较多格式的标记语言,现在很多文本/笔记软件已经逐渐支持。比如印象笔记,有道云笔记等
另外很多博客(尤其是针对IT人员的)平台,例如CSDN/CNBlogs都提供了markdown的编辑模式。
在GitHub上面,相当多的说明文件(例如Readme)都是使用了markdown

今天说一些基本的语法

大部分示例下面都会附带上代码
随时可以在编辑器中自行使用

加粗 斜体删除线

对应的代码是

加粗 斜体删除线

**加粗** *斜体*~~删除线~~

那么,加粗斜体或者再加上删除线怎么写呢?

加粗&斜体 还能 配上删除线

***加粗&斜体*** 还能 ***~~配上删除线~~***

标题

Header 1

# Header 1

Header 2

## Header 2

Header 3

### Header 3

Header 4

#### Header 4
Header 5
##### Header 5
Header 6
###### Header 6

学习过HTML的同学知道,网页的<h1><h6>的标签

markdown中的标题语法,与HTML中的<hx>相对应

虽然标题呈现出来的是加粗/大号字体,但是非常不建议用作文本的加粗和增大(这个可以通过CSS实现)

链接和图片

链接的写法是[TEXT](URL)

例如

点击这里打开百度

[点击这里打开百度](https://www.baidu.com)

图片是![描述性文字](图片链接)

这个链接可以是相对目录,比如当前目录下的1.png


![](1.png)

也可以是绝对目录

![](https://www.baidu.com/img/bd_logo1.png)

替换文字是在图片加载失败的时候显示的。

这是一个不存在的图片,加载失败

![这是一个不存在的图片,加载失败](https://www.baidu.com/img/bd_logo123.png)

链接、图片属性也是可以结合的
点一下百度试试
这是一个不存在的图片,加载失败

[![这是一个不存在的图片,加载失败](https://www.baidu.com/img/bd_logo.png)](https://www.baidu.com)

除了链接图片之外,很多属性在不相冲突的情况下可以自由结合,比如删除线和链接
比如这个
或者是公式和链接E=mc2E=mc^2

比如[~~这个~~](https://baike.baidu.com/item/%E8%B4%A8%E8%83%BD%E6%96%B9%E7%A8%8B/1884527?fromtitle=E%3DMC2&fromid=4857539&fr=aladdin)
或者是公式和链接[$E=mc^2$](https://baike.baidu.com/item/%E8%B4%A8%E8%83%BD%E6%96%B9%E7%A8%8B/1884527?fromtitle=E%3DMC2&fromid=4857539&fr=aladdin)

列表

有序列表

  1. 顶级
    1. 缩进1级
      1. 缩进2级
  2. 顶级
1. 顶级
   1. 缩进1级
      1. 缩进2级
2. 顶级

无序列表

  • 顶级
    • 缩进1级
      • 缩进2级
  • 顶级
* 顶级
   * 缩进1级
      * 缩进2级
* 顶级

日程表式的选中框

日程表式的选中框

- [ ] 没选中的东西
- [x] 选中的东西

代码

代码的嵌入分为两种——行内代码和代码块

行内代码

使用 `(Tab上面那个)括起来代码部分

例如下面一段话


可以使用![](1.png)嵌入当前文件夹下的1.png


可以使用`![](1.png)`嵌入当前文件夹下的1.png

实践的时候,由于编辑器是在线的编辑器,本地引用比较复杂,可以试试这个。

可以使用`![](https://www.baidu.com/img/bd_logo1.png)`嵌入百度logo

就像上面,如果要原封不动显示一段文字(而不是解析成markdown),必须加上代码标记。

如果不用行内代码呢?

可以使用嵌入当前文件夹下的1.png

可以使用![](1.png)嵌入当前文件夹下的1.png

可能看起来和普通文本区别不大
一般来说,行内代码块和文本的区别

  1. 字体(font)字体(font)有区别
    例如 im im,代码渲染通常使用等宽字体
  2. 在一些渲染引擎中,行内代码有背景/标记
    比如cmd markdown
可能看起来和普通文本区别不大
一般来说,行内代码块和文本的区别
1. 字体(font)`字体(font)`有区别
    例如 im `im`,代码渲染通常使用等宽字体
2. 在一些渲染引擎中,行内代码有背景/标记
    比如[cmd markdown](https://www.zybuluo.com/mdeditor)
    ![](3.png) ![](2.png)

代码块

写法是

CODE

标准的markdown是不包含代码高亮的功能,仅仅是输出成代码块的形式。但是大多数markdown编辑器都包含了高亮插件。

#include <stdio.h>
int main() {
    int a,b;
    scanf("%d%d",&a,&b);
    printf("%d", a+b);
    return 0;
}

水平线/分隔符(<hr>


---(实际上大于等于三个都可以)

引用

PC操作系统太贵了
自己写个吧
---Linus

> PC操作系统太贵了
自己写个吧
---Linus

在markdown的文本编辑器中,通常渲染成带有缩进和斜体的

而且引用大多支持嵌套

而且引用大多支持嵌套
> PC操作系统太贵了
> 自己写个吧
> >---Linus

PC操作系统太贵了
自己写个吧

---Linus

需要注意的是,由于不同编辑器渲染不完全一样
在有的编辑器中需要每行前面输入 >

前面这些东西是Markdown规定的一些语法。几乎对于所有的编辑器成立,但是大多数编辑器,还支持更多的东西

高亮

简单来说就是设置文本背景的颜色

语法==高亮==高亮

==高亮==

目录

在markdown中,大多数编辑器(少数需要另行安装插件)使用[toc]即可创建本文档的目录。(例如下一页)

在对于文档式的(而非这种slide的)markdown文件中,点击目录即可跳转到标题。

这个目录完全是基于标题(# 声明的标题),因此,这是不建议使用标题作为加粗字体的原因,会导致格式混乱。

表格

一个表格必须要有表头

列1 列2 列3
1 2 3
1 2 3
| 列1 | 列2 | 列3 |
| :-- | :--: | --: |
| 1 | 2 | 3 |
| 1 | 2 | 3 |

第一行是表头
第二行是设置对齐的信息(左对齐,居中,右对齐)
后面是正常的列

必须要保证列数一致,以避免出现意外情况

公式

这里需要提到另外一种语言LaTeX\LaTeX
LaTeX\LaTeX是一种基于TeX\TeX的排版系统
在markdown里面主要是用来写公式

和代码块一样,公式也分为行内公式和行间公式

这个是求和1+2+3+...+n=n(n+1)21+2+3+...+n=\frac{n(n+1)}{2}
这个是求和1+2+3+...+n=n(n+1)21+2+3+...+n=\frac{n(n+1)}{2}

这个是求和$1+2+3+...+n=\frac{n(n+1)}{2}$
这个是求和$$1+2+3+...+n=\frac{n(n+1)}{2}$$

在大多数的编辑器中,行内公式使用的是$xxx$的方式进行处理。而行间使用的是$$xxxx$$进行渲染(比如cmd markdown 和 MPE)
但是这个并不绝对,在editor.md渲染,两种是通用的,而在有的编辑器,使用下面的标签进行渲染`\[ 和 \]`,也有使用代码块+Math标记的。

公式的LaTeX\LaTeX实现依靠了第三方的插件,常见的是KaTeX和MathJax两种,在渲染时有一些细节性的区别(但是都可以用来写公式)

对于链接和图片的扩展

markdown支持在显示链接或者图片的提示文本。
例如baidu
鼠标移到图片或者是baidu上面,会弹出提示文字,语法是链接后面空格,然后加上文本(引号括起来)

例如[baidu](https://www.baidu.com "戳右面那个")![](2.png "戳我干嘛!")

其他的一些特性

markdown实际上是将标记本文解析成为HTML的一种工具。因此,markdown是原生的支持了HTML的语法
但是由于HTML的开放性远大于markdown,因此在支持的过程中会加以限制或者屏蔽markdown(视编辑器而定)
例如下面是HTML写的百度

<a href="https://www.baidu.com">百度</a>

同样也可以嵌入CSS甚至JS(如果有权限使用)

reveal.js

reveal.js是一个将markdown和HTML渲染成slide的工具。
本页面就是完全用markdown写的,并用reveal.js生成了展示

在VSCode中新建markdown文件后,开头加入下列代码,用MPE插件打开预览。

---
presentation:
    width: 1080
    height: 720
---

<!-- slide -->分割页面

<!-- slide vertical=true -->分割小节

mermaid.js

mermaid是一个绘制各种图形(如流程图,甘特图等的插件)

cmd markdown关于mermaid的帮助

这里不再深入讨论