Friday, August 3, 2012

Adding SyntaxHighlighter Support to Blogger.com

To add Alex Gorbatchev's SyntaxHighlighter script just insert the following HTML code befre the </head> tag. If you are placing HTML code inside SyntaxHighlighter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--SYNTAX HIGHLIGHTER BEGINS-->
<!-- MAIN JS and CSS Files -->
<!-- END OF MAIN JS and CSS Files -->
 
<!-- LANGUAGE FILES -->
<!-- END OF LANGUAGE FILES -->
 
<!-- SETTINGS -->
<script type='text/javascript'>
$(document).ready( function() {
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;wrap-lines&#39;] = false;
SyntaxHighlighter.config.strings.expandSource = &quot;Expand&quot;;
SyntaxHighlighter.config.strings.viewSource = &quot;Raw source&quot;;
SyntaxHighlighter.config.strings.copyToClipboard = &quot;Copy to clipboard&quot;;
SyntaxHighlighter.config.strings.print = &quot;Print&quot;;
SyntaxHighlighter.config.strings.help = &quot;Help&quot;;
SyntaxHighlighter.config.strings.alert = &quot;http://signalverarbeitung.blogspot.com\n&quot;;
SyntaxHighlighter.all();
});
</script>
<!-- ENF OF SETTINGS -->
<!--SYNTAX HIGHLIGHTER ENDS-->
Displaying listing is easy: just place your code as shown below.
1
2
3
<script type="syntaxhighlighter" class="brush: plain"><![CDATA[
 Some code here...
]]></script>
Be careful with HTML code. To display HTML code inside an HTML page regular characters should be translated into escape characters first. This can be done by using HTML-encoder, e.g. http://www.string-functions.com/htmlencode.aspx. Output code will be difficult to read: <br> will be encoded to &lt;br&gt; To display
1
2
3
4
5
<tr>
 <th>Symbol</th>
 <th>Code</th>
 <th>Entity Name</th>
</tr>
you should post
1
2
3
4
5
6
7
<script type="syntaxhighlighter" class="brush: html"><![CDATA[
 &lt;tr&gt;
  &lt;th&gt;Symbol&lt;/th&gt;
  &lt;th&gt;Code&lt;/th&gt;
  &lt;th&gt;Entity Name&lt;/th&gt;
 &lt;/tr&gt;
]]></script>

No comments:

Post a Comment