chili 默默学编程

markdown 使用及语法


1、markdown 是什么

markdown 是用于编辑器的转换工具。

举 3 个例子:

例子1: # 标题


例子2: - 无序列表、 --- 分隔符


例子3: ``` 代码(3 个反引号)



总结一下:

Markdown 是一个把文本转换成 HTML 的转换工具。

转换的办法是,通过一些简单的文本格式生成结构化的 HTML 文档。

所谓 “文本格式”,就是上面例子里的:

#- 
---
```

详细的文本格式,在下面的第 4 部分 “markdown语法” 部分有详细的总结。


2、markdown 怎么使用

很多编辑器都支持 markdown 语法,了解语法后直接使用即可。

目前 github、Stackoverflow 等网站均支持这种格式。


3、自己造一个 markdown 编辑器

markdown 编辑器,本质上就是,输入文本,输出 html 文档。

那么做一个 markdown 编辑器的意思就是,拿到输入的文本,将这个文本转换成 html 文档。


3 个步骤就能实现一个 markdown 编辑器“

  • 第一步,引入 markdown 的 js 源码
  • 第二步,生成一个 markdown 对象 md
  • 第三步,使用 md 对想要转换的内容进行渲染(render)


一个完整的例子如下:

<textarea id="id-input"></textarea>
<div id="id-output"></div>
<script src="https://cdn.bootcss.com/markdown.js /0.6.0-beta1/markdown.min.js"></script>
<script>
var e = (sel) => document.querySelector(sel)
var md = new Remarkable()
e('#id-input').addEventListener('keyup', (event) => {
var input = event.target.value
e('#id-output').innerHTML = md.render(input)
})
</script>


(参考 https://www.bootcdn.cn/markdown.js/ )


4、markdown 语法

4.1 区块元素:换行、标题、区块引用、列表、分隔线

  • 换行:

两个空格 + 回车


  • 标题:

对应的 html 元素就是 h 标签,有两类方式:

方式1:
H1
====
H2
------
方式2: # H1
## H2
### H3


  • 区块引用

在引用的文本前,加上 "<" 符号。

对应的 html 元素就是 blockquote 标签。可以嵌套。

> ## 这是一个标题。
>
> 1. 这是第一行列表项。
> 2. 这是第二行列表项。


  • 列表

无序列表:* + - 三个符号都行,转换成 ul li 标签

*   Red
* Green
* Blue

有序列表:数字加英文句号,转换成 ol li 标签

1.  Bird
2. McHale
3. Parish


  • 分隔线

三个以上 * - 即可,转换成 hr 标签

*****
- - -


4.2 区段元素:链接、强调、代码、图片

  • 链接:[],转换成 a 标签
This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.


  • 强调

使用 * _ 即可,转换为 em 标签(一个 * _ 的时候)或 strong 标签(两个 * _ 的时候)

*single asterisks*
_single underscores_
**double asterisks**
__double underscores__


  • 代码

使用 ` 反引号,对应的是 code 标签



reply ( 0 )