2 Ağustos 2012 Perşembe

Code syntax highlighting on Blogger dynamic views

Highlight.js is a simple code syntax highlighter, namely formats source codes on web pages as in your favorite editor. Currently 51 languages supported and 20 style themes provided. You should view Demo page for a quick overview. If you think to use it with small number of languages, you can choose only interested languages from download page to include in your version.

I want to use Highlight.js with Blogger's dynamic views to format source codes. I did a bit research effort to make it work, so I am writing a quick tutorial for records and others.

Step 1: Download Highlight.js

Go to download page, select your desired languages and tap to download.

Step 2: Host files somewhere public like Dropbox

They will give you a zip file contains highlight.pack.js and styles. You have to host them somewhere public. So, whenever someone's browser needs the files, it must be able to access them. I put them under my Dropbox account.

Step 3: Write the little helper method and host it too

Save following function as helper.js and host near to other files:
function format(){
    var b=document.getElementsByTagName("pre");
    for (i=0;i<b.length;i++)
        hljs.highlightBlock(b[i],null,false)
}

Why you should do this? Because, without this, you have to add id="code" attribute to pre elements of code blocks and also append following lines to all the posts needs source code formatting :
<script>hljs.highlightBlock(document.getElementById('code'), null, true);</script>

Doing this for each post is ugly and also hard to write. Fortunately, we can shorten this to easy to remember form below and also get rid of id="code", thanks to helper.js:
<script>format()</script>


Step 4: Link files modifying Blogger template


Go to Blogger control panel, select Template and click to Edit HTML. Blogger will warn you:
Because you know what you do and you are expert, take risk and click Continue.

Find closing head tag (</head>). Link your CSS and JS files writing corresponding markup before the </head> tag:
<!-- Code syntax highlighting -->
<link href='http://yourdomain.com/highlight/styles/solarized_light.css' rel='stylesheet'/>
<script src='http://yourdomain.com/highlight/highlight.pack.js'/>
<script src='http://yourdomain.com/highlight/helper.js'/>

Step 5: Try it

After that moment, all your pre tags treated as source code and attempted to be formatted properly. For example if you write this:
<pre><code>
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end
 
  def salute
    puts "Hello #{@name}!"
  end
end
 
# Create a new object
g = Greeter.new("world")
 
# Output "Hello World!"
g.salute
</code></pre>
<script>format()</script>


You and your visitors will see as this (after browser executes javascript and reformats pre tags):
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end
 
  def salute
    puts "Hello #{@name}!"
  end
end
 
# Create a new object
g = Greeter.new("world")
 
# Output "Hello World!"
g.salute

Important usage notes!
Note 1: You have to replace little than mark (<) in the code with  &lt; if exists.
Note 2: You should put  <script>format()</script>  to a page only once after all  pre tags.
Note 3: You should read next post I wrote about some improvements on styles.

Step 6: Mastering Highlight.js

If you write only pre tags, language will be detected heuristically. However, you can specify language explicitly using <pre class="ruby">. Visit Highlight.js site for further details.

Hiç yorum yok:

WSO2 ESB + ClientAccesPolicy.xml + CrossDomain.xml

ClientAccesPolicy.xml and CrossDomain.xml files have to be found at root of your services Silverlight and Flex clients to be able to acce...