博客预览功能实现
<#assign markdownContent = blog.content />
<#import '../../custom/script.html' as s />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<@s.jquery_with_bootstrap />
<link rel="stylesheet" href="/lib/preview_md/preview.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div class="container">
<script src="/lib/preview_md/preview.js"></script>
<textarea class="hidden" id="content_md">${markdownContent!}</textarea>
<#if blog.firstImage??>
<div class="row">
<div style="text-align: center;overflow: hidden">
<img src="${blog.firstImage!}?x-oss-process=image/resize,w_803,h_391,limit_0" alt="图片加载不支持" style="width: 803px;height: 391px;margin:0px auto;position: relative">
</div>
<div class="sub-container" id="preview" style="min-height: 515px;margin: auto;min-height: 515px;width: 803px">
</div>
</div>
</#if>
<#-- <div class="row">-->
<#-- -->
<#-- </div>-->
<script>
$(document).ready(function () {
_setPreview($('#content_md').val())
})
</script>
</div>
</body>
</html>
function __convertMarkdownToHTML(markdown) {
return marked(markdown);
}
function _setPreview(markdownContent) {
$("#preview").html(__convertMarkdownToHTML(markdownContent))
}
加入 hightlight 使代码语法高亮
<#assign markdownContent = blog.content />
<#import '../../custom/script.html' as s />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<@s.jquery_with_bootstrap />
<link rel="stylesheet" href="/lib/preview_md/preview.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<#-- <#– 代码高亮显示 –>-->
<#-- <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">-->
<#-- <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>-->
</head>
<body>
<div class="container">
<script src="/lib/preview_md/preview.js"></script>
<textarea class="hidden" id="content_md">${markdownContent!}</textarea>
<#if blog.firstImage??>
<div class="row">
<div style="text-align: center;overflow: hidden">
<img src="${blog.firstImage!}?x-oss-process=image/resize,w_803,h_391,limit_0" alt="图片加载不支持" style="width: 803px;height: 391px;margin:0px auto;position: relative">
</div>
<div class="sub-container" id="preview" style="min-height: 515px;margin: auto;min-height: 515px;width: 803px">
</div>
</div>
</#if>
<#-- <div class="row">-->
<#-- -->
<#-- </div>-->
<script>
$(document).ready(function () {
_setPreview($('#content_md').val())
hljs.initHighlightingOnLoad();
})
</script>
</div>
</body>
</html>