文章
文章用户商铺文档快讯圈子网址导航供求信息

移植代码高亮页面到本站

把知更鸟主题更换成Mnews主题后，代码高亮就成了难题，每次都要去http://zmingcx.com/coderender.html生成高亮代码，非常麻烦，于是就想把这页面移植过来，方便以后写文章时高亮代码的生成，奈何本人是个小白，起初移植过来后css样式惨不忍睹，历时一晚上在百度上扒资料终于搞定，顺便就记录一下吧！

移植代码高亮页面到本站

拷贝PHP代码

一、打开知更鸟的高亮代码页面：http://zmingcx.com/coderender.html，右键审查元素，复制下代码：

  1. <div class="entry-code">
  2.     <div class="code-box">
  3.         <div class="code-h">输入源代码</div>
  4.         <!-- <div id="copypaste">
  5.             <a href="#" onclick="docopy('source')">&nbsp;复制&nbsp;</a>
  6.             |<a href="#" onclick="dopasted('source')">&nbsp;粘贴&nbsp;</a>
  7.             |<a href="#" onclick="doclear('source')">&nbsp;清除&nbsp;</a>
  8.         </div> -->
  9.         <textarea title="输入源代码." class=java id=sourceCode style="width: 100%" name=sourceCode rows=6></textarea>
  10.     </div>
  11.     <div class="code-box">
  12.         <div class="code-h">转换设置</div>
  13.         <span class="options">选择语言:&nbsp;&nbsp;
  14.             <select onchange="document.getElementById('sourceCode').className=this.value">
  15.                 <option value=java selected>java</option>
  16.                 <option value=xml>xml</option>
  17.                 <option value=sql>sql</option>
  18.                 <option value=jscript>jscript</option>
  19.                 <option value=groovy>groovy</option>
  20.                 <option value=css>css</option>
  21.                 <option value=cpp>cpp</option>
  22.                 <option value=c#>c#</option>
  23.                 <option value=python>python</option
  24.                 <option value=vb>vb</option>
  25.                 <option value=perl>perl</option>
  26.                 <option value=php>php</option>
  27.                 <option value=ruby>ruby</option>
  28.                 <option value=delphi>delphi</option>
  29.             </select>
  30.         </span>
  31.         <span class="options">选项：&nbsp;
  32.             <input id=showGutter type=checkbox checked> 显示行号
  33.             <input id=firstLine type=checkbox checked> 起始为1
  34.             <span class="options_no">
  35.                 <input id=showControls type=checkbox> 工具栏
  36.                 <input id=collapseAll type=checkbox> 折叠
  37.                 <input id=showColumns type=checkbox> 显示列数
  38.             </span>
  39.         </span>
  40.         <span class="render">
  41.             <button onclick=generateCode()>转&nbsp;&nbsp;换</button>
  42.             <button onclick=clearText()>清&nbsp;&nbsp;除</button>
  43.         </span>
  44.     </div>
  45.     <div class="code-box">
  46.         <div class="code-h">HTML 代码</div>
  47.         <p>在WordPress文本编辑模式，将下面代码复制粘贴进去</p>
  48.         <textarea id=htmlCode style="width: 100%" name=htmlCode rows=6></textarea>
  49.     </div>
  51.     <div class="code-box">
  52.         <div class="code-h">HTML 预览</div>
  53.         <div id="preview"></div>
  54.     </div>
  55. </div> <!-- .entry-code -->

