html tidy?

[titaniumbones]

Hi remy,

Is there already a feature to allow tidying of HTML (e.g. the way the command-line tool "tidy" does)? Mostly I'm just looking for a way to copy in poorly formatted code from a given website, then make it presentable so students can seethe structure a little better. I can do this directly with tidy but it would be cool if jsbin let me (and my students) click a button somewhere... Thanks,
matt

[wamatt]

JSBin rocks! I'd switch from JSFiddle, if it supported tidying up HTML, CSS and JS.

[remy]

Maybe adding this would also solve #339?

[wamatt]

Yeah, I mean as a principle, it should probably be optional (via a UI flag perhaps), sometimes you want things reformatted (especially if you're cut and pasting from a messy 3rd party site). An other times you want it to leave your code alone

[titaniumbones]

I'm just imagining a button that calls tidy (or similar) on the
contents of a buffer -- so yeah, it would be optional. How hard do you
think that wd be to implement, remy?

[remy]

Not hard to implement. You pull the tidy library, and run
jsbin.panels.panels.html.setCode(tidy(jsbin.panels.panels.html.getCode()))
(that's just pseudo code).

I've been thinking about (for a few years now) about a plugin/extension
architecture for JS Bin. This might be a nice starting point.

Let me think about it a bit more...

[titaniumbones]

great, thanks again remy!

[PAEz]

I wrote myself a Chrome Extension to do this.....
http://dl.dropbox.com/u/3610419/___JSBin__Beautify.crx
...stripped out a bunch of the extension (still not done) but the Beautify stuff is in there.
Either use the context menu or Ctrl-Alt-Space, works on selection or all code if nothing selected.
If you want to change the beautifier settings then go to the console and youll find them under....
jsbin.settings._PAEz.beautify
...theres an object for css, javascript and html settings.
It uses JS-Beautify ( https://github.com/einars/js-beautify/ )....I couldnt find any js for HTML Tidy.

[wamatt]

👍

[JonathanWolfe]

This is pseudo-code because I don't have the time at the moment at work to do a full fork-edit-pr,

But couldn't this be done by doing npm install htmltidy or dropping the repo into /public/plugins/

then:

var htmlTidy = require('htmltidy').tidy;
htmlTidy(jsbin.panels.panels.html.getCode(), function(err, html) {
    jsbin.panels.panels.html.setCode(html)
});

Either run it by key combo (I'm partial to ctrl/cmd+shift+L) or by menu item.

[remy]

There's no require client side in jsbin and getCode is a promise. ie. It's
never as simple as one might think :)

It also needs to ignore markdown and support jade? (Or ignore).

On Mon, 27 Oct 2014 14:42 Jon Wolfe notifications@github.com wrote:

This is pseudo-code because I don't have the time at the moment at work to
do a full fork-edit-pr,

But couldn't this be done by doing

npm install htmltidy

or dropping the repo into /public/plugins/

then:

var htmlTidy = require('htmltidy').tidy;htmlTidy(jsbin.panels.panels.html.getCode(), function(err, html) {
jsbin.panels.panels.html.setCode()});

Either run it by key combo (I'm partial to ctrl/cmd+shift+L) or by menu
item.

—
Reply to this email directly or view it on GitHub
#341 (comment).

[JonathanWolfe]

I'll try to have a PR in around Tuesday night for this.

I don't know if there's even is a Jade beautifier since it's whitespace dependent. I'll just have it check the panel setting up at the top to see if it's set to HTML and only run if so.

[remy]

The jsbin.state object will tell you which processor is in effect.

On Mon, 27 Oct 2014 15:04 Jon Wolfe notifications@github.com wrote:

I'll try to have a PR in around Tuesday night for this.

I don't know if there's even is a Jade beautifier since it's whitespace
dependent. I'll just have it check the panel setting up at the top to see
if it's set to HTML and only run if so.

—
Reply to this email directly or view it on GitHub
#341 (comment).

[JonathanWolfe]

Gotcha. I can see the code in my head, I just need some time to pin it down and check it.

[allouis]

@JonathanWolfe how's this coming along 😺?

[JonathanWolfe]

Work went from busy to crazy so I pushed it to the back burner. Maybe in a week? We're wrapping up 2 projects soon in the next couple days so I should get time again.

[allouis]

Awesome, that's great, thank you!

[remy]

Done!

[wamatt]

pretty cool! ;)

[awangstar]

Hi @remy love this beautify feature, however for some weird reason. My Command + Shift + L stopped working after couple of times.

I am using chrome on a mac.

Also I am noticing it works if am logged out of my account. I tried making my settings to default ... however when I am logged in the beautify code feature still doesn't work.