博客代码 关键字 高亮插件 highlight.js
下载地址：https://highlightjs.org/download/
下载到本地后，新建个页面测试
1、在head中加入css和js的引用
1. <head>
2. <title>highlight</title>
3. <meta http-equiv="content-type" content="text/html;charset=utf-8">
4. <link rel="stylesheet" href="styles/default.css">
5. <script src="highlight.pack.js"></script>
6. <script>hljs.initHighlightingOnLoad();</script>
7. </head>
2、添加对应要显示的内容
1. <pre>
2. <code class="python">
3. # 读取文件内容
4. def fread(self):
5.
6. # 如果指针位置大于文件大小，说明是更换了文件
7. self.filename = self.getLogPath()
8. if not os.path.isfile(self.filename):
9. while not self.checkfile() :
10. time.sleep(5)
11. self.filename = self.getLogPath()
12.
13. self.fclose()
14. self.fopen()
15. self.pos = 0
16.
17.
18. self.hd.seek(self.pos,0)
19. fline = self.hd.readline()
20. self.pos = self.hd.tell()
21. return fline.replace("\n","")
22.
23.
24.
25.
26. # 将文件指针定位到文件尾部
27. def feof(self):
28. self.fopen()
29. # 定位到文件末尾
30. self.hd.seek(0,2)
31. #设置指针位置
32. self.pos = self.hd.tell()
33. </code>
34. </pre>
这里需要把要显示的内容放入到 <pre><code>这里放内容...</code></pre> 这种格式中
默认的话会智能识别，若是识别不出来是什么语言，就需要在<code>标签中加入class
例如 <pre><code class="java" >xxx</code></pre> 即可
下载的时候可以选择你需要的语言，然后再打包，下载后会发现有个style文件夹，里面放了各种不同的显示颜色，为了看看都是些什么样子
我这里弄了个可以选择样式的页面
代码如下
1. <html>
2. <head>
3. <title>highlight</title>
4. <meta http-equiv="content-type" content="text/html;charset=utf-8">
5. <link rel="stylesheet" href="styles/default.css">
6. <script src="highlight.pack.js"></script>
7. <script>hljs.initHighlightingOnLoad();</script>
8.
9. </head>
10. <body>
11. <div id="changeStyleSelect"></div>
12.
13. PHP
14. <hr>
15. <pre><code class="php">
16. class Test {
17. private $name;
18. private $age;
19. public function __construct($array) {
20. >name = $array['name'];
21. >age = $array['age'];
22. }
23.
24. public function getName() {
25. >name;
26. }
27.
28. public function setName($name) {
29. >name = $name;
30. }
31.
32. public function getAge() {
33. >age;
34. }
35.
36. public function show() {
37. >name,$this->age);
38. }
39.
40. }
41. </code></pre>
42.
43.
44. javascript
45. <hr>
46. <pre>
47. <code class="javascript">
48. test = {
49. name : function () {
50. return 'hello';
51. },
52. age : function () {
53. return 13;
54. }
55. }
56. </code>
57. </pre>
58.
59. python
60. <hr>
61. <pre>
62. <code class="python">
63. # 读取文件内容
64. def fread(self):
65.
66. # 如果指针位置大于文件大小，说明是更换了文件
67. self.filename = self.getLogPath()
68. if not os.path.isfile(self.filename):
69. while not self.checkfile() :
70. time.sleep(5)
71. self.filename = self.getLogPath()
72.
73. self.fclose()
74. self.fopen()
75. self.pos = 0
76.
77.
78. self.hd.seek(self.pos,0)
79. fline = self.hd.readline()
80. self.pos = self.hd.tell()
81. return fline.replace("\n","")
82.
83.
84.
85.
86. # 将文件指针定位到文件尾部
87. def feof(self):
88. self.fopen()
89. # 定位到文件末尾
90. self.hd.seek(0,2)
91. #设置指针位置
92. self.pos = self.hd.tell()
93. </code>
94. </pre>
95.
96. java
97. <hr>
98. <pre>
99. <code class="java">
100. package l2f.gameserver.model;
101.
102. import java.util.ArrayList;
103.
104. public abstract class L2Character extends L2Object {
105. ABNORMAL_EFFECT_BLEEDING = 0x0_0_0_1; // not sure
106.
107. public void moveTo(int x, int y, int z) {
108. _ai = null;
109. _log.warning("Should not be called");
110. > 5) {
111. return;
112. }
113. }
114.
115. /** Task of AI notification */
116. @SuppressWarnings( { "nls", "unqualified-field-access", "boxing" })
117. public class NotifyAITask implements Runnable {
118. private final CtrlEvent _evt;
119.
120. mList = new ArrayList()
121.
122. public void run() {
123. try {
124. getAI().notifyEvent(_evt, _evt.class, null);
125. } catch (Throwable t) {
126. t.printStackTrace();
127. }
128. }
129. }
130. }
131. </code>
132. </pre>
133.
134.
135. <script>
136. styleArr = ["agate.css","androidstudio.css","arduino-light.css","arta.css","ascetic.css","atelier-cave-dark.css","atelier-cave-light.css","atelier-dune-dark.css","atelier-dune-light.css","atelier-estuary-dark.css","atelier-estuary-light.css","atelier-forest-dark.css","atelier-forest-light.css","atelier-heath-dark.css","atelier-heath-light.css","atelier-lakeside-dark.css","atelier-lakeside-light.css","atelier-plateau-dark.css","atelier-plateau-light.css","atelier-savanna-dark.css","atelier-savanna-light.css","atelier-seaside-dark.css","atelier-seaside-light.css","atelier-sulphurpool-dark.css","atelier-sulphurpool-light.css","brown-paper.css","codepen-embed.css","color-brewer.css","dark.css","darkula.css","default.css","docco.css","dracula.css","far.css","foundation.css","github.css","github-gist.css","googlecode.css","grayscale.css","gruvbox-dark.css","gruvbox-light.css","hopscotch.css","hybrid.css","idea.css","ir-black.css","kimbie.dark.css","kimbie.light.css","magula.css","mono-blue.css","monokai.css","monokai-sublime.css","obsidian.css","paraiso-dark.css","paraiso-light.css","pojoaque.css","purebasic.css","qtcreator_dark.css","qtcreator_light.css","railscasts.css","rainbow.css","school-book.css","solarized-dark.css","solarized-light.css","sunburst.css","tomorrow.css","tomorrow-night.css","tomorrow-night-blue.css","tomorrow-night-bright.css","tomorrow-night-eighties.css","vs.css","xcode.css","xt256.css","zenburn.css"];
137. selectHtml = [];
138. <select id="changeStyle">');
139. for(i in styleArr) {
140. OptionValue = styleArr[i];
141. <option value="' + OptionValue +'" >'+ OptionValue +'</option>');
142. }
143. </select>');
144. selectHtmlString = selectHtml.join("");
145. .innerHTML = selectHtmlString;
146.
147. obj = document.getElementById('changeStyle');
148. obj.addEventListener("change",function(event){
149. value = this.options[this.options.selectedIndex].value;
150. l = document.createElement('link');
151. l.setAttribute('href','styles/'+value);
152. l.setAttribute('rel','stylesheet');
153. document.head.appendChild(l);
154. });
155.
156. </script>
157. </body>
158. </html>
效果图：
