PbootCMS攻略

highlight实现pbootCMS源码高亮和行号功能

时间:2020-04-28   访问量:33 ()

直接引用远程的highlight文件实现:

<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>
<script>hljs.initHighlightingOnLoad();</script>

引用之后,但是好像并没有出现这个效果呢?

原来后台提交后生成的代码语言标签为:

<pre class="brush:html;toolbar:false">
你的源码
</pre>

而highlight解析的标签格式默认为:

<pre>
       <code>
        你的源码
        </code>
</pre>

把代码文件稍做修改,使用pre标签:

<link rel="stylesheet" type="text/css" href="{pboot:sitetplpath}/highlight/tomorrow-night-eighties.css">
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlight.pack.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre').forEach((block) => {
        hljs.highlightBlock(block);
      });
    });
</script>

强制刷新,看看效果。

1588062246633.jpg

高亮效果基本上完成了。

highlight有关文件可以下载到服务器,本地加载,加载代码如下:

<link rel="stylesheet" type="text/css" href="{pboot:sitetplpath}/highlight/tomorrow-night-eighties.css">
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlight.pack.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre').forEach((block) => {
        hljs.highlightBlock(block);
      });
    });
</script>


源文件下载:highlight.zip


更多风格文件,可以自行下载:https://highlightjs.org/download/


增加行号的功能


文件引用:

<link rel="stylesheet" type="text/css" href="{pboot:sitetplpath}/highlight/tomorrow-night-eighties.css">
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlight.pack.js"></script>
<script type="text/javascript" src="{pboot:sitetplpath}/highlight/highlightjs-line-numbers.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre').forEach((block) => {
        hljs.highlightBlock(block);
         hljs.lineNumbersBlock(block);
      });
    });
</script>

highlightjs-line-numbers.js为行号插件。

默认的效果不太理想,修改一下css。

<style>
    .hljs {
    padding: 0;
            margin-bottom: 24px;
            border-radius: 2px;
            border: 1px solid #C3CCD0;
    }
    .hljs-ln td {
    padding: 2px 5px 2px 10px;
}
/* 数字 */
td.hljs-ln-numbers {
    text-align: right;
    color: #AAA;
    background-color: #EEE;
    border-right: 1px solid #C3CCD0;
    vertical-align: top;
    font-family: Menlo, monospace;
}
/* 数字 */
td.hljs-ln-code {
    padding-left: 5px;
}
    </style>

效果和本站效果类似(本站使用的另外方式实现的)。

行号插件本站下载:highlightjs-line-numbers.js.zip,下载后解压到highlight文件夹。

友情链接: PbootCMS

TOP