Markdown编辑器editor.md实现部分代码高亮

时间 2019/3/14 16:46:04 加载中...

效果

editor.md编辑内容

editor.md展示部分

思路

通过对想要高亮的行添加特定标识,来实现高亮。

实现

代码行以“gl>”开头的话,则对此行添加css类,类名为:special

在展示页面,找到包含此字符串开头的行。
观察editor.md代码块的代码,发现代码部分都是ol和li组成的,通过观察和分析来实现以下代码:

editor.md展示页添加的javaScript代码

  1. //实现部分行高亮显示
  2. $("ol.linenums").each(function (index, item) {
  3. $(item).children().each(function (indexLi, itemLi) {
  4. var innerHtml = $(itemLi).html();
  5. //如果包含"gl>"
  6. if (innerHtml.indexOf('gl</span><span class="pun">&gt;') > -1) {
  7. $(itemLi).addClass("special");
  8. $(itemLi).html(innerHtml.replace('gl</span><span class="pun">&gt;', ''));
  9. }
  10. });
  11. });

css代码为:

  1. li.special{
  2. background-color:#dede0c !important;
  3. }
扫码分享
版权说明
作者:SQBER
文章来源:http://www.sqber.com/articles/editor.md-partial-highlight.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。