移植代码高亮页面到本站

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

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

<div class="entry-code"&gt;
    <div class="code-box">
        <div class="code-h">输入源代码</div>
        <!-- <div id="copypaste">
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="docopy('source')">&nbsp;复制&nbsp;</a>
            |<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="dopasted('source')">&nbsp;粘贴&nbsp;</a>
            |<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="doclear('source')">&nbsp;清除&nbsp;</a>
        </div> -->
        <textarea title="输入源代码." class=java id=sourceCode style="width: 100%" name=sourceCode rows=6></textarea>
    </div>
    <div class="code-box">
        <div class="code-h">转换设置</div>
        <span class="options">选择语言:&nbsp;&nbsp;
            <select onchange="document.getElementById('sourceCode').className=this.value">
                <option value=java selected>java</option>
                <option value=xml>xml</option>
                <option value=sql>sql</option>
                <option value=jscript>jscript</option>
                <option value=groovy>groovy</option>
                <option value=css>css</option>
                <option value=cpp>cpp</option>
                <option value=c#>c#</option>
                <option value=python>python</option
                <option value=vb>vb</option>
                <option value=perl>perl</option>
                <option value=php>php</option>
                <option value=ruby>ruby</option>
                <option value=delphi>delphi</option>
            </select>
        </span>
        <span class="options">选项：&nbsp;
            <input id=showGutter type=checkbox checked> 显示行号
            <input id=firstLine type=checkbox checked> 起始为1
            <span class="options_no">
                <input id=showControls type=checkbox> 工具栏
                <input id=collapseAll type=checkbox> 折叠
                <input id=showColumns type=checkbox> 显示列数
            </span>
        </span>
        <span class="render">
            <button onclick=generateCode()>转&nbsp;&nbsp;换</button>
            <button onclick=clearText()>清&nbsp;&nbsp;除</button>
        </span>
    </div>
    <div class="code-box">
        <div class="code-h">HTML 代码</div>
        <p>在WordPress文本编辑模式，将下面代码复制粘贴进去</p>
        <textarea id=htmlCode style="width: 100%" name=htmlCode rows=6></textarea>
    </div>
    <div class="code-box">
        <div class="code-h">HTML 预览</div>
        <div id="preview"></div>
    </div>
</div> <!-- .entry-code -->

二、获取样式文件的地址，右键点击新建选项卡打开，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文件所在位置的绝对地址]:

<script type="text/javascript" src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/highlight.js"></script>

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

<style type="text/css">
.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;
}
</style>

四、接下来把PHP代码插入到合适的位置，Mnews主题是插入到大概在75行左右的</head>下替换以下代码并保存：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="content_post">
    <?php the_content(); ?>
</div>

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

<link rel="stylesheet" href="https://www.zhanceo.com/wp-content/themes/theme/highlight.css">

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

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

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