Html中Markdown的處理

marked是一個優秀的,開源的Markdown處理庫,可以在web應用中處理Markdown文件

先看下效果效果:
在這裏插入圖片描述
再上代碼:

當運行下邊的代碼時,我們已經可以正常將Markdown渲染爲HTML,但是對於Markdown中的代碼片段,卻不能高亮顯示。可以配合highlight.js 用於web的語法高亮顯示。我們在其中配置項langPrefix: 'hljs '就是用於Markdown中代碼片段的高亮顯示。

    <script src="~/thirdparty/highlight/9.16.2/highlight.pack.js" asp-append-version="true"></script>
    <script src="~/lib/marked/lib/marked.js" asp-append-version="true"></script>
    <script>
        $('#md').bind('input propertychange', function () {
            let md = this.value;
            marked.setOptions({
                renderer: new marked.Renderer(),
                highlight: function (code) {
                    return hljs.highlightAuto(code).value;
                },
                langPrefix: 'hljs ',
                pedantic: false,
                gfm: true,
                breaks: false,
                sanitize: false,
                smartLists: true,
                smartypants: false,
                xhtml: false
            });
            $('#content').html(marked(md));
        });
    </script>
<div class="row">
    <div class="col-md-6">
        <div id="edit" class="form-group">
            <textarea class="form-control" id="md" rows="10"></textarea>
        </div>
    </div>
    <div class="col-md-6">
        <div id="content">

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