拷贝PHP代码
一、打开知更鸟的高亮代码页面:http://zmingcx.com/coderender.html,右键审查元素,复制下代码:
- <div class="entry-code">
- <div class="code-box">
- <div class="code-h">输入源代码</div>
- <!-- <div id="copypaste">
- <a href="#" onclick="docopy('source')"> 复制 </a>
- |<a href="#" onclick="dopasted('source')"> 粘贴 </a>
- |<a href="#" 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;
- }
JS代码
F12审查元素,刷新页面,过滤JS,把highlight.js文件下载到本地
Page页面
从网站主题根目录下载page.php文件到本地桌面,使用notepad++等代码编辑器编辑【PS:不同主题修改的地方可能不一致,根据实际情况修改】,这里我以Mnews主题为例修改
文件修改
一、首先把文件名修改成:template-code.php,文件头部<?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>
五、把highlight.css文件上传到网站根目录或者主题目录下,并把以下代码添加到当前主题head.php文件前【PS:注意css文件所在位置的绝对地址】:
- <link rel="stylesheet" href="https://www.manwuji.com/wp-content/themes/theme/highlight.css">
六、把highlight.css和highlight.js上传到网站目录【PS:文件绝对位置跟以上代码位置需相同】
七、新建页面,模板选择代码高亮发布即可
PS:highlight.css文件需在coderender软件目录下提取
最后
附上成品文件及样式文件【PS:只适用于Mnews主题】
蓝奏云:https://www.lanzous.com/i2t6zsf 密码:5c60