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

项目结构：

运行效果：

xml：

java：

html：

=============================================================

实现：

=============================================================

步骤一：准备

　　1.下载SyntaxHighlighter_1.5.1.rar

　　下载地址：https://files.cnblogs.com/hongten/SyntaxHighlighter_1.5.1.rar

　　解压缩后，得到dp.SyntaxHighlighter文件夹，

　　我们需要的只有：Scripts文件夹和Styles文件夹

步骤二：新建一个web project，名字如：SyntaxHighlighter(名称可以自己定)

步骤三：编写/SyntaxHighlighter/WebRoot/syntaxHighlighter.html

下面是代码部分：

  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: [5, 15]; 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>

步骤四：部署项目，在浏览器地址栏中输入要运行的项目，就可以看到想要的结果啦。。。

源码下载：https://files.cnblogs.com/hongten/SyntaxHighlighter.zip

相关阅读:
ES6初识-(冲突)数据结构
 ES6初识-Proxy和Reflect
ES6初识- Class
实时显示从file输入框中打开的图片C:fakepath路径问题
 php跨域访问
 移动端web开发技巧
 phpqrcode生成带logo的二维码图片
 iwebshop 自动给css js链接加版本信息
 微信统一支付接口返回“签名错误”的可能原因
 php smtp发送邮件功能
原文地址：https://www.cnblogs.com/hongten/p/SyntaxHighlighter.html