天天看點

Html中Markdown的處理

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

先看下效果效果:

Html中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>
           

繼續閱讀