通過瀏覽器載入的方式使用strapdown.js來渲染markdown

阿新 • • 發佈：2019-01-30

文章導讀

如何手動呼叫strapdown.js的渲染方法
html下如何將markdown 轉換為html
如何拓展strapdown.js的功能
有哪些好用的markdown渲染庫
本文二維碼

這裡寫圖片描述

本文關聯的程式碼

專案中，附有三個demo，詳情見文末

說明

strapdown是一個很棒的markdown解析庫（當然是基於javascript）的了，但是作者的目的可能是儘可能的適用於所有的場景。
所以，作者在官網給出瞭如下的使用說明

<!DOCTYPE html>
<html>
<title>Hello Strapdown</title 
>

<xmp theme="united" style="display:none;">
# Markdown text goes in here

## Chapter 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. 

## Chapter 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp 
>

<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

從上面的程式碼可以看出，我們需要在html中定義一個xmp或者textarea的html元素（當然，如果你不看原始碼的話，是不會發現也可以用textarea來替代xmp元素的）。然後，根據原始碼中的描述，strapdown會獲取我們的xmp中的markdown程式碼，然後利用document來解析我們頁面中的link、script、meta資訊，然後將利用document.createElement方法動態的對我們的當前頁重新進行渲染。

為什麼要修改作者的程式碼庫

從上一節的描述中，我們可以瞭解到，原來的解析方式會替換我們的原始頁面，也就是渲染過後的頁面只會保留最基本的內容（渲染出來的markdown）。因此，我們想有一種方式可以按需進行渲染。

因此，我們對原始的strapdown.js進行了如下的修改(替換了原始檔案的最後一個自執行函式)：


/**
 * 根據傳入的$src來獲取markdown的內容並轉為html顯示在$desc元素下
 * 如果$desc元素為undefine，則顯示$src元素中
 * @param $src markdown內容的載體
 * @param $desc 渲染過後markdown內容的載體
 */
var markdown = function ($src, $desc) {

    if ($desc == undefined) {
        $desc = $src;
    }
    document.body.style.display = 'none';
    var markdownEl = document.getElementById($src);//markdown載體
    var htmlEl = document.getElementById($desc); //html載體
    var markdown = markdownEl.innerText;//注意這裡必須是innerText，使用Jquery時，請使用$.text()

    // Generate Markdown
    var html = marked(markdown);
    htmlEl.innerHTML = html;

    // Prettify
    var codeEls = document.getElementsByTagName('code');
    for (var i = 0, ii = codeEls.length; i < ii; i++) {
        var codeEl = codeEls[i];
        var lang = codeEl.className;
        codeEl.className = 'prettyprint lang-' + lang;
    }
    prettyPrint();

    // Style tables
    var tableEls = document.getElementsByTagName('table');
    for (var i = 0, ii = tableEls.length; i < ii; i++) {
        var tableEl = tableEls[i];
        tableEl.className = 'table table-striped table-bordered';
    }
    // All done - show body
    document.body.style.display = '';

};

/**
 * 根據傳入的$data作為markdown的內容並轉為html顯示在$desc元素下
 * @param $data markdown內容
 * @param $desc 渲染過後markdown內容的載體
 */
var markdownFromText = function ($data, $desc) {

    // Generate Markdown
    var html = marked($data);
    document.getElementById($desc).innerHTML = html;

    // Prettify
    var codeEls = document.getElementsByTagName('code');
    for (var i = 0, ii = codeEls.length; i < ii; i++) {
        var codeEl = codeEls[i];
        var lang = codeEl.className;
        codeEl.className = 'prettyprint lang-' + lang;
    }
    prettyPrint();

    // Style tables
    var tableEls = document.getElementsByTagName('table');
    for (var i = 0, ii = tableEls.length; i < ii; i++) {
        var tableEl = tableEls[i];
        tableEl.className = 'table table-striped table-bordered';
    }
};

使用方式

由於我們對作者的原始庫進行了大量的程式碼精簡，因此，樣式的選擇，我們需要手動的載入themes資料夾下的樣式主題。

下面給出兩個實際的使用案例

案例1

呼叫markdown傳遞1個引數，可以原始的markdown載體元素作為渲染後的html的載體

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>strapdown渲染markdown的demo</title>
    <link href="./static/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/reset.css" rel="stylesheet">
    <link href="./static/css/site.css" rel="stylesheet">
    <link href="./static/css/lib.css" rel="stylesheet">

    <link href="../strapdown/strapdown.css" rel="stylesheet">
    <link href="../strapdown/themes/readable.min.css" rel="stylesheet">
