将 robins 主题更改为 Mnews 主题后，突出显示代码成为一个难题。每次都要去 https://www.huizhanii.com/coderender.html 生成高亮代码，很麻烦，所以想移植这个页面，方便以后写文章的时候生成高亮代码。但是我有点白。刚开始移植后，css风格很糟糕。花了一个晚上终于在百度上得到了信息。对了，就录吧！
复制 PHP 代码
1.打开 robin:https://www.huizhanii.com/coderender.html,突出显示的代码页，右键单击 review 元素，然后复制下一个代码:
<div class="entry-code">
<div class="code-box">
<div class="code-h">输入源代码</div>
<!-- <div id="copypaste">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="docopy('source')"> 复制 </a>
|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="dopasted('source')"> 粘贴 </a>
|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="doclear('source')"> 清除 </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">选择语言:
<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">选项：
<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()>转 换</button>
<button onclick=clearText()>清 除</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.huizhanii.com/wp-content/themes/theme/highlight.css">6.上传 highlight.css 和 highlight.js 到网站目录【PS:文件的绝对位置应该和上面的代码位置一样】
七、新页面中，模板选择代码可以高亮显示。
需要在 coderender 软件目录中提取 PS: highlight.css 文件。
转载请注明：汇站网 » 移植代码高亮页面到本站
微信扫一扫 
支付宝扫一扫 
阿区可能么
