便笺笔记

将知更鸟版的CodeRender免插件代码高亮功能添加到wordpress页面中

  WordPress博主的宗旨就是,能不使用插件的功能尽量使用代码来完成。所以这篇文章就是教给大家如何将知更鸟版博客中的CodeRender免插件代码高亮功能添加镶嵌到WordPress的页面中。

  • 第一步:将以下代码保存为一个UTF-8编码的PHP文件
  1. <?php
  2. /*
  3. Template Name: 代码高亮
  4. */
  5. get_header( $name );
  6. ?>
  7. <script src=“/wp-content/plugins/dmgl/js/shCore.js”></script>
  8. <script src=“/wp-content/plugins/dmgl/js/rendered.js”></script>
  9. <div id=“wrapper”>
  10.     <div id=“header”>
  11.      <h1>在线代码高亮转换HTML工具</h1>
  12.         </div>
  13.     </div>
  14.     <div id=“post”>
  15.         <div id=“main”>
  16.             <div id=“main_box”>
  17.                 <h2>输入源代码</h2>
  18.                 <!– <div id=“copypaste”>
  19.                     <a href=“#” onclick=“docopy(‘source’)”>&nbsp;复制&nbsp;</a>
  20.                     |<a href=“#” onclick=“dopasted(‘source’)”>&nbsp;粘贴&nbsp;</a>
  21.                     |<a href=“#” onclick=“doclear(‘source’)”>&nbsp;清除&nbsp;</a>
  22.                 </div> –>
  23.                 <textarea title=“输入源代码.” class=java id=sourceCode style=“width: 100%” name=sourceCode rows=6></textarea>
  24.             </div>
  25.             <div id=“main_box”>
  26.                 <h2>转换设置</h2>
  27.                 <span class=“options”>选择语言:&nbsp;&nbsp;
  28.                 <select onchange=“document.getElementById(‘sourceCode’).className=this.value”>
  29.                     <option value=java selected>java</option>
  30.                     <option value=xml>xml</option>
  31.                     <option value=sql>sql</option>
  32.                     <option value=jscript>jscript</option>
  33.                     <option value=groovy>groovy</option>
  34.                     <option value=css>css</option>
  35.                     <option value=cpp>cpp</option>
  36.                     <option value=c#>c#</option>
  37.                     <option value=python>python</option
  38.                     <option value=vb>vb</option>
  39.                     <option value=perl>perl</option>
  40.                     <option value=php>php</option>
  41.                     <option value=ruby>ruby</option>
  42.                     <option value=delphi>delphi</option>
  43.                 </select>
  44.                 </span>
  45.                 <span class=“options”>选项:&nbsp;
  46.                     <input id=showGutter type=checkbox checked> 显示行号
  47.                     <input id=firstLine type=checkbox checked> 起始为1
  48.                     <span class=“options_no”>
  49.                     <input id=showControls type=checkbox> 工具栏
  50.                     <input id=collapseAll type=checkbox> 折叠
  51.                     <input id=showColumns type=checkbox> 显示列数
  52.                     </span>
  53.                 </span>
  54.                 <span class=“render”>
  55.                     <button onclick=“generateCode()”>转&nbsp;&nbsp;换</button>
  56.                     <button onclick=“clearText()”>清&nbsp;&nbsp;除</button>
  57.                 </span>
  58.             </div>
  59.             <div id=“main_box”>
  60.                 <h2>HTML 代码</h2>
  61.                 <textarea id=htmlCode style=“width: 100%” name=htmlCode rows=6></textarea>
  62.             </div>
  63.             <div id=“main_box”>
  64.                 <h2>HTML 预览</h2>
  65.                 <div id=“preview”></div>
  66.             </div>
  67.         </div>
  68.     </div>
  69. <?php get_footer(); ?>

  注意:上述的代码中,需要将第8/9行中的代码修改为你所存放的文件路径中。

<script src=“/wp-content/plugins/dmgl/js/shCore.js”></script>

<script src=“/wp-content/plugins/dmgl/js/rendered.js”></script>

  在本文的底部下载的文件中有highlight.css、rendered.js和shCore.js。将highlight.css添加到主题的header.php文件中,方便调用代码高亮工具页面和代码显示页面的样式。(注意:CSS地址根据所存放的路径填写)

  1. <link rel=“stylesheet” href=“/wp-content/plugins/dmgl/css/highlight.css” />
  • 第二步:将配置好的代码高亮功能镶嵌添加到WordPress博客中

  新建一个页面,然后在右侧的“页面属性”-“模板”选项中选择你所保存的代码高亮PHP文件,然后直接发布即可。点击查看演示页面


Administration
声明: 本站所有内容均为原创。如为转载,在保证内容安全的前提下本站保留了原文章的转载链接。 故,非本站原创文章,如有转载文章链接地址跳转后出现违规或违法页面对你造成了不良影响,本站无权对他站进行干涉,也不承担任何相应的责任。
https://www.ht193.com

有( 2 )条评论关于这篇文章 : “将知更鸟版的CodeRender免插件代码高亮功能添加到wordpress页面中

..

发表评论

电子邮件地址不会被公开。 必填项已用*标注