</head>
<body>
<div class="bt-warp bge6">
    <div id="container" class="container-fluid">
        <div class="sidebar-scroll">
            <div class="sidebar-auto">
                <div id="task" class="task cw" onclick="task()"></div>
                <h3 class="mypcip"><span class="f14 cw" id="serverip">localhost</span></h3>
                <ul class="menu">
                    <li><a class="menu_home" href="index.html">demo1</a></li>
                    <li><a class="menu_folder" href="index2.html">demo2</a></li>
                    <li><a class="menu_fork" href="http://github.com/sixtrees/strapdownify">fork</a></li>
                </ul>
            </div>
        </div>
        <div class="main-content">
            <div class="container-fluid" style="padding-bottom:50px">
                <div id="mdcontent">

                </div>
            </div>
        </div>


    </div>


    <div class="footer bgw">
        markdown內容渲染框架 ©2017-2017
        <a style="margin-left:20px;color:#20a53a;" href="http://github.com/sixtrees/strapdownify"
           target="_blank">strapdownify on github</a>
    </div>
</div>

<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/layer/layer.js"></script>
<script src="../strapdown/strapdown.js"></script>

<script>
    var loadT = layer.msg('正在載入...', {icon: 16, time: 0, shade: [0.3, '#000']});
    $.ajax({
        url: 'readme.md',
        type: "POST",
        dataType: "text",
        success: function (data) {
            $("#mdcontent").text(data);
            markdown("mdcontent");
            layer.close(loadT);
        }
    });
</script>
</body>

</html>

案例2

呼叫markdown傳遞兩個引數，可以原始的markdown載體元素需要手動設定為隱藏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>strapdown渲染markdown的demo</title>
    <link href="./static/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/reset.css" rel="stylesheet">
    <link href="./static/css/site.css" rel="stylesheet">
    <link href="./static/css/lib.css" rel="stylesheet">

    <link href="../strapdown/strapdown.css" rel="stylesheet">
    <link href="../strapdown/themes/readable.min.css" rel="stylesheet">
</head>
<body>
<div class="bt-warp bge6">
    <div id="container" class="container-fluid">
        <div class="sidebar-scroll">
            <div class="sidebar-auto">
                <div id="task" class="task cw" onclick="task()"></div>
                <h3 class="mypcip"><span class="f14 cw" id="serverip">localhost</span></h3>
                <ul class="menu">
                    <li><a class="menu_home" href="index.html">demo1</a></li>
                    <li><a class="menu_folder" href="index2.html">demo2</a></li>
                    <li><a class="menu_fork" href="http://github.com/sixtrees/strapdownify">fork</a></li>
                </ul>
            </div>
        </div>
        <div class="main-content">
            <div class="container-fluid" style="padding-bottom:50px">
                <textarea id="mdcontent" style="display: none;">

                </textarea>
                <div id="htmlcontent">

                </div>
            </div>
        </div>


    </div>


    <div class="footer bgw">
        markdown內容渲染框架 ©2017-2017
        <a style="margin-left:20px;color:#20a53a;" href="http://github.com/sixtrees/strapdownify"
           target="_blank">strapdownify on github</a>
    </div>
</div>

<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/layer/layer.js"></script>
<script src="../strapdown/strapdown.js"></script>

<script>
    var loadT = layer.msg('正在載入...', {icon: 16, time: 0, shade: [0.3, '#000']});
    $.ajax({
        url: 'readme.md',
        type: "POST",
        dataType: "text",
        success: function (data) {
            $("#mdcontent").text(data);
            markdown("mdcontent", "htmlcontent");
            layer.close(loadT);
        }
    });
</script>
</body>

</html>

案例3

呼叫markdownFromText

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>strapdown渲染markdown的demo</title>
    <link href="./static/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/reset.css" rel="stylesheet">
    <link href="./static/css/site.css" rel="stylesheet">
    <link href="./static/css/lib.css" rel="stylesheet">
    <!--載入樣式-->
    <link href="../strapdown/strapdown.css" rel="stylesheet">
    <link href="../strapdown/themes/readable.min.css" rel="stylesheet">
