移植代码高亮页面到本站

将 robins 主题更改为 Mnews 主题后，突出显示代码成为一个难题。每次都要去 https://www.huizhanii.com/coderender.html 生成高亮代码，很麻烦，所以想移植这个页面，方便以后写文章的时候生成高亮代码。但是我有点白。刚开始移植后，css风格很糟糕。花了一个晚上终于在百度上得到了信息。对了，就录吧！

复制 PHP 代码
1.打开 robin:https://www.huizhanii.com/coderender.html,突出显示的代码页，右键单击 review 元素，然后复制下一个代码:

java文本编辑

二、获取样式文件的地址，右键点击新建选项卡打开，Ctrl+F 搜索:entry-code 复制下面的代码，排列成下面的格式:

.entry-code {
    padding: 10px;
}
.code-h {
    font-size: 15px;
    font-weight: bold;
    margin: 0 -30px 5px -30px;
    padding: 0 0 0 30px;
}
.code-box  {
    margin: 20px 10px 10px 0;
}
.entry-code textarea {
    background: #fff;
    padding: 10px;
    border: 1px solid #ebebeb;
}
.options {
    background: #f8f8f8;
    margin: 10px 10px 10px 0;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}
.entry-code button {
    color: #fff;
    line-height: 37px;
    padding: 0 18px;
    background: #2C74E6;
    border: 1px solid #2C74E6;
    cursor:pointer;
    border-radius: 2px;
    margin-right: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.entry-code button:hover {
    background: #666;
    border: 1px solid #555;
}
.entry-code select {
    border: 1px solid #ccc;
    width: 92px;
    padding:2px;
}
.entry-code p {
    color: #888;
    text-indent: 0em;
    margin: 0 0 5px 0;
}
.options_no {
    display: none;
}

javascript，javascript
F12 检查元素，刷新页面，过滤 JS，并在本地下载 highlight.js 文件。

页
将网站主题根目录下的 page.php 文件下载到本地桌面，使用记事本++等代码编辑器进行编辑[PS:不同主题的修改可能不一致，需要根据实际情况进行修改]。在这里，我以 Mnews 的主题为例。

文件修改
首先，将文件名更改为 template-code.php，并将文件头中的内容更改为以下内容:

/*
Template Name: 代码高亮
*/
get_header();
global $salong;

PS:原代码中有一些不必要的代码，比如获取文章的页面 id，改为页面模板必要的模板名称参数，获取网站的标题信息和主题函数变量[小白解释]
二、添加加载 js 文件的代码[PS:注意 js 文件所在位置的绝对地址]:

三、添加加载 CSS 样式代码，添加刚才拷贝下来的代码：

5.将 highlight.css 文件上传到网站的根目录或主题目录，在当前主题 head.php 文件的前面添加以下代码[PS:注意 css 文件所在的绝对地址]:

6.上传 highlight.css 和 highlight.js 到网站目录【PS:文件的绝对位置应该和上面的代码位置一样】

七、新页面中，模板选择代码可以高亮显示。

需要在 coderender 软件目录中提取 PS: highlight.css 文件。

转载请注明：汇站网 » 移植代码高亮页面到本站