Syntax Highlighter

Pada postingan sebelumnya telah saya jelaskan bahwa saya akan mulai (belajar) menulis tutorial tentang blogging dan script. Saya rasa sebelum saya mulai menuliskan artikel tentang kesemuanya itu, saya akan mereviev sedikit tentang penggunaan syntax highlighter dan sekaligus instalasinya.

Syntax highlighter berfungsi untuk melakukan highlight pada kode tertentu sehingga memudahkan dalam membacanya sekaligus memercantik tampilan blog. Sebagai contoh, di bawah ini adalah hasil dari pekerjaan syntax highlighter untuk kode CSS:

tanpa syntax highlighter (dengan blockquote biasa):

/* Use this with templates/template-twocol.html */
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
background-color: #000000;
color: #eee;
font-family: Trebuchet MS;
font-size: 12px;
}
a:link {
color: #FF3366;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #FF3366;
}

dengan syntax highlighter:

1. /* Use this with templates/template-twocol.html */
2. body {
3. margin-left: 0px;
4. margin-top: 20px;
5. margin-right: 0px;
6. background-color: #000000;
7. color: #eee;
8. font-family: Trebuchet MS;
9. font-size: 12px;
10. }
11. a:link {
12. color: #FF3366;
13. text-decoration: none;
14. }
15. a:visited {
16. text-decoration: none;
17. color: #990000;
18. }
19. a:hover {
20. text-decoration: none;
21. color: #FF0000;
22. }
23. a:active {
24. text-decoration: none;
25. color: #FF3366;
26. }

/* Use this with templates/template-twocol.html */<br />body {<br />margin-left: 0px;<br />margin-top: 20px;<br />margin-right: 0px;<br />background-color: #000000;<br />color: #eee;<br />font-family: Trebuchet MS;<br />font-size: 12px;<br />}<br />a:link {<br />color: #FF3366;<br />text-decoration: none;<br />}<br />a:visited {<br />text-decoration: none;<br />color: #990000;<br />}<br />a:hover {<br />text-decoration: none;<br />color: #FF0000;<br />}<br />a:active {<br />text-decoration: none;<br />color: #FF3366;<br />}<br />

Dapat kita lihat perbedaannya bukan?

nah langsung saja, bagi pengguna Blogspot cara instalasi syntax highlighter sangat mudah. Pertama, download dahulu syntax highlighter generator (untuk blog ini saya menggunakan static syntax highlighter dari relic19 yang cukup menggunakan CSS (bukan javascript) sehingga lebih cepat dan mudah. Download static syntax highlighter maka kita akan mendapatkan generator syntax highlighter yang berfungsi untuk mengubah kode yang kita masukkan menjadi kode HTML.

Selanjutnya, masukkan kode CSS di bawah ini kedalam template blogger (letakkan sebelum kode ]]>).

1. .dp-highlighter
2. {
3. font-family: "Consolas", "Courier New", Courier, mono, serif;
4. font-size: 12px;
5. background-color: #E7E5DC;
6. width: 99%;
7. overflow: auto;
8. margin: 18px 0 18px 0 !important;
9. padding-top: 1px; /* adds a little border on top when controls are hidden */
10. }
11. 
    
12. /* clear styles */
13. .dp-highlighter ol,
14. .dp-highlighter ol li,
15. .dp-highlighter ol li span
16. {
17. margin: 0;
18. padding: 0;
19. border: none;
20. }
21. 
    
22. .dp-highlighter a,
23. .dp-highlighter a:hover
24. {
25. background: none;
26. border: none;
27. padding: 0;
28. margin: 0;
29. }
30. 
    
31. .dp-highlighter .bar
32. {
33. padding-left: 45px;
34. }
35. 
    
36. .dp-highlighter.collapsed .bar,
37. .dp-highlighter.nogutter .bar
38. {
39. padding-left: 0px;
40. }
41. 
    
42. .dp-highlighter ol
43. {
44. list-style: decimal; /* for ie */
45. background-color: #fff;
46. margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
47. padding: 0px;
48. color: #5C5C5C;
49. }
50. 
    
