10 Ağustos 2012 Cuma

Improvements on Code syntax highlighting for Blogger dynamic views

I have wrote about snytax highlighting in Blogger dynamic views recently. In this post, I will try to improve a few things.

1. Quick style change

Highlight.js is providing 20 style themes currently. You may want to change your theme from time to time, or may want to choose a best-fit theme seeing in action. With the method I explained in previous post, you have to modify HTML template for your blog each time you want to change the theme. Lots of work!

Similiar to helper.js trick, we can reference a style.css file inside the blog template, then import the style whichever we want in this file.

Firstly, Create a stylesheet file (style.css) near to your other files (helper.js etc.). Content of the file will be:
@import url("styles/ir_black.css");
Put relative path of the your desired CSS here.

Then, Change stylesheet target in the blog template to:
<link href='http://my.domain.com/highlight/style.css' rel='stylesheet'/>

2. Font type of some code parts

Some code blocks couldn't be formatted in Courier font. For example, a code block looks like this:
<script>format()</script>
or like this:
class Greeter
def initialize(name)
...

But, we want this:
<script>format()</script>
or this:
class Greeter
def initialize(name)

...
As you see, we want to format Greeter, initialize, script and other "title"s in Courier (not Sans) as well as other parts. So, I realized that all of this problematic parts has a common point: All of them located inside a span of class "title":
<span class="title">...</span>
It looks like our CSS file lacks a definition for
pre .title
So, we need to add it. Instead of adding this to all styles we were given by Highlight.js, it is enough to add to only our style.css which we just created.

Result

Resulting content of the style.css here:
@import url("styles/ir_black.css");

pre .title {
  font-family: Courier;
}

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.

Tips for this blog - Blog Language

I am writing some post in Turkish and others in English. I know this is a bit dirty way, but this is the case :)
So, you may want to read articles only in one language. I will give you a little tip for your comfort.

For Turkish posts, visit:

For English posts, visit:


You can extend this feature to other tags which you will see under articles:


Clicking a tag also does same thing:

Hopes to help...


Bu blog için ipuçları - Blog Dili

Bazı gönderileri Türkçe, bazılarını İngilizce yazıyorum. Pek düzgün bir yöntem olmayabilir, ama durum bundan ibaret :) Belki sadece bir dildeki yazıları okumak isteyebilirsiniz. Şimdi bunun için size küçük bir ipucu veriyorum.

Sadece Türkçe yazılar:

Sadece İngilizce yazılar:


Bu özelliği, yazıların altında göreceğiniz diğer yazı etiketlerine de genelleyebilirsiniz:
Faydalı olması dileğiyle...

1 Ağustos 2012 Çarşamba

Reading PDF files in Kindle

PDF Support

My e-book library consists of PDF files mainly. Fortunately, Kindle supports PDF files as well as other formats including DOC, DOCX, PNG, BMP and a few more. Thus, you can view PDF files in your Kindle and zoom in/out if you want.

Problem


This feature will be enough for you, if the PDF file has narrow text columns that fit to the Kindle screen properly and font size is sufficently large to be able to read easily, But this is not the case for all PDF files even in landscape mode. Yes, you can zoom in, but column doesn't fit to screen this time. So, you need to be able to increase font size of PDF keeping column size fixed for reading comfort. Just as with Kindle (AZW) file formats.

Solution: Converting PDF to Kindle (AZW - AZW3)

Method 1: Mail to Kindle Store with "convert" subject


Amazon gives you an email address like [name]@Kindle.com to allow you sending your documents to your Kindle from anywhere. When you send a file to this mail, it will be loaded to your related Kindle automatically whenever the Kindle connected to the Internet. If you send the PDF directly to this mail, it will be loaded as PDF also to your Kindle. But if you send the mail putting "convert" word to the subject, then it will be loaded in Kindle format and you will be able to play with layout and font.

Method 2: Using Calibre

If conversion result from the Method 1 didn't satisfy you, then try second method: The Great "E-Book Management" Software: Calibre (free, multi-platform).

Load your book and right click it, then select Convert individually. (you can convert multiple files in once using Bulk convert).


A window will pop up to adjust conversion settings. Select desired output format. This will be AZW in this case. Click OK. Wait conversion to complete. Copy your file to Kindle using USB cable.

If result is still not sufficient, retry after enabling Heuristic Processing.


Note: If you converted PDF file using Calibre and your Kindle doesn't show it, then check your firmware version and update if necessary.

Comparison of the methods

In my case, mail method made a better job in document formatting. So I used this version of the document. It may exists a case which Calibre does better. You should use both methods for each single file and compare results to choose one.

Why my Kindle doesn't have landscape mode

I just purchased a new Kindle Touch 3G and started to use immediately. I looked for an option to view files in landscape mode instead of portrait mode, but I couldn't find anything. But wait, I am sure there is such an option in an older model Kindle belongs to a friend. Then I came up to a post on CNET:
Amazon has updated the firmware for the Kindle Touch to version 5.1 and it actually has a few significant feature enhancements, including one that a lot of folks have been clamoring for: a landscape reading mode.
Great. I grabbed the hint. Then I visited the Kindle Touch Software Updates page. Reading the page, I noticed that my firmware version is very old :) So, updated the firmware as the site instructs and now I have landscape mode. Update operation is very easy if you obey the instructions.


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...