Syntax highlighter is the big name that you see on major tutorial sharing blogs may that be Wordpress or Blogger. Web Owners who use it are growing in numbers. In the last post we discuss how to add Syntax Highlighter to your Blogger Blogs and today we will learn how to change its look and feel and customize it to some extent with 7 different color themes available so far.
If you don't understand what I am talking then you may kindly read this post first,
- Add Syntax Highlighter in Blogger
Customize Syntax Highlighter
I assume that you have already added the highlighter to your blogs. Now you just need to follow these easy steps,
- Go To Blogger > Design > Edit HTML
- Search For this code,
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
3. And replace it with any of the following theme code:
PS: Click the images for DEMO.
Django theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
Emacs theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
Fade to Grey theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
Eclipse theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
Midnight theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
RDark theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
4. Save your template and you are done!
Visit your blogs to see the Magic! :)
Filed Under: blogger tricks, Blogger Widgets and plugins, CSS and HTMLTricks
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »















3 comments:
Hi Mohamad,
i want to know how you make the color wheel in the color code generator?
I hope you can share its code as it is very cool!
Please email me if you need:
aamirul42@yahoo.com
Thanks!
Nice share guy's ... tank you for this tutorial, I will use it ..
Assalam o Alaikum,
Bhai i am continous reader of your blog!!
it owsum
n bhai syntax highlighter is not working on my blog kindly help me why ??
i am waiting of you
Click Here To add Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Mohammad