如何在静态页面上使用markdown排版 原
”Markdown是一种轻量级标记语言，创始人是约翰·格鲁伯（John Gruber）。它允许人们 “使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML 文档。”,转换成html最方便的方式是用插件
我找了几个插件，最后觉得还是atome的markdown-preview-enhanced插件比较好用，预览界面简洁美观，效果如下：
首先安装markdown-preview-enhanced插件(安装成功后会在扩展中显示，点击Toggle可以实时看效果)
如果把显示的效果放到外面静态页面中，在markdow preview 界面右键-HTML-HTML(offline) 导出html，导出的html中包含着样式，我们可以把样式单独放在一个文件中，供其他页面使用
markdown-preview-enhanced插件的语法与markdown基本一样，主要区别是代码块，如果要高亮，需要在```后增加代码的类型，如css，javascript，html等
详细语法说明：
标题
# 这是 <h1> 一级标题 ## 这是 <h2> 二级标题 ### 这是 <h3> 三级标题 #### 这是 <h4> 四级标题 ##### 这是 <h5> 五级标题 ###### 这是 <h6> 六级标题
强调
这会是 斜体 的文字 这会是 斜体 的文字 这会是 粗体 的文字 这会是 粗体 的文字 你也 组合 这些符号
这个文字将会被横线删除
无序列表
* Item 1 * Item 2 * Item 2a * Item 2b
1. Item 1 1. Item 2 1. Item 3 1. Item 3a 1. Item 3b
> We're living the future so > the present is our past.
--- 连字符 *** 星号 ___ 下划线
我觉得你应该在这里使用
<addr>才对。
代码块
你可以在你的代码上面和下面添加 ``` 来表示代码块。
语法高亮
你可以给你的代码块添加任何一种语言的语法高亮
例如，下面代码添加语法高亮：
```html
<div class="singleLineEllipsis">单行文本溢出，单行文本溢出，</div>
<div class="multipleLineEllipsis">多行文本溢出，多行文本溢出，多行文本溢出</div>```css
```css
.singleLineEllipsis {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.multipleLineEllipsis {
width: 100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}```javascript
```javascript
function add(x, y) {
return x + y
}[代码行数](https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/markdown-basics?id=%e4%bb%a3%e7%a0%81%e8%a1%8c%e6%95%b0)
如果你想要你的代码块显示代码行数，只要添加 `line-numbers` class 就可以了。
```javascript
```javascript {.line-numbers}
function add(x, y) {
return x + y
}### [任务列表](https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/markdown-basics?id=%e4%bb%bb%e5%8a%a1%e5%88%97%e8%a1%a8)
```html
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item表格
First Header | Second Header
:----------: | -------------
|Content from cell 1| Content from cell 2|
Content in the first column | Content in the second column(adsbygoogle = window.adsbygoogle || []).push({});
腾讯云开发者
