views:

2533

answers:

18

I was just reading how can you tell whether you're ready to start your own blog. The answers are so good and inspiring that I made rush to start my own blog using blogger and stopped right in my tracks. I looked on the menu bar as I was creating my first post, and duh, there's no nice "code sample" formatting option like the one on Stackoverflow.

Does this exist on any of the standard blogging options (blogger/wordpress/livejournal) or is this something I'm going to have to code up myself?

Edit: Using the knowledge I have garnered from this post, I have started a blog using Wordpress entitled //Coding Without Comments. My first post states my reasons for starting a blog, experience in working with wordpress, and summarizes the best Code Formatting options. I will continue to update my post as more answers come in.

+34  A: 

To the best of my knowledge, none of the mainstream blogging services have this built in. It is a function of design and template. I would go with Wordpress because it is the best. For code formatting:

  1. Design your own styles and functionality if you are up to the challenge
  2. Check out the SyntaxHighlighter JavaScript project (used by Hanselman). You should be able to integrate this pretty easily into any blogging system. (See my blog post on integrating this with WordPress).
  3. Use Windows Live Writer with the Insert Code plugin (this will automatically format the code that you paste in properly and post it right to your blog. See here for an example).

Note: If you want to have the most flexibility for constructing your blog template and functionality as you want it to be, you would need to use Self-hosted WordPress.org, not the hosted WordPress.com.

Yaakov Ellis
+1 for WordPress, especially since Wordpress.com has the SyntaxHighlighter plugin. Now you just need to wrap your code in `[sourcecode]` tags
Thomas Levesque
A: 

It doesn't exist as standard, being somewhat niche, but there are plenty of nice scripts out there to help format. The best one I've seen (which is what Yahoo! use on their YUI pages) is SyntaxHighlighter.

Of course, given how nice the Stack Overflow boxes are for doing code, you might want to look at how they do things and "port" it to Blogger ;)

GaryF
A: 

I second Yaakov Ellis - I personally use Windows Live Writer and Insert Code.

Rob Cooper
+2  A: 

Mango Blog and BlogCFC both support code blocks out of the box, using the code tag:

<code></code>

Both are CFML applications, so you'll either have to get some ColdFusion hosting, or run one of the open source alternative engines: Railo, OpenBD, (and it's there, but probably not full-featured enough to run these apps: The Smith Project)

Adam Tuttle
+6  A: 

In my opinion, Blogger is the best hosted blog solution. It's free, you can have your own domain name, and you can totally customize the template. I'd check out the SytaxHighlighter like several other people here have mentioned. If you need a place to host js and other files, get an Amazon S3 account, and use the S3 Organizer FireFox plugin.

Steer clear of hosted Wordpress. It is terrible. You cannot customize anything without paying for it.

One more thing that not many people pay attention to: If you want to have the best template to show code, I'd find one with a liquid layout. That way your code "box" can grow larger when the reader resizes their browser.

Lance Fisher
(comment added as a bookmark) +1
toolkit
+1 I was researching this today and came to the same conclusion.
cletus
+7  A: 

I suppose you're a programmer if you're lurking here :-) Then I would advise to host Wordpress (or any other blog software) yourself. Not at home, mind you, but on any of the cheap hosting companies around. I won't recommend mine as it's in France, a bit too far away.

There are two main reasons:

  • You will be the master of your domain name: when you want to change hosting company or software, you will be able to do so. You don't want to change your domain name when you have thousands of readers and a Google PageRank of 5.
  • You will be able to customize your software (with little effort) to add the many plugins available.

A few links on the subject:

Cheers

Christian Lescuyer
+11  A: 

I was just looking at the Wordpress Plugins and came across the WP-Syntax plugin.

WP-Syntax provides clean syntax highlighting using GeSHi -- supporting a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.

CodingWithoutComments
+1  A: 

I use and recommend WordPress. You can start off with a hosted WordPress blog and move it off to another hosting provider if you want to take advantage of the great number of plug-ins available. With a hosted blog, you can only use the plug-ins that WordPress makes available to you.

...and use Windows Live Writer for writing/publishing. There are several nice code formatting plug-ins available for WLW.

Alvin Ashcraft
A: 

I really got into PHP programming thanks to Wordpress and would recommend it in a heartbeat. Active developer community, plugins and tutorials galore and it's a cinch to install.

icco
A: 

copy and paste into word from visual studio. Then from word, copy and paste into your blog.

eviljack
+3  A: 

You can convert the code into html with syntax highlighting before posting it to your blog. For example in vim you can use the :TOhtml command.

Also you can use GeSHi . The WordPress plugin WP-Syntax uses GeSHi, but you can also use GeSHi offline.

grom
A: 

I use Chyrp because it's lightweight and easy to use. For code formatting you can use the Geshify module or my own code feather.

guitsaru
A: 

CodeHTMLer is a simple program that translates plain text code into a colorized HTML version of the code.

CodingWithoutComments
A: 

If you use TextMate in Mac OSX, BitButter has a great post on how to display your TextMate code (formatting included) in WordPress.

CodingWithoutComments
A: 

Code Markup is another Wordpress Plugin.

CodingWithoutComments
+3  A: 

As a few people have already mentioned, I use SyntaxHighlighter on my blog. The only issue I had with it is that my markup wouldn't be valid if I followed the instructions from the SyntaxHighlighter usage wiki. To fix this problem I added some simple jQuery code before SyntaxHighlighter scans my document:

$(document).ready(function() {
    $('pre.code').attr('name', 'code').removeClass('code');
    dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf URL';
    dp.SyntaxHighlighter.HighlightAll('code');
});

Instead of adding the name="code" attribute to my <pre/> tags, I add a 'code' class to my pre tags before I add my language attribute so my class attribute looks like this:

 <pre class="code css">

 </pre>

And my javascript code adds the 'name' attribute and removes the 'code' class dynamically so that my markup validates and works flawlessly with SyntaxHighlighter.

Dan Herbert
A: 

Squarespace has a really nice admin interface, the best in the industry as far as I am concerned.

+1  A: 

I use WordPress with the "Code Markup" plugin. It has worked really well. You just surround the code in your posts with

<pre><code>code here</code></pre>