Textmate Snippet: Convert HTML entities for viewing code

Happy New Year everybody. Here is a tiny Textmate or E-Texteditor Snippet: Convert HTML entities for viewing code. I created this recently for a HTML cookbook on a project, where we made HTML pages showing HTML example code. It converts

  • & to &
  • < to &lt;
  • > to &gt;


That’s it. Basically, I made a copy of one of the more complex snippets and simplified it. Recently, it has been a real time-saver for me despite it’s simplicity.

In text here is the snippet:

Cygwin (generic)
[Selected Text] or [Document]
Replace Selected Text
[Key Equivalent] Ctrl-Shift-6
Scope Selector:
#!/usr/bin/env ruby # By Jesper Rønn-Jensen, 2007-12-19 (Last update: 2007-12-19) # escape &,<,> to show in HTML pages $KCODE = 'U' $char_to_entity = { } File.open("#{ENV['TM_BUNDLE_SUPPORT']}/entities.txt").read.scan(/^(\d+)\t(.+)$/) do |key, value| $char_to_entity[[key.to_i].pack('U')] = value end def encode (text) text.gsub(/[<>&]/) do |ch| ent = $char_to_entity[ch] ent ? "&#{ent};" : sprintf("%02X;", ch.unpack("U")[0]) end end print encode(STDIN.read)

The blog software messes up single/double quotes, so here is a link to the raw snippet file which I put in


. On my E-texteditor/Windows install that is

C:\Documents and Settings\[username]\Application Data\e
\Bundles\HTML.tmbundle\Commands .

Here it is for you to download:
(last update: 2007-01-01)

I was very close to modify it further to wrap selection in <pre></pre> element, (because I always use the code that way). But decided not to: It’s only a keyboard shortcut more to wrap the selection:

Alt-Shift-W: Wrap selection in Open/Close Tag

PS. The editor usually messes up on some of the escaped HTML characters. Please refer to the attached file for the correct version. And please let me know if you find errors in the markup.

Technorati Tags: , , , , , , , ,

5 Responses to “Textmate Snippet: Convert HTML entities for viewing code”

  1. Arjan Says:

    Nice, so basically it does the same as any server-side HTML stripping function, but then in your HTML editor? Weird that this isn’t a standard feature within an HTML editor…

    By the way, it is better to wrap code in both a




    element, like this:

    <pre><code>[the code]</code></pre>

    . In the next version of HTML, HTML5, there will e an element named


    to do this job. There are also small JavaScripts that can syntaxhighlight the code, if you use a


    -name to indicate the language.

  2. Geoff Says:

    @Arjan Like TextMate, the e application basically provides you with a the editor (along with a few basic services); most of the power and flexibility comes from the bundles, which you can (as this command illustrates) customize to your heart’s content.

  3. Katu Says:

    Great blog love the kid Facepalming in your Logo! I am gonna post this site over programminghelp.com. Thanks man!

  4. Trevor Says:

    Where do I get entities.txt? It’s required by the code, but I don’t have it.

  5. John Says:

    I’m new at TextMate, but this command sounds perfect. I’m having the same issue as Trevor. I get the error:

    /tmp/temp_textmate.Ife6jm:6:in `initialize’: No such file or directory – /entities.txt (Errno::ENOENT)
    from /tmp/temp_textmate.Ife6jm:6:in `open’
    from /tmp/temp_textmate.Ife6jm:6

    It seems to want a file called “entities.txt”.