51. .dp-highlighter.nogutter ol,
52. .dp-highlighter.nogutter ol li
53. {
54. list-style: none !important;
55. margin-left: 0px !important;
56. }
57. 
    
58. .dp-highlighter ol li,
59. .dp-highlighter .columns div
60. {
61. list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
62. list-style-position: outside !important;
63. border-left: 3px solid #6CE26C;
64. background-color: #F8F8F8;
65. color: #5C5C5C;
66. padding: 0 3px 0 10px !important;
67. margin: 0 !important;
68. line-height: 14px;
69. }
70. 
    
71. .dp-highlighter.nogutter ol li,
72. .dp-highlighter.nogutter .columns div
73. {
74. border: 0;
75. }
76. 
    
77. .dp-highlighter .columns
78. {
79. background-color: #F8F8F8;
80. color: gray;
81. overflow: hidden;
82. width: 100%;
83. }
84. 
    
85. .dp-highlighter .columns div
86. {
87. padding-bottom: 5px;
88. }
89. 
    
90. .dp-highlighter ol li.alt
91. {
92. background-color: #FFF;
93. color: inherit;
94. }
95. 
    
96. .dp-highlighter ol li span
97. {
98. color: black;
99. background-color: inherit;
100. }
101. 
     
102. /* Adjust some properties when collapsed */
103. 
     
104. .dp-highlighter.collapsed ol
105. {
106. margin: 0px;
107. }
108. 
     
109. .dp-highlighter.collapsed ol li
110. {
111. display: none;
112. }
113. 
     
114. /* Additional modifications when in print-view */
115. 
     
116. .dp-highlighter.printing
117. {
118. border: none;
119. }
120. 
     
121. .dp-highlighter.printing .tools
122. {
123. display: none !important;
124. }
125. 
     
126. .dp-highlighter.printing li
127. {
128. display: list-item !important;
129. }
130. 
     
131. /* Styles for the tools */
132. 
     
133. .dp-highlighter .tools
134. {
135. padding: 3px 8px 3px 10px;
136. font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
137. color: silver;
138. background-color: #f8f8f8;
139. padding-bottom: 10px;
140. border-left: 3px solid #6CE26C;
141. }
142. 
     
143. .dp-highlighter.nogutter .tools
144. {
145. border-left: 0;
146. }
147. 
     
148. .dp-highlighter.collapsed .tools
149. {
150. border-bottom: 0;
151. }
152. 
     
153. .dp-highlighter .tools a
154. {
155. font-size: 9px;
156. color: #a0a0a0;
157. background-color: inherit;
158. text-decoration: none;
159. margin-right: 10px;
160. }
161. 
     
162. .dp-highlighter .tools a:hover
163. {
164. color: red;
165. background-color: inherit;
166. text-decoration: underline;
167. }
168. 
     
169. /* About dialog styles */
170. 
     
171. .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
172. .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
173. .dp-about td { padding: 10px; vertical-align: top; }
174. .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
175. .dp-about .title { color: red; background-color: inherit; font-weight: bold; }
176. .dp-about .para { margin: 0 0 4px 0; }
177. .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
178. .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
179. 
     
180. /* Language specific styles */
181. 
     
182. .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
183. .dp-highlighter .string { color: blue; background-color: inherit; }
184. .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
185. .dp-highlighter .preprocessor { color: gray; background-color: inherit; }

