31 Jan 2014

how to setup syntax highlighter on blogger

No comments


1. First, take backup of your blogger template
2. After that open your blogger template (In Edit HTML mode) & copy the all css




view plainprint?
  1.  .dp-highlighter  
  2. {  
  3.  font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;  
  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; } 


before </b:skin> tag
3. Paste the followig code before </head> tag



view plainprint?
  1. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>  
  2. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>  
  3. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>  
  4. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>  
  5. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>  
  6. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>  
  7. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>  
  8. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>  
  9. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>  
  10. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>  
  11. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>  
  12. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>  
  13. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>  


4. Paste the following code before </body> tag.

view plainprint?
  1. <script language="javascript">  
  2. dp.SyntaxHighlighter.BloggerMode();  
  3. dp.SyntaxHighlighter.HighlightAll('code');  
  4. </script>  
5. Save Blogger Template.
6. Now syntax highlighting is ready to use you can use it with <pre></pre> tag.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>




Posted in:

0 comments:

Post a Comment

 

Recent post

Loading...
Ping your blog, website, or RSS feed for Free Likerr.eu

Contact Us

Name

Email *

Message *