如何讓頁面裡面的java程式碼高亮顯示
阿新 • • 發佈：2018-12-31
資源下載：
http://alexgorbatchev.com/SyntaxHighlighter/download/ 點選開啟連結
示例程式碼：
上面就是示例程式碼，<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="syntaxhighlighter/shCore.css"> <link rel="stylesheet" type="text/css" href="syntaxhighlighter/shThemeDefault.css"> <script type="text/javascript" src="syntaxhighlighter/shCore.js"></script> <script type="text/javascript" src="syntaxhighlighter/shBrushJava.js"></script> <script type="text/javascript"> SyntaxHighlighter.all(); </script> <style type="text/css"> #b{ border:1px solid #f3f3f3; } </style> </head> <body class=""> <textarea class="brush: java;title:'';toolbar:'';" cols="100" rows="10" id="define_id"> public void test(){ System.out.println("test the high lighter"); } @interface public interface Test{ private static int i; } </textarea> <pre class="brush: java"> public void test(){ System.out.println("test the high lighter"); } @interface public interface Test{ private static int i; } </pre> </body> </html>
第一步， 當把資源下載下來之後，解壓，然後依次引入
styles/shCore.css, styles/shThemeDefault.css, scripts/shCore.js,
最後一個js就是上面示例提到的shBrushJava.js這個是根據個人需要去引入，比如你在body元素裡面需要渲染javascript的程式碼，就需要引入shBrushJScript.js, 具體可參照下面這個連結
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 點選開啟連結
第二步， 這裡只介紹下學習的方式
在上面示例程式碼中有三個用分號分割開來的三個引數，主要就是定義渲染時候的一些特性，具體可研究下載的資源裡面的src/shCore.js這個檔案，這個檔案裡面是原始碼，大家可參照裡面的一些屬性靈活的配置 ， 或者可以看下資原始檔裡面自帶的例子tests/cases...
首先看示例程式碼的效果
在瀏覽器的控制檯執行SyntaxHighlighter.highlight(document,document.getElementById("define_id"));
注：這行程式碼可以繫結到textarea的onchange事件中
下面這個是執行語句之後的效果：
好了， 我暫時也只研究了這麼多，大家也可以看下官網上的文件說明，因為我主要是想給textarea這個元素裡面的內容渲染，所以對於pre沒有介紹太多，嘿嘿~