Markdown學習與集成

Markdown介紹

Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內容具有一定的格式。
Markdown具有一系列衍生版本,用於擴展Markdown的功能(如表格、腳註、內嵌HTML等等),這些功能原初的Markdown尚不具備,它們能讓Markdown轉換成更多的格式,例如LaTeX,Docbook。Markdown增強版中比較有名的有Markdown Extra、MultiMarkdown、 Maruku等。這些衍生版本要麼基於工具,如Pandoc;要麼基於網站,如GitHub和Wikipedia,在語法上基本兼容,但在一些語法和渲染效果上有改動。
——以上內容來自百度百科


Markdown語法學習網站

下面介紹一下學習markdown語法的網站:

  • 學習網址一:簡書
  • 學習網址二:未知小網站
    上面是兩個學習markdown語法的網站

利用js庫集成Markdown解釋器

1. 首先去showdown的github主頁下面js庫到本地

2. 打開下載後的項目,截圖如下:

項目結構

3.打開dist文件夾,內容如下:

dist內容
這裏面的showdown.min.js就是我們待會要使用的js庫

4.將 showdown.min.js拷貝到任意文件夾,並在裏面新建html文件demo.html,內容如下:

<!DOCTYPE html>
<html>
<head>
    <title>MarkDown</title>
    <script type="text/javascript" src="showdown.min.js"></script>
</head>
<style>
    body {
      font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
     font-size: 16px;
      line-height: 1.42857143;
      color: #333;
      background-color: #fff;
    }
    ul li {
        line-height: 24px;
    }
    blockquote {
        border-left:#eee solid 5px;
        padding-left:20px;
    }
    code {
        color:#D34B62;
        background: #F9F2F4;
    }
</style>
<body>
<div>
    <textarea id="content" style="height:400px;width:600px;" onkeyup="compile()"></textarea>
    <div id="result"></div>

</div>
<script type="text/javascript">
function compile(){
    var text = document.getElementById("content").value;
    var converter = new showdown.Converter();
    var html = converter.makeHtml(text);
    document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>

結果展示

結果展示
最後在這接入markdown的過程中參考了這一片博客,感謝作者雲霏霏的博客

http://www.cnblogs.com/yunfeifei/p/4482495.html

我用了那裏面的demo,但是接入的時候修改了兩處小地方
var converter = new showdown.Converter();這是我的代碼。
作者的代碼是var converter = new Showdown.converter();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章