Wednesday, September 22, 2010

How to use Syntax Highlighter 3 in Blogger

Syntax Highlighter version 3.0.83 has been released and there are quite a few changes in the way things work now. I realized this when the rendering on this site broke after I modified it to use the latest release. So, here is the steps required to setup the "hosted" version of the latest Syntax Highlighter (version 3.0.83) and integrate with your Blogger/Blogspot blog.

Installation

  1. Navigate to Dashboard > Design > Edit HTML
  2. Backup the current template by clicking on the link Download Full Template
  3. In the textarea, press CTRL+F to find the code </head>
  4. Copy the below code and paste it just above
    <!-- Syntax Highlighter Additions START -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    
    <script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>
    <!-- Syntax Highlighter Additions END -->
    
  5. Preview your changes and make modifications as required
  6. Save the template

In the above code, I have put in brushes for the languages that I use frequently. Modify the brushes according to your needs - check the full list of supported brushes here and use whichever you need.

Configuration

Apart from choosing the brushes that you need, there are other configuration parameters that you can setup as well. Check out the details here. More useful ones are the ones that allow you to change the starting line number, highlight specific lines, disable auto-linking of URLs and html-script option to highlight mixture of HTML/XML code.

Apart from these configuration changes, you can change the theme as well. SyntaxHighlighter comes bundled with 7 themes and I personally like the default one. However, you can choose the theme that you fancy the most by simply replacing the name of the theme in this line:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

So you can replace shThemeDefault in the above line with any one of the following themes:
  1. Django - shThemeDjango
  2. Eclipse - shThemeEclipse
  3. Emacs - shThemeEmacs
  4. Fade to Grey - shThemeFadeToGrey
  5. Midnight - shThemeMidnight
  6. RDark - shThemeRDark

Usage

To use it in your blog post, there are a couple of things that need to be done.
  1. Escape all code by replacing any occurrences of:
    1. < with &lt;
    2. > with &gt;
  2. Enclose the escaped code between <pre class="brush:[brush_name];[optional_params]"> and </pre>
  3. Setup the proper brush name (based on the code being highlighted) in the opening pre tag. Using the correct brush will ensure proper highlighting of the code

New Features in 3.0.83

The new version brings with it quite a few new features - here's an overview:
  • Auto-Loading of Brushes

    Now all the brushes need not be pre-loaded on every page. You can load only the required brushes on the pages that need those brushes. Use the shAutoloader.js and then load the brushes as required
    For more details on using this feature, check out the instructions here. Note that this might not be so useful for a blogger account as we do not modify the javascript for each page/post.
  • No usage of Flash

    Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.
  • Code copy without line numbers

    Now the copied code excludes line numbers and the extra leading tabs/spaces to make it usable directly - very convenient!
  • Add Title

    Now you can add a title to the code block by title="[title_name]"
parameter to the pre tag.

  • More under the hood

    More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.
  • Monday, September 20, 2010

    Search & replace text in multiple files in Unix

    To search a particular string in multiple files and replace all occurrences with a new string, you can use the following handy Perl one-liner:

    perl -pi -e 's#search_string#replace_string#g' *.php
    

    Here, the -p switch wraps the script inside a loop, executing once for each input file which is denoted by the last arguement *.php.

    The -i switch allows inline modification of the file; you can optionally save a backup of the original file by providing the backup file name template after this switch as -i *.bak.

    The -e switch executes the following piece of code.

    The string of code 's#search_string#replace_string#g' searches for search_string and replaces it with replace_string globally. You can use any other character like "/" to delimit the search & replace strings. Remember to replace the place-holder text with the actual text and also escape it properly.

    Friday, September 17, 2010

    Extend battery life on Samsung Vibrant

    Here are a few tips / tricks to extend the battery life on Samsung Vibrant and any Android based phones. Of course, cutting down on many of these aspects may reduce the quality of experience that you have with the phone, so there's always a give-and-take involved. However you can definitely turn-off those features that you don't use so that you can have the full-fledged experience of the phone as well as a better battery life!

    1. Switch off GPS
    If you are not using any location aware services, maps or navigation, then turn off the GPS radio. GPS radios generally use a lot of juice and if you are not using the feature, no point in letting it consume battery.

    2. Switch off Wi-Fi
    If you are on the move and not using Wi-Fi, then turn it off as Wi-Fi radios can eat up a lot of power as well.

    3. Switch off Bluetooth
    If you are not using Bluetooth, then turn it off. Switched on Bluetooth transciever that is not being used is another major culprit for draining the battery in all phones that have bluetooth, not just the Samsung Vibrant.

    4. Adjust & Optimize Display Setting
    Reduce the brightness of the screen and decrease the screen time-out (the amount of time the phone waits to turn the display off if there is no activity). Display is the major consumer of battery resources hence using it in a controlled manner will provide astonishing results.

    5. Increase Synchronization intervals
    Increase the gap between synchronization intervals or set them to synchronize on demand instead of a time interval. Apps for social networks, emails that use "polling" instead of "push", weather, news, etc. are major culprits for such unwarranted usage of battery.

    6. Install Apps to Kill unwanted tasks
    Note: this may be risky / complicated depending on which app(s) are installed and how they are used.
    For Android 2.1, you can install JuiceDefender to intelligently manage & control how apps use battery.
    You can also install & use Advanced Task Killer to kill apps that don't close after you have exited from them. Apps that keep running in the background even after you have exited from them can also drain the battery.

    7. Remove Dynamic Wall Papers
    Dynamic / Live Wall Papers and similar apps can also eat into the battery very fast - disable such apps to increase available battery.

    8. Turn off Vibrate / Haptic Feedback
    A small motor spins at a high speed to create the Vibration / Haptic Feedback buzz. This obviously takes a lot of power, so switching it off can save quite a bit.

    9. Switch to Flight mode in areas of no cell coverage
    Switch to Flight mode in areas where there is no cell coverage to conserve battery. When there is no cell coverage, generally the signal strength is boosted to see if any towers can be reached and the polling interval also increases. Switching to Flight mode switches off the radios saving the battery from drain out.


    Note: These are also generally applicable for all other (smart) phones too based on whether they have the below mentioned features.

    LinkWithin

    Related Posts Plugin for WordPress, Blogger...