Laravel 给highlight.js高亮插件 添加增加行数

highlight.js 代码高亮插件,默认情况是不显示行数的,现在很多博客编辑器显示代码片都是有行数的,于是在网上查找一下,发现有相同的问题发布并得到解决。

首先吧代码片中的换行(n)都替换成 </li><li>, 然后在代码内容的前面添加 <ul><li>, 而最后 添加 </li></ul>,这样以来,代码就被<li></li>每行隔开了,然后通过css添加行数,就非常简单了。

Laravel 给Markdow代码片添加高亮-点击

具体实现方法
1.在前端展示页面添加一段js代码

//代码高亮自定义
$("code").each(function(){
  $(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
});

2.添加css样式

.hljs {
    border: 0;
    font-family: "Consulas", "Courier New", Courier, mono, serif;
    font-size: 12px;
    background: #eee !important;
    display: block;
    padding: 1px;
    margin: 0;
    width: 100%;
    font-weight: 200;
    color: #333;
    white-space: pre-wrap
}
.hljs ul {
    list-style: decimal;
    background-color: #fff;
    margin: 0px 0px 0 40px !important;
    padding: 0px;
}
.hljs ul li {
    list-style: decimal-leading-zero;
    border-left: 1px solid #ddd !important;
    background: #fff;
    padding: 5px!important;
    margin: 0 !important;
    line-height: 14px;
    word-break: break-all;
    word-wrap: break-word;
}
.hljs ul li:nth-of-type(even) {
    background-color: #fcfcfc;
    color: inherit;
}

OK 这样就完成了。

阅读 172

Comments