Make Blogger edit box bigger

Posted by bikethetam Mon, 17 Nov 2008 03:41:00 GMT

I've been using Blogger for a few days only but the one thing that annoyed me was the tiny size of the input box for writing a post. It's both too narrow and too short, forcing the writer to move the elevator constantly. blogger.com doesn't allow to change that size (as opposed to wordpress.com) Fortunately, users of Firefox can still trick their browser into resizing that box. This is done using the great Greasemonkey Firefox addon and an adequate Greasemonkey user script.

  1. First install the Greasemonkey addon to Firefox: download it here. You might also want Platypus but it's not necessary here.
  2. Restart Firefox.
  3. Now download the script for resizing the edit textarea: http://browservulsel.blogspot.com/2005/07/blogger-large-post-editor-user-script.html. Greasemonkey should automatically pick it up as you click on the Blogger Large Post Editor and from now on, any time you edit a post, the edit box will occupy the whole width of the page.

To my taste the edit is still too short, so I edited the script and increased the height of the box:

  1. Go to Tools/Greasemonkey/Manage User Scripts
  2. Select Blogger Large Post Editor and press the "Edit" button
  3. I chose to make the box height 500 pixels and to do that I just changed the ref.style.height and ta.style.height lines: 
    var ref = document.getElementById('richeditorframe');
ref.style.width = '100%';
ref.style.height = '500px';

var ta = document.getElementById('textarea');
ta.style.height = '500px';

While I'm on the Greasemonkey subject, one other place where I find it very useful is for http://www.google.com/ig, the personalized home page of Google. The layout on that page changed in October 2008, mostly for the best, but it now includes a sidebar that is borderline useless and that leaves a good 15% of the width of the page on the left entirely black and sad. I decided to get rid of that sidebar, it's easy with Greasemonkey + Platypus. Platypus is another Firefox addon that can write Greasemonkey scripts based on the page element you select graphically and the action you decide to apply on that element using a contextual menu.

  1. Install the Platypus addon
  2. Go to http://www.google.com/ig
  3. If the platypus toolbar doesn't automatically show up, make it appear by selecting the Tools/Platypus! menu item
  4. Move your mouse over to the sidebar, it should entirely highlight itself (pink overlay), then right click, select remove, click the 'Save' button in the Platypus toolbar, and confirm.
  5. To make sure all variations of the http://www.google.com/ig URL get caught, append a * to it in the Greasemonkey User scripts manager.

The ig sidebar won't bother you anymore.


Enabling syntax highlighting in Blogger pages

Posted by bikethetam Sun, 16 Nov 2008 03:21:00 GMT

Blocks of source code don't always render very well in blogger if you just simply use the <blockquote> HTML tag, they just kind of melt in and are hardly distinguishable from the rest of the text. Thanks to Alex Gorbatchev, it's easy to make it better. Here are the steps:
  1. Go to http://code.google.com/p/syntaxhighlighter/ and download the latest version of the scripts. As of now the latest package is http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.1.rar
  2. Now you need to find a web server where to host those files. Once you've found it, you need to copy the files to the DocumentRoot:
    cd /tmp
unrar x SyntaxHighlighter_1.5.1.rar
cd $docroot
mkdir SyntaxHighlighter
cd SyntaxHighlighter
cp -r /tmp/dp.SyntaxHighlighter/S* .
  3. Go to the Layout tab on you Blogger console and choose "Edit HTML".
  4. Right after <Head> insert the following lines:
    <link href='http://yourwebsite.org/SyntaxHighlighter/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shCore.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushXml.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushRuby.js'/>
  5. Right before </body> insert the following lines:
    <script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://yourwebsite.org/SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
You can now write blog entries with syntax highlighting: You just have to surround the source code with 
<pre name="code" class="html:nogutter:nocontrols">
and 
</pre>
Please go to Alex's documentation to find the list of languages that are supported and which class to apply.