Sintax Highlighter Tutorial Blogger

After a walk to a blogger pal turns out there's one thing that interests me, which is an interesting Highlighter sintax for tutorials penjelasanya blog where you can see the following article interesting, beautiful and easily understood by many readers in this cloud HTML coding
Syntax Highlighter function to highlight the specific code, making it easier to read and beautify the look of the blog. For example, below is the result of the job for syntax Highlighter CSS code:

without syntax Highlighter (with the usual blockquote):

/* 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;
}

without syntax Highlighter (with the usual<pre>....</pre>)

:/* 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;
} 

with syntax Highlighter:

We can see the difference right?

nah just for Blogspot users Highlighter installation is very easy syntax. First, download the first syntax Highlighter generators (for this blog I use a static syntax Highlighter relic19 enough of using CSS (no javascript) so more quickly and easily. New static syntax Highlighter then we'll get a syntax Highlighter generator that served to change our code enter into the HTML code.

Next, enter the CSS code below into the template blogger (placed before the code]]>).

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; }