19 Temmuz 2013 Cuma

how to highlight codes in blogger

How to Highlight Codes in Blogger

Hello dear bloggers! this time i'm gonna show you how to highlight codes in blogger post. This syntaxhighlighter is created by:
- Version: 7.3
- URL:     http://softwaremaniacs.org/soft/highlight/en/
- Author:  Ivan Sagalaev

Thank you Ivan.
Ok.If you like it and want to use in blogger please read the rest of my article,with easy to follow steps i'll tell you how to use.What are we waiting for? Let's get started...
Step -1-
Go to Template >> Edit HTML  just under <head> tag paste below codes:

<link href='http://yandex.st/highlightjs/7.3/styles/dark.min.css' rel='stylesheet'/>
<script src='http://yandex.st/highlightjs/7.3/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

Step -2-
Now create a post and switch "Compose" tab to "HTML" tab, then use below tags to highlight your codes

<pre><code> Paste Some Code Here </code></pre>
 
You can use other styles by replacing the word "dark" with below ones but sticking in the end of them .css extention. Demo for all styles can be checked out here. For basic usage visit the publisher's description page here
i'm using this helpful tool in my blog and here is how it looks, i like github style(github.css).

Click to Enlarge
Other Highlighter Styles
tomorrow-night-eighties.css
tomorrow-night-bright
tomorrow-night-blue
tomorrow-night
solarized_light
solarized_dark
school_book
ir_black brown_paper
vs
xcode
zenburn
tomorrow
sunburst
rainbow
pojoaque
monokai
magula
idea
googlecode
github
far
default
dark
ascetik
arta
to all element above just stick .css extention like "far.css".

OK guys! you are done.i hope you enjoyed this post,please share or comment if you like my post.See you next time with a new tip.

You can reach this post by searching for:

0 yorum:

Yorum Gönder