如何在静态页面上使用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

个人我的网站-前端之攻略