</head>
<body>
<div class="bt-warp bge6">
    <div id="container" class="container-fluid">
        <div class="sidebar-scroll">
            <div class="sidebar-auto">
                <div id="task" class="task cw" onclick="task()"></div>
                <h3 class="mypcip"><span class="f14 cw" id="serverip">localhost</span></h3>
                <ul class="menu">
                    <li><a class="menu_home" href="index.html">demo1</a></li>
                    <li><a class="menu_folder" href="index2.html">demo2</a></li>
                    <li><a class="menu_fork" href="http://github.com/sixtrees/strapdownify">fork</a></li>
                </ul>
            </div>
        </div>
        <div class="main-content">
            <div class="container-fluid" style="padding-bottom:50px">
                <div id="mdcontent">

                </div>
            </div>
        </div>
    </div>


    <div class="footer bgw">
        markdown內容渲染框架 ©2017-2017
        <a style="margin-left:20px;color:#20a53a;" href="http://github.com/sixtrees/strapdownify"
           target="_blank">strapdownify on github</a>
    </div>
</div>

<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/layer/layer.js"></script>
<script src="../strapdown/strapdown.js"></script>

<script>
    var loadT = layer.msg('正在載入...', {icon: 16, time: 0, shade: [0.3, '#000']});
    $.ajax({
        url: 'readme.md',
        type: "POST",
        dataType: "text",
        success: function (data) {
            markdownFromText(data, "mdcontent");
            layer.close(loadT);
        }
    });
</script>
</body>

</html>

踩過的坑

不能直接用div的innerHtml或者jquery的html()方法來給markdown內容的載體設定值，應該使用text或者innerText。

通過瀏覽器載入的方式使用strapdown.js來渲染markdown

文章導讀如何手動呼叫strapdown.js的渲染方法 html下如何將markdown 轉換為html 如何拓展strapdown.js的功能有哪些好用的markdown渲染庫本文二維碼本文關聯的程式碼專案中，附有三個demo，詳

前端JS的載入方式？JS的非同步載入

過多js載入會影響頁面效率，一旦網速不好，那麼整個網站將等待js載入而不進行後續渲染等工作。有些工具方法需要按需載入，用到再載入，不用不載入。預設正常模式下，JS是同步載入的，即優先載入JS，只有當JS檔案下載完，dom和css才開始載入，當某些時候我們需要J

通過瀏覽器載入程式選擇檔案路徑方法

通過瀏覽器瀏覽器選擇預覽檔案儲存路徑在工作中遇到這個需求，需要選擇檔案的儲存這裡我列舉兩種方法供大家參考： 1、通過SHBrowseForFolder實現具體程式碼和講解如下： wchar_t szPath[MAX_PATH]; //存放選擇的目錄路徑 Zero

js定時器瀏覽器載入渲染

