A blog post from danboe.net

A better approach for code samples?

Posted May 31, 2005 at 02:39 PM

I have a tendency to work with code quite a bit, and I will often refer to code samples within my blog posts. This can be a real mess to author, especially XHTML ones, because the necessary encoding has had to be authored manually. Well, leave it to the internet—came across a new Textpattern plugin today called glx-code that allows me to point to an external text file from within my blog post, and have it properly encoded and assembled into an unordered list along the way.

At first glance, this seems quite nice, and includes the following benefits:

  1. Line numbering gets provided, making it easier to call out specific lines of attention in the blog post.
  2. Indenting seems to be supported for certain types of content, assuming that the source file is already indented with tabs.
  3. Support for optionally linking directly to the file containing the code sample, nice for readers wishing to download the content.

Testing it out

This is a test of the new plugin pointing to various text files containing sample code.

For example, consider this markup example of a simple XHTML document:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>XHTML 1.0 Strict</title>
  6. <!-- Single-line comment -->
  7. </head>
  8. <body>
  9. <p>Page template output goes here.</p>
  10. <!--
  11. Multi-line comment
  12. -->
  13. </body>
  14. </html>
  15. Download this code: /code/codesample.html

Or this example for a list of links:

  1. <ul class="list1 link1">
  2. <li class="first">
  3. <a href="#">Search</a>
  4. </li>
  5. <li>
  6. <a href="#">
  7. <span>Highlight</span>
  8. </a>
  9. </li>
  10. <li>
  11. <a href="#">Options</a>
  12. </li>
  13. <li>
  14. <a href="#">
  15. <em>Hotmail</em>
  16. </a>
  17. </li>
  18. <li>
  19. <a href="#">Messenger</a>
  20. </li>
  21. <li class="selected">
  22. <a href="#">
  23. <strong>My MSN</strong>
  24. </a>
  25. </li>
  26. <li class="last">
  27. <a href="#">Pop-ups Blocked</a>
  28. </li>
  29. </ul>
  30. Download this code: /code/Data-LinkList.xml

Of course, every item in the list is really just a link:

  1. <div class="link">
  2. <a href="#">Red Sox are just better than Yanks</a>
  3. </div>
  4. Download this code: /code/Data-Link.xml

It could be styled via a CSS file, something along the lines of this:

  1. element {
  2. color: #f00;
  3. }
  4.  
  5. .class {
  6. color: #f00;
  7. }
  8.  
  9. #id {
  10. color: #f00;
  11. }
  12.  
  13. element#id {
  14. color: #f00;
  15. }
  16.  
  17. element.class {
  18. color: #f00;
  19. }
  20.  
  21. #id element .class {
  22. color: #f00;
  23. }
  24.  
  25. element {
  26. color: #f00; /* single-line comment */
  27. }
  28.  
  29. /* multi-line comment
  30. element {
  31. color: #f00;
  32. }
  33. */
  34. Download this code: /code/codesample.css

And it might have behavior applied as well, using something like the following javascript:

  1. // single-line comment
  3. function alert1(str) {
  4. window.alert(str);
  5. }
  7. function alert2(str) {
  8. window.alert(str); // single-line comment
  9. }
  11. /* multi-line comment
  12. function alert3(str) {
  13. window.alert(str);
  14. }
  15. */
  16. Download this code: /code/codesample.js

Of course, this is just an example, the CSS and JS files really have nothing to do with the sample markup. Just playing around with it.

This post is closed to new comments.

About this page

This page contains a single post from Daniel Boerner's blog, of which Boot Camp + Windows Vista = no more Airport Extreme reboots is the latest post.

Are there more posts like this one?

Possibly. Within this blog, this post is categorized under danboenet and it was posted on May 31, 2005. Those would be good places to start looking for related posts.

Next post (newer)

Previous post (older)