.dp-highlighter<br />{<br /> font-family: "Consolas", "Courier New", Courier, mono, serif;<br /> font-size: 12px;<br /> background-color: #E7E5DC;<br /> width: 99%;<br /> overflow: auto;<br /> margin: 18px 0 18px 0 !important;<br /> padding-top: 1px; /* adds a little border on top when controls are hidden */<br />}<br /><br />/* clear styles */<br />.dp-highlighter ol,<br />.dp-highlighter ol li,<br />.dp-highlighter ol li span <br />{<br /> margin: 0;<br /> padding: 0;<br /> border: none;<br />}<br /><br />.dp-highlighter a,<br />.dp-highlighter a:hover<br />{<br /> background: none;<br /> border: none;<br /> padding: 0;<br /> margin: 0;<br />}<br /><br />.dp-highlighter .bar<br />{<br /> padding-left: 45px;<br />}<br /><br />.dp-highlighter.collapsed .bar,<br />.dp-highlighter.nogutter .bar<br />{<br /> padding-left: 0px;<br />}<br /><br />.dp-highlighter ol<br />{<br /> list-style: decimal; /* for ie */<br /> background-color: #fff;<br /> margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */<br /> padding: 0px;<br /> color: #5C5C5C;<br />}<br /><br />.dp-highlighter.nogutter ol,<br />.dp-highlighter.nogutter ol li<br />{<br /> list-style: none !important;<br /> margin-left: 0px !important;<br />}<br /><br />.dp-highlighter ol li,<br />.dp-highlighter .columns div<br />{<br /> list-style: decimal-leading-zero; /* better look for others, override cascade from OL */<br /> list-style-position: outside !important;<br /> border-left: 3px solid #6CE26C;<br /> background-color: #F8F8F8;<br /> color: #5C5C5C;<br /> padding: 0 3px 0 10px !important;<br /> margin: 0 !important;<br /> line-height: 14px;<br />}<br /><br />.dp-highlighter.nogutter ol li,<br />.dp-highlighter.nogutter .columns div<br />{<br /> border: 0;<br />}<br /><br />.dp-highlighter .columns<br />{<br /> background-color: #F8F8F8;<br /> color: gray;<br /> overflow: hidden;<br /> width: 100%;<br />}<br /><br />.dp-highlighter .columns div<br />{<br /> padding-bottom: 5px;<br />}<br /><br />.dp-highlighter ol li.alt<br />{<br /> background-color: #FFF;<br /> color: inherit;<br />}<br /><br />.dp-highlighter ol li span<br />{<br /> color: black;<br /> background-color: inherit;<br />}<br /><br />/* Adjust some properties when collapsed */<br /><br />.dp-highlighter.collapsed ol<br />{<br /> margin: 0px;<br />}<br /><br />.dp-highlighter.collapsed ol li<br />{<br /> display: none;<br />}<br /><br />/* Additional modifications when in print-view */<br /><br />.dp-highlighter.printing<br />{<br /> border: none;<br />}<br /><br />.dp-highlighter.printing .tools<br />{<br /> display: none !important;<br />}<br /><br />.dp-highlighter.printing li<br />{<br /> display: list-item !important;<br />}<br /><br />/* Styles for the tools */<br /><br />.dp-highlighter .tools<br />{<br /> padding: 3px 8px 3px 10px;<br /> font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> color: silver;<br /> background-color: #f8f8f8;<br /> padding-bottom: 10px;<br /> border-left: 3px solid #6CE26C;<br />}<br /><br />.dp-highlighter.nogutter .tools<br />{<br /> border-left: 0;<br />}<br /><br />.dp-highlighter.collapsed .tools<br />{<br /> border-bottom: 0;<br />}<br /><br />.dp-highlighter .tools a<br />{<br /> font-size: 9px;<br /> color: #a0a0a0;<br /> background-color: inherit;<br /> text-decoration: none;<br /> margin-right: 10px;<br />}<br /><br />.dp-highlighter .tools a:hover<br />{<br /> color: red;<br /> background-color: inherit;<br /> text-decoration: underline;<br />}<br /><br />/* About dialog styles */<br /><br />.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }<br />.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }<br />.dp-about td { padding: 10px; vertical-align: top; }<br />.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }<br />.dp-about .title { color: red; background-color: inherit; font-weight: bold; }<br />.dp-about .para { margin: 0 0 4px 0; }<br />.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }<br />.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }<br /><br />/* Language specific styles */<br /><br />.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }<br />.dp-highlighter .string { color: blue; background-color: inherit; }<br />.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }<br />.dp-highlighter .preprocessor { color: gray; background-color: inherit; }<br />

Nah, selesai sudah. Untuk menampilkan posting berupa kode semacam CSS atau JavaScript, tinggal melakukan copy & paste dari generator syntax highlighter. dan jika menginginkan tampilan yang berbeda tinggal diedit aja CSS nya. itu saja.


Terimakasih telah membaca..
:)