今天給大家推薦一個(gè)簡(jiǎn)單易用的開(kāi)源 Markdown 組件, 來(lái)自 Github 上一個(gè)美圖公司的大佬.
Markdown 是什么
Markdown 是一個(gè)簡(jiǎn)單的電子郵件風(fēng)格的標(biāo)記語(yǔ)言, 甚至比世界上最好的兩門(mén)語(yǔ)言 Python 還要簡(jiǎn)單.
使用 Markdown 碼字有以下優(yōu)點(diǎn):
- 純文本攘宙，所以兼容性極強(qiáng)瞻颂，可以用所有文本編輯器打開(kāi)鸳劳。
- 讓你專注于文字而不是排版。
- 格式轉(zhuǎn)換方便，Markdown 的文本你可以輕松轉(zhuǎn)換為 html、電子書(shū)等。
- Markdown 的標(biāo)記語(yǔ)法有極好的可讀性脓斩。
誰(shuí)在用
田牌旗下的 Github 上項(xiàng)目的 README 都是用 Markdown 寫(xiě)的, 文件后綴是.md, 網(wǎng)易云筆記, 簡(jiǎn)書(shū)也都支持 Markdown 語(yǔ)法.
很多人使用微信排版 (包括我) 也是用 Markdown 寫(xiě)完直接交給轉(zhuǎn)換插件轉(zhuǎn)化為 HTML 后復(fù)制過(guò)去一鍵搞定.
正片
今天推薦的開(kāi)源 Markdown 組件倉(cāng)庫(kù)地址是:
https://github.com/pandao/editor.md
這個(gè)倉(cāng)庫(kù)的 Markdown 擴(kuò)展了原來(lái)的 Markdown 語(yǔ)言, 常用的語(yǔ)法不在話下, 同時(shí)支持 LaTeX 公式, Emoji 表情, 以及流程圖等等.
引入編輯器
使用方法很簡(jiǎn)單, 直接把倉(cāng)庫(kù)克隆下來(lái), 然后在你的網(wǎng)頁(yè)中貼上下面的代碼:
(在 Django 或其他Web 框架中, 更推薦使用類似 Jinja 的非硬編碼引入格式而非下述的絕對(duì)地址)
<link rel="stylesheet" href="editormd.min.css" />
<div id="editormd">
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
并添加 JavaScript 代碼啟用(同樣推薦軟編碼來(lái)引入文件), 可以對(duì)編輯器的大小等進(jìn)行設(shè)置, 具體參考文檔:
<script src="jquery.min.js"></script>
<script src="editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
path : "../lib/" // Autoload modules mode, codemirror, marked... dependents libs path
});
});
</script>
引入之后大概是這個(gè)樣子:
Markdown 轉(zhuǎn)化為 HTML
如果是想把文章呈現(xiàn)在網(wǎng)頁(yè)而不是編輯, 那么引入下面的代碼即可:
<link rel="stylesheet" href="{% static 'editor/css/editormd.min.css' %}">
{# Markdown Editor #}
<div id="editormd" class="col-md-10 text-left">
<textarea style="display:none;" id="id_body"></textarea>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
width: "100%",
height: 640,
path : "{% static 'editor/lib/' %}" // Autoload modules mode, codemirror, marked... dependents libs path
});
});
</script>
需要注意的是我們?cè)?lt;textarea>標(biāo)簽中的內(nèi)容不能留有空格, 否則可能會(huì)出現(xiàn)與預(yù)想內(nèi)容不符合的情況. 例如, 第一行內(nèi)容你想設(shè)為標(biāo)題卻變成一行代碼. 舉個(gè)栗子:
假如你在 Django 中這樣寫(xiě):
<div id="editormd" class="col-md-10 text-left">
{# DO NOT left space before article.body, or the first line may become a CODE line. #}
<textarea style="display: none" id="id_body">
{ article.body }}
</textarea>
</div>
結(jié)果是:
是不是和預(yù)想的不一樣? 這是因?yàn)?textarea 標(biāo)簽里面的文字都是文本, 沒(méi)有縮進(jìn)的概念, 留了太多空格反而是 Markdown 語(yǔ)法中的代碼行引用.
現(xiàn)在把代碼改回一行, 不留空格, 結(jié)果就和預(yù)想的一樣啦
<textarea style="display: none" id="id_body">{{ article.body }}</textarea>
