June 29, 2011

Change Syntax Highlighter Color Theme In Blogger


SYNTAX-HIGHLIGHTER-THEMESSyntax 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,

Customize Syntax Highlighter

I assume that you have already added the highlighter to your blogs. Now you just need to follow these easy steps,

  1. Go To Blogger > Design > Edit HTML
  2. 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

image

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>

 

Emacs theme

image

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

Fade to Grey theme

image

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>

 

Eclipse theme

image

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>

Midnight theme

 

image

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>

RDark theme

 

image

<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! :)





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 »

4 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

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

    ReplyDelete
  2. Nice share guy's ... tank you for this tutorial, I will use it ..

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

    ReplyDelete
  4. I applied Syntax Highlighter on my blog http://www.techbhuvan.com but it is not working at all. I uploaded all the scripts and stylesheets to Dropbox and reffering them in my template. But it is not working. Can you please tell me why? I am using a responsive template.

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!