Better Code Display on C6

Note: This post is over 2 years old. You may want to check later in this blog to see if there is new information.

I finally got around to making the display of code better on the blog. The rest of this post is an example to test out a couple of TextMate drag commands, external code linking, scriptaculous effects and other niceties. If it all works, I’ll share all the tools.

The CSS file that small browsers get <—click to expand

[The requested file http://blog.circlesixdesign.com/wp-content/uploads/thin.css could not be found]

That should display nicely, we’ll find out when I post this. How about a php file, just for testing.

The ZenPhoto index.php <—click to expand

[The requested file http://blog.circlesixdesign.com/wp-content/uploads/index.txt could not be found]

All of these are being added by dragging external files onto a TextMate blog post. They’re then uploaded through xmlrpc and the code for the Code Viewer plugin for Wordpress is inserted, along with an h3 with a class of “code”. There’s a javascript in the header, thanks to Dustin Diaz, that handles turning that into a collapsing code block.

And that’s that.

» » » » »

5 Comments

Jump to comment form | comments rss [?] | trackback uri [?]
  1. Matt 04.08.07 / 11am

    Pretty cool.
    One little suggestion though, maybe you should put cursor: pointer; on the :hover state of the element that you click to expand the code box. It’s not very obvious that it’s a link.

  2. Brett Terpstra 04.08.07 / 12pm

    Good call.

  3. Brandon 04.08.07 / 9pm

    When I click a link to expand a code snippet, the sidebar goes from a bold font to a non-bold one. It returns back to bold when I collapse the code snippet.

  4. brett 04.09.07 / 4am

    What browser are you using, and on what platform?

  5. Brandon 04.09.07 / 2pm

    Sorry, meant to include that info but forgot. I’m using firefox 2.0.0.3 on Mac OS X 10.4.9.

    The problem seems to be fixed now though. Looks good!

Have your say

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>




Safari hates me