自己做一個在線markdown編輯器

準備

請使用以下使用 npm 下載以下的包

• bootstrap: “^3.4.1”,

• jquery: “^3.4.1”,

• marked: “^0.7.0”

代碼

效果圖：

直接上主要代碼，css就不行了：

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./node_modules/marked/marked.min.js"></script>
<script>
    $(function(){
        marked.setOptions({
            renderer: new marked.Renderer(),
            highlight: function(code) {
                return createul(code.split('\n'));
            },
            pedantic: false,
            gfm: true,
            breaks: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            xhtml: false
        });
        $("#md").on("keyup blur",function () {
            $('#html').html(marked($("#md").val()));
        })
    });
    function createul(strArr){
        let str = '';
        for(let item of strArr){
            str += `<li>${item}</li>`;
        }
        return `<ol>${str}</ol>`
    }
</script>
</body>
</html>

注意：

剛開始我僅僅知道使用 marked.js 把 markdown 轉換爲 html ，不能實現代碼高亮，也沒有行號

後來我看了下它的官方的API文檔，發現了 highlight 這個方法，傳入一個字符串，而這個字符串就是我們解析 markdown 遇到的 code 。所以，我們可以把這個字符串按行分割，最外面套一個 ol 標籤，每一行套一個 li，注意，返回的必須是字符串。