How to Add & Highlight Source Codes in Blogger

highlight source codes with syntaxhighlighter

The smart way to add source codes in your post is using (Syntaxhighlighter tool), that will color your codes in the style of the syntax language you chose, like html, css, and javascript.
Its also buttons at the top right of codes, to (view source), (copy to clipboard), (print), and (help).


You can install it on your blog by two methods:


First method:

just click on (Install) button above. then, choose a blog. after that, click (Add widget) and dont change anything. you must drag the widget and drop it down of other widgets (the best place is under post) so its will not cause a space problem between widgets.


Second method:

By uploading this script file (download) to your own host (i prefer google sites). then, copy the direct link. after that, go to (Page Elements) , (Add a Gadget), choose (HTML/JavaScript). Now take this code (replace the blue link):



<!-- by your-tools.blogspot.com -->
<script src="http://sites.google.com/site/ytcode/1/syntax.js" type="text/javascript" ></script>
<!-- by your-tools.blogspot.com -->

How to Post Codes:

First, You must choose (Edit HTML) tab. then, copy/paste code below.
you must change the syntax language in blue to what you want (check supported languages).


<script type="syntaxhighlighter" class="brush: html"><![CDATA[

<!-- replace this with your codes -->
<!-- by your-tools.blogspot.com -->


]]></script>


Supported languages:
Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt


Attachments

+ syntax.zip

Codes in your comment? escape them first:


(Undo: ctrl + z)

Post a Comment