[current path: main » blosxom]

Feb 02, 2009

highlight.js Source Syntax Highlighting

I just added dynamic source code syntax highlighting to this blog. I opted to use highlight.js instead of the more popular syntaxhighlighter. Both are nice, but I liked the simplicity of highlight.js.  It uses a single JavaScript file, and the formatting is pure CSS.  It’s compatible with wiki-style markup such as Tiki or Markdown, and best of all (in my opinion), it does a reasonably good job of auto-detecting the source language.  You can also override the detection, if desired.

There is a download form on the highlight.js web site that will build an optimized JavaScript file for you.  Copy it to your server, and add these lines to your page:

<!-- highlight.js -->
<script type="text/javascript" src="http://www.example.com/js/highlight.pack.js"></script>
<script type="text/javascript">
	hljs.initHighlightingOnLoad();
</script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/hl/sunburst.css" />
<!-- highlight.js -->

Add some CSS:


/* code block */
pre code {
	font-size:1em;
	font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",courier,monospace;
	line-height:1.1em;

	display:block;
	background: #333333;
	width: 100%;

	padding:0px;
	overflow:auto;
	overflow-y: hidden;

 	white-space:pre-wrap;
}

And you’re good to go.

post time: 01:01 | category: /blosxom | comments | Share/Save/Bookmark

Jan 22, 2009

FeedBurner and Outsourcing

To solve some of the compatibility issues with the Atom newsfeed, I’ve decided to route the feed through FeedBurner.  Google acquired FeedBurner last year, and there has apparently been some discontent with the service, but it seems fine to me.  The new feed URL is: http://feeds2.feedburner.com/mikeyp.  This is the default feed when you subscribe in the browser, or click on the Subscribe button.  The original Atom and RSS feeds will continue to work fine.

Originally, I wanted every element of the blog to be served directly from MikeyP.com, mainly to optimize page loads, preserve XHTML validation, and guarantee decent rendering fallback to mobile devices.  But I’m using a lot of “outsourced” services on the site now, including:

These services essentially transfer the bandwidth burden from my site to the client browser and/or service host, while requiring JavaScript support on the client.  However, not all of them validate with correct XHTML.  Generally, widgets often don’t “encode” ampersands because they inject HTML instead of XHTML, which will cause XHTML validation to fail.

post time: 14:41 | category: /blosxom | comments | Share/Save/Bookmark

Jan 17, 2009

Atom Feed and Share Link

I finally deprecated the old RSS 0.91 feed for this blog and replaced it with a proper Atom 1.0 feed. The RSS feed still works and always will, but you may want to re-subscribe with the Atom feed at some point. The feed URL is: http://www.mikeyp.com/weblog/index.atom. You can also click on the subscribe link on the side of the page, or click the little Feed icon Atom Feed in your browser.

UPDATE: See entry about feedburner.

I'm also trying out the AddToAny service which automatically shares posts to numerous community web sites. There is a now a little "Share" link at the bottom of each post. Click it to send the post to news sites, bookmark sites, Facebook, or whatever. I was tempted to use another service called AddThis, but they embed a little flash file in every link. Except for embedded items in posts, like videos, I'm trying to keep the site flash-free.

post time: 22:41 | category: /blosxom | comments | Share/Save/Bookmark

Jan 13, 2009

Styling the Google Reader Widget

When I added the Google Reader Widget to this site, I chose the style "none", which inherits the site's style and layout. However, it did some odd things with margins, so I wanted to style it manually. Google doesn't provide any styling documentation, but a quick inspection using Opera's "Show Structural Elements" option in the Author Mode button revealed class names. Here they are:

/* google reader widget */ 
div.reader-publisher-module {}        /* container for list */ 
div.reader-publisher-module ul li {}  /* list items */ 
div.f {}                              /* "Read More" link */

Also note that links in the Google Reader Widget don't have escaped ampersands, which produces invalid XHTML 1.0.

post time: 00:00 | category: /blosxom | comments | Share/Save/Bookmark

Jan 09, 2009

Added Disqus Commenting System

As much as I enjoyed creating the Rock/Paper/Scissors captcha [morerpscaptcha, rpscaptchasandwich, rpscaptcha] scheme for comments on this blog, the commenting system has otherwise been fairly primitive. I've been exploring ideas for enhancing the system and including some kind of global authentication like Google Connect, Facebook Connect, or Gravatars.

But it looks like a the guys at Disqus have most of this covered, so I'm going to give their system a shot. They support their own registration system as well as Facebook Connect, so if you have a Facebook account (with 150 million users, who doesn't these days?), you can post with your existing account.

I'm using the Javascript version of Disqus for now. If it works out, I'll convert to the backend API, which might make the pages load a bit faster. I also need to take a crack at restyling their default comment thread, which I'll do when I overhaul the rest of the site.

Comments that were posted with the previous system are still visible on the blog in the "Legacy Comments" section. However, only Disqus comments are counted in the "(#) comments" link on the main page.

post time: 00:57 | category: /blosxom | comments | Share/Save/Bookmark


MikeyP.com

About This Site
Main Page
About MikeyP
Subscribe to Feed