如何在靜態頁面上使用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

個人我的網站-前端之攻略