HTML5 formatting on MacOS X? (preferably with TextMate)

Asked 22/1, 2011 at 20:29 Answered 3/3, 2011 at 19:8

Solved html text-editor textmate tidy textmatebundles

Are there any editors or bundles available for MacOS X that support formatting of HTML5 documents? Tidy errors out on newer tags like canvas.

Wyler answered 22/1, 2011 at 20:29 Comment(0)

This question talks about how to make Tidy work with HTML5; tweaking the TextMate bundle's command line to use these params should work.

Mong answered 22/1, 2011 at 21:46 Comment(0)

I managed to add a HTML5 Tidy to TextMate by using the information found in this question. Tidy does not seem to accept a custom string as a DocType, so I used a TextMate macro to insert a valid one. There probably is a more elegant way of doing this, but it gets the job done!

To start off, we need to create a TextMate command for Tidy that plays nice with HTML5. Access the "Bundle Editor" from the Bundles menu, and create a new command containing the following:

#!/usr/bin/env ruby -wKU

require ENV['TM_SUPPORT_PATH'] + '/lib/ui.rb'
require ENV['TM_SUPPORT_PATH'] + '/lib/exit_codes.rb'

result = `"${TM_TIDY:-tidy}" -f /tmp/tm_tidy_errors -iq -utf8 \
          -wrap 0 --tab-size $TM_TAB_SIZE --indent-spaces $TM_TAB_SIZE \
          --indent yes \
          ${TM_XHTML:+-asxhtml --output-xhtml yes} \
          ${TM_SELECTED_TEXT:+--show-body-only yes} \
          --enclose-text yes \
          --doctype omit \
          --new-blocklevel-tags article,header,footer \
          --new-inline-tags video,audio,canvas,ruby,rt,rp \
          --break-before-br yes --vertical-space yes \
          --wrap-php no \
          --tidy-mark no`
status = $?.exitstatus

at_exit { File.unlink('/tmp/tm_tidy_errors') } # Clean up error log

if status == 2 # Errors

  msg = "Errors: " + File.read('/tmp/tm_tidy_errors')
  TextMate.exit_show_tool_tip msg

elsif status == 1 # Warnings - use output but also display notification with warnings

  log = File.read('/tmp/tm_tidy_errors').to_a.select do |line|
    ! (ENV['TM_SELECTED_TEXT'] and (line.include?('Warning: missing <!DOCTYPE> declaration') or line.include?("Warning: inserting missing 'title' element")))
  end.join rescue nil

  unless log.empty?
    options = {
      :title   => "Tidy Warnings",
      :summary => "Warnings for tidying your document (press escape to close):",
      :log     => log
    }
    TextMate::UI.simple_notification(options)
  end

end

if ENV['TM_SOFT_TABS'] == "YES"
  print result
else
  in_pre = false
  result.each_line do |line|
    unless in_pre
      tab_size = ENV["TM_TAB_SIZE"].to_i
      space, text = /( *)(.*)/m.match(line)[1..2]
      line = "\t" * (space.length / tab_size).floor + " "  * (space.length % tab_size) + text
    end

    print line

    in_pre = true  if line.include?("<pre>")
    in_pre = false if line.include?("</pre>")
  end
end

Name this command something along the lines of "HTML5 Tidy". Set the scope selection to "text.html". We'll set up a keyboard shortcut in a moment. Note that the "doctype" switch has been set to "omit", which removes the DocType declaration entirely.

You then need to record a macro from the Bundles menu with the following actions:

Selecting the "HTML5 Tidy" command you just created
Pressing CMD+Up to move to the beginning of the document
Typing <!DOCTYPE html>
Inserting a new line

Select the "Save Last Recording" menu item to store the macro. Name it something appropriate, such as "HTML5 Tidy + DocType", and set its scope to "text.html". You can then assign a keyboard shortcut for your completed macro using the "Key Equivalent" input.

This should allow you to use Tidy on your HTML5 documents without any problems.

Spode answered 3/3, 2011 at 19:8 Comment(0)

Do not about textmate bundles, but how about coda from panic? www.panic.com/coda

Eugeniaeugenics answered 22/1, 2011 at 20:43 Comment(0)

John Muhl's html5 bundle - https://github.com/johnmuhl/html5.tmbundle

Matejka answered 23/1, 2011 at 10:36 Comment(0)

Textmate has a bundle that will validate against the W3C validator - http://validator.w3.org/

Tactful answered 22/1, 2011 at 21:21 Comment(0)

I have to say that I am not familiar with TextMate bundles because I do not personally use that editor. None the less, I found out that they have a public subversion server where they keep different bundles. A quick search did not reveal any HTML5 bundle. You can find more information about bundles on their website.

If you want an out of the box way of create web content in HTML5, have a look at Aloha Editor.

Buchenwald answered 22/1, 2011 at 21:35 Comment(1)

The official subversion server holds only a subset of the available bundles in the TextMate universe. These days GitHub is where new bundles pop up. Using the GetBundles (note the "s") bundle finds several HTML5 bundles available. – Interloper 11/10, 2011 at 20:9

Recommended topics

Hot tags