Komodo Edit - HTML reformatting / Tidy

Question

Is there a simple way to reformat my HTML from within Komodo Edit or to automate the process against Tidy?

Something like the Ctrl+K, Ctrl+D in Visual Studio would be brilliant. I am presently running Ubuntu with Tidy installed.

Elude

Answer 1

If you want a solution that just straight up works, do the following:

• Pop open the toolbox panel on the right.
• Click on the gear and select New Macro. Name it what you like.

Get the macro code here:

Komodo edit macro (404)

It includes the code from http://jsbeautifier.org/ and works like a charm...

Next is to set up a keystroke:

• Select your new macro in the toolbox

• Now go to key bindings

  Type a sequence and it will tell you if the sequence you typed is available. I use Ctrl + / because they are near each other.

Antisemite

By the way, if you want the output of jsbeautifier to look like the Ctrl-k, Ctrl-d formatting of Visual Studio, edit the macro and go to the 'JavaScript' case. Now change the indent_size to 4, change the brace_style to "end-expand" and add "good_stuff: true" at the end. – Strawboard

Answer 2

I found this formatting script (macro) and adapted it for my personal use with the latest Komodo Edit (v6.1.0). It works well and I included the JavaScript formatting provided by a commentator, but I think it may only work with Komodo IDE. It's unimportant for my purposes.

Perhaps someone out there can find a universal improvement (using something like HTML Tidy).

komodo.assertMacroVersion(3);
if (komodo.view) { komodo.view.setFocus(); }

var formatter;
var language = komodo.document.language;
switch (language) {
    case 'Perl':
        formatter = 'perltidy -i=2 -pt=2 -l=0';
        break;
    case 'XML':
    case 'XUL':
    case 'XLST':
        formatter = 'tidy -q -xml -i -w 80';
        break;
    case 'HTML':
        formatter = 'tidy -q -asxhtml -i -w 120';
        break;
  //case 'JavaScript':
  //    ko.views.manager.currentView.scimoz.selectAll();
  //    ko.views.manager.currentView.scimoz.replaceSel(js_beautify(ko.views.manager.currentView.scimoz.text, {indent_size: 2}));
  //    return null;
  default:
        alert("I don't know how to tidy " + language);
        return null;
}

// Save current cursor position
var currentPos = komodo.editor.currentPos;

try {
    // Save the file. After the operation you can check what changes where made by
    // File -> Show Unsaved Changes
    komodo.doCommand('cmd_save');

    // Group operations into a single undo
    komodo.editor.beginUndoAction();

    // Select entire buffer and pipe it into formatter.
    komodo.doCommand('cmd_selectAll');
    Run_RunEncodedCommand(window, formatter + " {'insertOutput': True, 'operateOnSelection': True}");

     // Restore cursor. It will be close to the where it started depending on how the text was modified.
     komodo.editor.gotoPos(currentPos);

    // On Windows, when the output of a command is inserted into an edit buffer it has Unix line ends.
    komodo.doCommand('cmd_cleanLineEndings');
}
catch (e) {
    alert(e);
}
finally {
    // Must end undo action or we may corrupt edit buffer
    komodo.editor.endUndoAction();
}

Tiptop

Answer 3

You can set up a command to run to replace a selection of HTML with the tidy version. Press Ctrl + R to bring up the command window and enter tidy -utf8 -asxhtml -i for the command which formats indented XHTML using UTF-8 encoding.

Check the two boxes to "Pass selection as input" and "Insert output". You can also specify custom key bindings there.

Example screenshot: http://grab.by/8C3t

Evelinevelina

Answer 4

The answer that TAOcode made is great, but in newer versions of Komodo a few things have changed, so here is my update to the code to make it work again:

komodo.assertMacroVersion(3);
if (komodo.view) { 
    komodo.view.setFocus(); 
}

var formatter;
var language = komodo.view.language;
switch (language) {
    case 'Perl':
        formatter = 'perltidy -i=2 -pt=2 -l=0';
        break;
    case 'XML':
    case 'XUL':
    case 'XLST':
        formatter = 'tidy -q -xml -i -w 500';
        break;
    case 'HTML':
        formatter = 'tidy -q -asxhtml -i -w 120';
        break;
  //case 'JavaScript':
  //    ko.views.manager.currentView.scimoz.selectAll();
  //    ko.views.manager.currentView.scimoz.replaceSel(js_beautify(ko.views.manager.currentView.scimoz.text, {indent_size: 2}));
  //    return null;
  default:
      alert("I don't know how to tidy " + language);
      return null;
}

// Save the current cursor position
var currentPos = komodo.editor.currentPos;

try {
    // Save the file. After the operation you can check what changes where made by
    // File -> Show Unsaved Changes
    komodo.doCommand('cmd_save');

    // Group operations into a single undo
    komodo.editor.beginUndoAction();

    // Select the entire buffer and pipe it into the formatter.
    komodo.doCommand('cmd_selectAll');
    ko.run.runEncodedCommand(window, formatter + " {'insertOutput': True, 'operateOnSelection': True}");

     // Restore the cursor. It will be close to the where it started, depending on how the text was modified.
     komodo.editor.gotoPos(currentPos);

    // On Windows, when the output of a command is inserted into an edit buffer it has Unix line ends.
    komodo.doCommand('cmd_cleanLineEndings');
}
catch (e) {
    alert(e);
}
finally {
    // Must end undo action or may corrupt edit buffer
    komodo.editor.endUndoAction();
}

The big differences are in line 5: komodo.document.language becomes komodo.view.language and line 40: Run_RunEncodedCommand becomes ko.run.runEncodedCommand

Qualmish

Answer 5

1. Go to menu Toolbox → Add → New Command

2. Enter the Tidy command line arguments in the Run field:

    tidy -config tidy_config_html.txt
   

3. Check all the boxes

4. Enter the path to Tidy in the Start In field

5. Click the Key Binding tab

6. Use Ctrl + 1 as the New Key Sequence

7. Press Ctrl + A and Ctrl + 1

Nocuous