Text

· · to read

I put my SyntaxHighlighter Brush Pack on WordPress.org, using the excellent git to WordPress.org Subversion instructions to preserve history.

In order to check that it works, I moved my plugin (installed as a git submodule) outside the wp-content/plugins directory, went to Add Plugin, searched for it, and instructed WordPress to automatically install it. It works! The following CoffeeScript code was highlighted using it:

launch() if ignition is on

If you use WordPress and either CoffeeScript or Clojure, I’d love for you to give it a shot!

Repositorywordpress-syntaxhighlighter-brush-pack
Ownerbenatkin
Text

· · to read

I’m working on a plugin for displaying infoboxes for URLs called Resource Infobox. The interface is a shortcode with a single url property. To include an infobox, use an expression like the following:

[resource-infobox url="https://github.com/benatkin/wordpress-resource-infobox"]

This will show an Infobox with some basic information:

Repositorywordpress-resource-infobox
Ownerbenatkin

Examples of Infoboxes include those on Wikipedia, in the upper-right corner of pages, and the old Crunchbase ones I saw on TechCrunch:

The neat thing about the ones built by this WordPress Plugin is that it renders based on some JSON rules. The current rule file has two resource types, GitHub Repositories and GitHub Users. These are not limited to GitHub, though; with the current implementation they could be written for twitter, Crunchbase, and any URL that has straightforward mapping from the HTML url to the JSON url. Here are the current rules:

{
  "github": {
    "repository": {
      "url": "https://github.com/:owner/:repo",
      "api_url": "http://github.com/api/v2/json/repos/show/:owner/:repo",
      "fields": [
        {
          "label": "Repository",
          "param": "repo",
          "url": "https://github.com/:owner/:repo/"
        },
        {
          "label": "Owner",
          "param": "owner",
          "url": "https://github.com/:owner/"
        },
        {
          "label": "Last Commit",
          "path": "repository/pushed_at",
          "type": "date",
          "format": "Y-m-d"
        },
        {
          "label": "Watchers",
          "path": "repository/watchers"
        }
      ]
    },
    "user": {
      "url": "https://github.com/:username",
      "api_url": "http://github.com/api/v2/json/user/show/:username",
      "fields": [
        {
          "label": "Username",
          "param": "username",
          "url": "https://github.com/:username/"
        },
        {
          "label": "Followers",
          "path": "user/followers_count"
        },
        {
          "label": "Respositories",
          "path": "user/public_repo_count"
        }
      ]
    }
  }
}

It’s a JSON DSL inspired by the DSL for Django’s admin interface. It has few features now, but following Django’s lead, it can have more features added to it while retaining its essence. The nice thing about using a JSON DSL rather than custom code is that it can easily be validated, and due to its declarative nature, XSS attacks and other undesired behavior can be avoided. It uses WordPress’s esc_attr and esc_url functions to render strings.

I’d love feedback on this. My goals for it include:

  • Caching (WP Total Cache greatly reduces requests to GitHub’s API on this page)
  • Adding more resource types
  • Adding more field types
  • Adding more display customization
  • Adding instructions for using code from this plugin as a base for other Infobox embedding plugins
  • Improving the resource type DSL
  • Building an editor for creating custom resource types
  • Supporting grabbing a resource type definition based on a custom header of a resource (like X-Infobox-Resource-Type)

I’d also like to make this work with more than just WordPress.

Text

· · to read

After installing the CoffeeScript brush for SyntaxHighlighter Evolved, I wanted a Clojure brush. Rather than install another plugin, I created a combined plugin, with a generic name so I can add more semi-popular languages to it, called SyntaxHighlighter Evolved: Brush Pack. I’m planning on putting it in the WordPress Plugin Directory.

To show it off, here’s a Clojure web server example, from Heroku:

(ns demo.web
  (:use ring.adapter.jetty))

(defn app [req]
  {:status 200
   :headers {"Content-Type" "text/plain"}
   :body "Hello from Clojure!\n"})