二、获取样式文件地址，右键在新标签页打开，Ctrl+F搜索：entry-code复制以下代码并进行整理成以下格式：

  1. .entry-code {
  2.     padding: 10px;
  3. }
  4. .code-h {
  5.     font-size: 15px;
  6.     font-weight: bold;
  7.     margin: 0 -30px 5px -30px;
  8.     padding: 0 0 0 30px;
  9. }
  10. .code-box  {
  11.     margin: 20px 10px 10px 0;
  12. }
  13. .entry-code textarea {
  14.     background: #fff;
  15.     padding: 10px;
  16.     border: 1px solid #ebebeb;
  17. }
  18. .options {
  19.     background: #f8f8f8;
  20.     margin: 10px 10px 10px 0;
  21.     padding: 10px 15px;
  22.     border: 1px solid #ccc;
  23.     border-radius: 2px;
  24.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
  25. }
  26. .entry-code button {
  27.     color: #fff;
  28.     line-height: 37px;
  29.     padding: 0 18px;
  30.     background: #2C74E6;
  31.     border: 1px solid #2C74E6;
  32.     cursor:pointer;
  33.     border-radius: 2px;
  34.     margin-right: 10px;
  35.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  36. }
  37. .entry-code button:hover {
  38.     background: #666;
  39.     border: 1px solid #555;
  40. }
  41. .entry-code select {
  42.     border: 1px solid #ccc;
  43.     width: 92px;
  44.     padding:2px;
  45. }
  46. .entry-code p {
  47.     color: #888;
  48.     text-indent: 0em;
  49.     margin: 0 0 5px 0;
  50. }
  51. .options_no {
  52.     display: none;
  53. }

JS代码

F12审查元素，刷新页面，过滤JS，把highlight.js文件下载到本地

Page页面

从网站主题根目录下载page.php文件到本地桌面，使用notepad++等代码编辑器编辑【PS：不同主题修改的地方可能不一致，根据实际情况修改】，这里我以Mnews主题为例修改

文件修改

一、首先把文件名修改成：template-code.php，文件头部<?php ?>里的内容修改成以下内容：

  1. /*
  2. Template Name: 代码高亮
  3. */
  4. get_header();
  5. global $salong;

PS：原代码里多了一些不必要的获取文章页面id等代码，修改成页面模板必要的模板名称参数、获取网站头部信息以及主题函数变量【小白型解释】
二、添加加载js文件的代码【PS：注意js文件所在位置的绝对地址】：

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

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

  1. <style type="text/css">
  2. .entry-code {
  3.     padding: 10px;
  4. }
  5. .code-h {
  6.     font-size: 15px;
  7.     font-weight: bold;
  8.     margin: 0 -30px 5px -30px;
  9.     padding: 0 0 0 30px;
  10. }
  11. .code-box  {
  12.     margin: 20px 10px 10px 0;
  13. }
  14. .entry-code textarea {
  15.     background: #fff;
  16.     padding: 10px;
  17.     border: 1px solid #ebebeb;
  18. }
  19. .options {
  20.     background: #f8f8f8;
  21.     margin: 10px 10px 10px 0;
  22.     padding: 10px 15px;
  23.     border: 1px solid #ccc;
  24.     border-radius: 2px;
  25.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
  26. }
  27. .entry-code button {
  28.     color: #fff;
  29.     line-height: 37px;
  30.     padding: 0 18px;
  31.     background: #2C74E6;
  32.     border: 1px solid #2C74E6;
  33.     cursor:pointer;
  34.     border-radius: 2px;
  35.     margin-right: 10px;
  36.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  37. }
  38. .entry-code button:hover {
  39.     background: #666;
  40.     border: 1px solid #555;
  41. }
  42. .entry-code select {
  43.     border: 1px solid #ccc;
  44.     width: 92px;
  45.     padding:2px;
  46. }
  47. .entry-code p {
  48.     color: #888;
  49.     text-indent: 0em;
  50.     margin: 0 0 5px 0;
  51. }
  52. .options_no {
  53.     display: none;
  54. }
  55. </style>

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

  1. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  2. <div class="content_post">
  3.     <?php the_content(); ?>
  4. </div>

五、把highlight.css文件上传到网站根目录或者主题目录下，并把以下代码添加到当前主题head.php文件前【PS：注意css文件所在位置的绝对地址】：

  1. <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

相关文章：

  1. WordPress重置密码的激活邮件地址错误解决方法
  2. 浅谈WordPress接入熊掌号及页面改造
  3. 解决Mnews主题评论者网站地址获取问题
  4. WordPress免插件文章内页自动TAG转内链
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
WordPressWordPress教程
猜你喜欢
0 条回复 A文章作者 M管理员
>=>=>=>=>评论不显示？点这里=<=<=<=<=<
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
搜索

  • 扫码打开当前页

返回顶部