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>