(defn -main []
  (let [port (Integer/parseInt (System/getenv "PORT"))]
    (run-jetty app {:port port})))

Not bad. The :keywords and curly braces, which aren’t a part of Common Lisp or Scheme, are neatly highlighted. The code sample above, by the way, gets the port from an environment variable, which is how Heroku makes it easy for applications on different platforms to adapt to their environment.

For the CoffeeScript highlighter, which I mentioned in my last post, here’s app.coffee from express-sinatra:

express = require('express')
app = express.createServer()

# Setup Template Engine
app.register '.coffee', require('coffeekup')
app.set 'view engine', 'coffee'

# Setup Static Files
app.use express.static(__dirname + '/public')

# App Routes
app.get '/', (request, response) ->
  response.render 'index'

# Listen
app.listen process.env.PORT || 8000

This one also is ready to deply on Heroku!.

Please add an issue if you’d like to see another SyntaxHighlighter brush included!

Text

· · to read

I installed a WordPress plugin called SyntaxHighlighter Evolved, which highlights source code with client-side JavaScript. Here are a few notes about how it works:

  • Code can be inserted using a Shortcode. Thanks to how Shortcodes work, HTML entities don’t need to be escaped in the HTML view.
  • It uses a lot of Shortcode tags, one for each language, like php, so there is minimal overhead to inserting code snippets. This is a good decision in my opinion, because it gets used so often on code blogs.
  • The underlying library, SyntaxHighlighter, has a core that contains generic features for highlighting code, and contains brushes for highlighting different languages. These are mostly data.
  • The JavaScript code for SyntaxHighlighter is included at the end of the page, and only the needed brushes are included. Apparently when shortcodes are used, a language or brush name is added to a variable, and at the end of the page, it adds the appropriate script tag(s).

Finally, here are a couple of examples. This one is the included php brush:

function factorial($x) {
  if ($x > 1) {
    return $x * factorial($x-1);
  } else {
    return $x;
  }
}

And here is the CoffeeScript brush, which is provided by another plugin that depends upon the SyntaxHighlighter Evolved plugin:

passed = (score for score in scores when score > 60)

I really like this plugin. It’s a very complete solution. That said, I’d really like to be using ACE editor or CodeMirror to insert/edit snippets in blog posts.

Text

· · to read

I archived this blog using HTTrack for a few months because it was killing my tiny (256MB) improperly-configured slice and I was considering switching my blog engine. It worked surprisingly well, except I couldn’t write new posts. My blog is still #1 for my name on Google and I didn’t detect any broken links. It wasn’t the first time I used HTTrack; I also used it to download a couple websites.

During this time I’ve been posting to tumblr and posterous. I had a short info page linking to both of these blogs and my then-archived WordPress blog, which was previously at http://benatkin.com/weblog/. During this time I’ve been following WordPress and watching it grow, and wanting to get involved with it. I still want to use other CMSes, but I decided that I would switch benatkin.com back to WordPress and explore other CMSes on different sites.

For several months I’ve had a slightly beefier CMS that I prepaid a year for. I got two extra IP addresses on it so I can run more than one web server and have multiple SSL sites. I’m running both Apache and nginx so I can learn both of them. I’m using Apache to host this blog, and nginx to redirect to it from the www and blog subdomains.

It feels good to be back on WordPress. Many friends have benefited from WordPress’s customizability and ease of use. I also like it from a software freedom perspective. I tend to favor non-copyleft licenses to copyleft licenses like the GPL, which WordPress uses, but the bottom line is that people are in control of their site and their data. They are free to switch hosting platforms and even export their data to another CMS and set up URL redirects if needed. Finally, there are many great plugins and themes available, due to the size of the WordPress community. I hope one day to go to a WordCamp.

If you’re thinking about setting up your own custom WordPress.org blog, I encourage you to give it a shot!

Some configuration details follow.

Continue reading →