Markdown编辑器editor.md实现部分代码高亮
2019/3/14 16:46:04
效果
editor.md编辑内容
editor.md展示部分
思路
通过对想要高亮的行添加特定标识,来实现高亮。
实现
代码行以“gl>”开头的话,则对此行添加css类,类名为:special
在展示页面,找到包含此字符串开头的行。
观察editor.md代码块的代码,发现代码部分都是ol和li组成的,通过观察和分析来实现以下代码:
editor.md展示页添加的javaScript代码
//实现部分行高亮显示
$("ol.linenums").each(function (index, item) {
$(item).children().each(function (indexLi, itemLi) {
var innerHtml = $(itemLi).html();
//如果包含"gl>"
if (innerHtml.indexOf('gl</span><span class="pun">>') > -1) {
$(itemLi).addClass("special");
$(itemLi).html(innerHtml.replace('gl</span><span class="pun">>', ''));
}
});
});
css代码为:
li.special{
background-color:#dede0c !important;
}
扫码分享
版权说明
作者:SQBER
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
{0}
{5}
{1}
{2}回复
{4}
*昵称:
*邮箱:
个人站点:
*想说的话: