Hongten 发表于 2012-12-12 00:24:57

博客园_插入代码(推荐)_按钮功能实现_代码高亮显示

<div id="cnblogs_post_body">项目结构:
http://images.cnblogs.com/cnblogs_com/hongten/397637/r_84.png
运行效果:
xml:
http://images.cnblogs.com/cnblogs_com/hongten/397637/r_1.png
java:
http://images.cnblogs.com/cnblogs_com/hongten/397637/r_2.png
html:
http://images.cnblogs.com/cnblogs_com/hongten/397637/r_3.png
=============================================================
实现:
=============================================================
步骤一:准备
  1.下载SyntaxHighlighter_1.5.1.rar
  下载地址:http://files.cnblogs.com/hongten/SyntaxHighlighter_1.5.1.rar
  解压缩后,得到dp.SyntaxHighlighter文件夹,
  我们需要的只有:Scripts文件夹和Styles文件夹
      http://images.cnblogs.com/cnblogs_com/hongten/397637/r_4.png
步骤二:新建一个web project,名字如:SyntaxHighlighter(名称可以自己定)
  http://images.cnblogs.com/cnblogs_com/hongten/397637/r_84.png
步骤三:编写/SyntaxHighlighter/WebRoot/syntaxHighlighter.html
下面是代码部分:
<div class="cnblogs_code">1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2 <html>3   <head>4         <title>syntaxHighlighter.html</title>5 6         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">7         <meta http-equiv="description" content="this is my page">8         <meta http-equiv="content-type" content="text/html; charset=UTF-8">9 10         <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11         <link type="text/css" rel="stylesheet" 12             href="Styles/SyntaxHighlighter.css"></link> 13   </head> 14 15   <body> 16   <!-- //////////////////////////////////////////////////////////////////////////// --> 17                           <!-- xml --> 18   <!-- //////////////////////////////////////////////////////////////////////////// --> 19   <textarea name="code" class="xml" rows="15" cols="100"> 20   <?xml version="1.0" encoding="UTF-8"?> 21   <web-app version="2.5" 22       xmlns="http://java.sun.com/xml/ns/javaee" 23       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 24       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 25       http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 26       <welcome-file-list> 27         <welcome-file>syntaxHighlighter.html</welcome-file> 28       </welcome-file-list> 29   </web-app>    30   </textarea> 31    32   <!-- //////////////////////////////////////////////////////////////////////////// --> 33                           <!-- java --> 34   <!-- //////////////////////////////////////////////////////////////////////////// --> 35   <textarea name="code" class="java" rows="15" cols="100"> 36     package com.b510; 37    38     /** 39    * 40      * @author Hongten</br> 41    * @date 2012-7-20 42    * 43    */ 44     public class SyntaxHighlighter { 45    46       /** 47          * @param args 48          */ 49       public static void main(String[] args) { 50             System.out.println("helloworld!"); 51       } 52     } 53   </textarea> 54    55    56    57   <!-- //////////////////////////////////////////////////////////////////////////// --> 58                           <!-- pre --> 59   <!-- //////////////////////////////////////////////////////////////////////////// --> 60   <textarea name="code" class="js" rows="15" cols="100"> 61 <pre class="brush: php; highlight: ; html-script: true"> 62 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 63 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 64 <head> 65   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 66   <title>SyntaxHighlighter Demo Page - <?= htmlspecialchars($title) ?></title> 67 </head> 68 69 <body> 70 71 <? 72 /*********************************** 73 ** Multiline block comments 74 **********************************/ 75 76 $stringWithUrl = "http://alexgorbatchev.com"; 77 $stringWithOutUrl = 'hello world'; 78 79 ob_start("parseOutputBuffer");      // Start Code Buffering 80 session_start(); 81 82 function parseOutputBuffer($buf) { 83     global $portal_small_code, $portal_gzcompress; 84     global $PHP_SELF, $HTTP_ACCEPT_ENCODING; 85 86     // cleaning out the code. 87     if($portal_small_code && !$portal_gzcompress) { 88       $buf = str_replace("    ", "", $buf); 89       $buf = str_replace("\n", "", $buf); 90       $buf = str_replace(chr(13), "", $buf); 91     } 92 } 93 94 ?> 95 </body> 96 </html> 97 </pre> 98 </textarea>    99 100         <br>101 102 103         <script class="javascript" src="Scripts/shCore.js"></script>104         <script class="javascript" src="Scripts/shBrushCSharp.js"></script>105         <script class="javascript" src="Scripts/shBrushPhp.js"></script>106         <script class="javascript" src="Scripts/shBrushJScript.js"></script>107         <script class="javascript" src="Scripts/shBrushJava.js"></script>108         <script class="javascript" src="Scripts/shBrushVb.js"></script>109         <script class="javascript" src="Scripts/shBrushSql.js"></script>110         <script class="javascript" src="Scripts/shBrushXml.js"></script>111         <script class="javascript" src="Scripts/shBrushDelphi.js"></script>112         <script class="javascript" src="Scripts/shBrushPython.js"></script>113         <script class="javascript" src="Scripts/shBrushRuby.js"></script>114         <script class="javascript" src="Scripts/shBrushCss.js"></script>115         <script class="javascript" src="Scripts/shBrushCpp.js"></script>116         <script class="javascript">117     dp.SyntaxHighlighter.HighlightAll('code');118 </script>119   </body>120 </html>
页: [1]
查看完整版本: 博客园_插入代码(推荐)_按钮功能实现_代码高亮显示