移植代码高亮页面到本站

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

wordpress代码高亮

拷贝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>
  50.     <div class=“code-box”>
  51.         <div class=“code-h”>HTML 预览</div>
  52.         <div id=“preview”></div>
  53.     </div>
  54. </div> <!– .entry-code –>

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

  1. .entry-code {
  2.     padding10px;
  3. }
  4. .code-h {
  5.     font-size15px;
  6.     font-weightbold;
  7.     margin: 0 –30px 5px –30px;
  8.     padding: 0 0 0 30px;
  9. }
  10. .code-box  {
  11.     margin20px 10px 10px 0;
  12. }
  13. .entry-code textarea {
  14.     background#fff;
  15.     padding10px;
  16.     border1px solid #ebebeb;
  17. }
  18. .options {
  19.     background#f8f8f8;
  20.     margin10px 10px 10px 0;
  21.     padding10px 15px;
  22.     border1px 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-height37px;
  29.     padding: 0 18px;
  30.     background#2C74E6;
  31.     border1px solid #2C74E6;
  32.     cursor:pointer;
  33.     border-radius: 2px;
  34.     margin-right10px;
  35.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  36. }
  37. .entry-code button:hover {
  38.     background#666;
  39.     border1px solid #555;
  40. }
  41. .entry-code select {
  42.     border1px solid #ccc;
  43.     width92px;
  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.     displaynone;
  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.     padding10px;
  4. }
  5. .code-h {
  6.     font-size15px;
  7.     font-weightbold;
  8.     margin: 0 –30px 5px –30px;
  9.     padding: 0 0 0 30px;
  10. }
  11. .code-box  {
  12.     margin20px 10px 10px 0;
  13. }
  14. .entry-code textarea {
  15.     background#fff;
  16.     padding10px;
  17.     border1px solid #ebebeb;
  18. }
  19. .options {
  20.     background#f8f8f8;
  21.     margin10px 10px 10px 0;
  22.     padding10px 15px;
  23.     border1px 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-height37px;
  30.     padding: 0 18px;
  31.     background#2C74E6;
  32.     border1px solid #2C74E6;
  33.     cursor:pointer;
  34.     border-radius: 2px;
  35.     margin-right10px;
  36.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  37. }
  38. .entry-code button:hover {
  39.     background#666;
  40.     border1px solid #555;
  41. }
  42. .entry-code select {
  43.     border1px solid #ccc;
  44.     width92px;
  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.     displaynone;
  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.chiser.cc/wp-content/themes/theme/highlight.css”>

六、把highlight.css和highlight.js上传到网站目录【PS:文件绝对位置跟以上代码位置需相同】

七、新建页面,模板选择代码高亮发布即可

PS:highlight.css文件需在coderender软件目录下提取

最后

附上成品文件及样式文件【PS:只适用于Mnews主题
蓝奏云:https://www.lanzous.com/i2t6zsf 密码:5c60

人已赞赏
WordPress教程

WordPress对接微信小程序的正确姿势

2019-1-7 13:04:15

WordPress教程

解决Mnews主题评论者不显示Gravatar头像问题

2019-1-16 20:12:26

2 条回复 A文章作者 M管理员
  1. 尊敬的站长前辈,希望能换交换一个友情链接:淘宝直通车推广 http://河蟹/ 如果我的网站现在还远远达不到您的要

    求,那希望以后还有机会,我会努力的哟,再次感谢能在您尊贵的网站上留下我小小的信息!!!【希望看到这条信息的其它朋友

    ,也能找我交换友链,谢谢】

    • 贵站类型不符合本站友链要求,抱歉

有新消息 消息中心
搜索