window.onload = function (){ var time_$ = $('.time_s'); for(var i = 0 ;i<time_$.length;i++){ var s = parseInt($(

java web客戶端整合cas，web.xml通過編碼的方式來載入配置

前言：專案整合cas單點登入，需要在web.xml里加上cas-client的過濾器配置，但是配置地址太繁瑣，而且有重複配置，能不能讓web.xml去讀properties檔案，只做一次配置。在porperties裡配置cas單點開關引數，開就載入cas配置，整合cas，關就不整合。

通過traceur.js來編寫ES6

char 編寫 scrip charset rac href mpat option script 通過traceur.js來編寫ES6 <!DOCTYPE html><html><head> <meta charset="u

js 通過瀏覽器直接打開應用程序（IOS，Android）並判斷瀏覽器內核

agent rtt 程序 javascrip ref java lock roi col 本功能主要用於手機端，如果手機未安裝該APP，則跳轉至下載頁面；否則，直接打開手機中的APP。 <div style="position:absolute; top:84%;

移動端通過js來用rem控制字體大小的用法

mar blog max-width size 結束 idt height clas eset 通過js來控制頁面字體大小，直接上代碼： (function() { var rootHtml = $(":root"); var rootResize = function(

js 通過瀏覽器直接打開應用程序（IOS，Android）標簽： androidios

idm reserve port -a and 網站 als amp param 實現效果如下圖所示，在手機瀏覽器中訪問京東的手機版網站(m.jd.com)，頂部會有一個廣告圖，點擊這個廣告圖，如果手機上已經安裝了京東App，則直接打開，如果沒有安裝，則開始下載。實現

多進程瀏覽器、多線程頁面渲染與js的單線程

發展 webkit 應用程序 rep 內核 sync 輸入 splay interval 線程與進程說到單線程，就得從操作系統進程開始說起。在早期的操作系統中並沒有線程的概念，進程是能擁有資源和獨立運行的最小單位，也是程序執行的最小單位。任務調度采用的是時間片輪轉的搶占式

使用ioc創建對象的方式之一(通過無參的構造方法來創建：)

imp ext test code 創建對象 .sh sta [] spring 通過無參的構造方法來創建： User.java 1 package com.yikuan.vo; 2 3 public class User { 4 public User

判斷 php 程序是通過什麽方式運行的 (瀏覽器，還是命令行)

需要 type api return gin () 運行服務 using php 程序既可以通過瀏覽器來訪問（一般是 apache、nginx等服務器），也可以通過命令行來直接運行（cli 執行）如果需要判斷當前程序是以何種方式來執行，應該怎樣判斷呢，使用：php_

EasyUI 關於 panel,window,dialog 通過href載入頁面,頁面中引用的js不執行的解決方案

詳細說明請參閱:http://www.jeasyuicn.com/post-49.html href 指向的頁面不能是完整的html頁面,需要是不包含html,body,head標籤的html片段, 如 <link href="/resources/css/dhteu

瀏覽器載入Angular Web應用的方式

瀏覽器載入Angular Web應用的方式： 1、瀏覽器獲取Html程式碼並開始構建Dom樹。 2、瀏覽器在構建Dom樹的過程中遇到了angular.js，這時就會提取指令碼（angular.js檔案），暫停Dom樹的構建直至js檔案提取完成。 3、angular.js檔案提取完成後會設

使用Browserify來實現CommonJS的瀏覽器載入

前面的話　　Nodejs的模組是基於CommonJS規範實現的，可不可以應用在瀏覽器環境中呢？ var math = require('math'); math.add(2, 3); 　　第二行math.add(2, 3)，在第一行require('math')之後執行，因此必須等math.

在微信中，如何通過超連結方式開啟系統預設瀏覽器?

今天從京東那裡看到一個實際的例子，很想知道原理是什麼，京東的例子是這樣的：通過掃描京東的二維碼，然後微信就直接跳轉頁面，中途就直接跳出選擇其他瀏覽器開啟這是怎麼做到的？我在網上查過，很多從微信內直接跳轉事件，跳到其他瀏覽器視窗的事件都不行的，那以上的是怎麼做到的？ 1、開啟麥粒

瀏覽器載入js的阻塞與非阻塞

這幾天因專案需求，要實現一系列的js檔案載入的問題，於是，就按照常規思路寫了一通，悲催的是測試後發現問題重重；為什麼會有這麼多問題，仔細想來還是對瀏覽器載入js的原理理解不透，於是我翻閱了大量的資料和自己的一些實踐，總結出來以下的內容； 1、js在瀏覽器中的阻塞常規理解就是瀏覽器在載入js

瀏覽器載入、解析、渲染的過程

最近在學習效能優化，學習了雅虎軍規，可是覺著有點雲裡霧裡的，因為裡面有些東西雖然自己也一直在使用，但是感覺不太明白所以然，比如減少DNS查詢，css和js檔案的順序。所以就花了時間去了解瀏覽器的工作，有一篇經典的文章《how browsers work》，講

js指令碼載入方式：本地載入與cdn雲加速載入那個速度更快？

本地載入 CDN雲載入（1）只把hifhstock.js改為CDN載入：結果：250ms大於151ms，cdn雲載入速度慢，比本地載入慢100多ms （2）只把jquery-3.2

通過右鍵安裝inf檔案來安裝驅動程式這種方式可取嗎?

很多人拿到驅動包準備安裝驅動時，往往先想到通過滑鼠右鍵-安裝這種方式來安裝驅動。且不說能不能安裝成功，要支援這種安裝方式，對inf檔案有一定的要求：inf檔案中需要包含[DefaultInstall]這樣的節，這個節是右鍵安裝時的Inf入口點(MSDN的原話:"An

通過瀏覽器載入的方式使用strapdown.js來渲染markdown

文章導讀

本文關聯的程式碼

說明

為什麼要修改作者的程式碼庫

使用方式

案例1

案例2

案例3

踩過的坑

相關推薦