实现自己的 markdown 编辑器 —— 代码区高亮

默认的 markdown 代码区是没有高亮的,例子如下:


图片

为了能让代码高亮,我们需要用另一个代码高亮的库:highlightjs
官网地址: https://highlightjs.org

使用方法如下:

<!-- 选择一个配色方案,这里用的是 solarized-dark. 更多配色方案可以在下载的完整代码包里找到 -->
<link rel="stylesheet" href="/static/highlight/styles/solarized-dark.css">
<script src="/static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

上面的用法在浏览模式时没有问题,但是在编辑模式下,编辑区变化后,预览区又失去了高亮的效果。
需要额外处理一下:

$('#mdeditor').on('input', function() {
    var to_html = converter.makeHtml($(this).val());
    $('#preview').html(to_html);
    
    //注意这里,每次更新预览区时,再高亮处理一下
    $('pre code').each(function(i, block){
        hljs.highlightBlock(block);
    });
});
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,742评论 25 709
  • 你可以使用任何文本编辑器来写 Markdown 文件。但我建议使用一个专门为这种语法设计的编辑器。这篇文章中所讨论...
    谁说我是小小云阅读 13,465评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,224评论 19 139
  • 【书名】:《聪明人是如何思考的》 【作者】:(英)比尔.卢卡斯 【收获】: 一本能够指导我们学会正确思考的学习指南...
    木木_cd40阅读 1,306评论 0 0
  • 人的记忆,真的很可怕。多年前发生的事情。仿佛很模糊,但又无比清晰。勾画出一个又一个人的轮廓,就好像中国的水墨...
    critisina阅读 1,702评论 0 0

友情链接更多精彩内容