CSS

Totally simple syntax highlighting in Blogger

Sometime you don’t need to host code, you just want to post it in a blog post. Google Code Prettify (archive.org) does this really well, either per post, or across the blog. 1. Copy the script tag. Here’s what you need to copy into either your template, or into your post: <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" ></script> 2. HTML-encode your code There are a bunch of HTML encoders (archive.org) online, I haven’t found one that I’m really a fan of.

Seeing nofollow links in Google Chrome

Here’s a simple trick to view nofollow links in Google Chrome. Just drag and drop the following link to your bookmark bar and hit it whenever you want to see links with the rel=nofollow HTML microformat: Nofollow? This bookmarklet inserts a tiny bit of CSS into the top of the page you’re currently viewing. The CSS is similar to that which is used in other nofollow highlighting methods (archive.org): a[rel~=nofollow] { border:1px dashed #852!

Adding user-friendly rel=nofollow markup (for IE too!)

The next step after adding CSS to highlight links with rel=nofollow is to give the user some information about what the symbol and the dashed line mean. Since CSS will not allow you to add tooltips and links, we have to resort to some javascript trickery. The up-side to this is that it will also display the markup on older browsers like IE 6. Adding this kind of markup to your site is pretty easy to do.

Adding "rel=nofollow" markup to your site

The “rel=nofollow” HTML microformat (archive.org) is a way to mark links which might be problematic, whether they’re clearly spammy, just not checked or even just sites that I don’t really want to link to (but still want to provide a link for others to use - you know, “don’t look, but that guy’s got a giant nose (archive.org)!"). I understand that it is important for search engines to recognize these kinds of links and to treat them differently.