前端显示markdown

最新推荐文章于 2024-05-22 10:03:59 发布

.Passion

最新推荐文章于 2024-05-22 10:03:59 发布

阅读量868

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/113837109

版权

CRUD 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

博客预览功能实现


<#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>

    <#--    &lt;#&ndash;    代码高亮显示  &ndash;&gt;-->
    <#--    <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();
            // hljs.initHighlightingOnLoad();
        })
    </script>

</div>

</body>

</html>

.Passion

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端显示markdown

<#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/pre.
复制链接

扫一扫