Code Formatting

I’m looking for a HTML code formatter for my tutorial projects. Kind of like how CSSEdit does the format and spacing. I have used the Dreamweaver source formatter, but I didn’t know if there was a droplet or some sort of Automator action I could use to make that process easier.

I’m willing to buy if there’s an application that works better and, of course, I’m on Mac.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This was just discussed on my Ruby user group, a couple of JavaScript solutions were put forward. Have a google for highlighter.js.

Walter


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That doesn’t seem to be what I’m looking for. Perhaps MacRabbit will add it into Espresso, but for now I’ll just count on Dreamweaver to do it.

Thanks Waltd.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Are you looking for something that can mark up the code as HTML, and
apply color-coding to indicate what sort of operator each string is?
Or are you just looking for something to make a block of code that
contains “illegal” characters < > & etc. into their entity replacements?

I could do an Action for you that would do the latter, naturally that
would be for Freeway. BBEdit and TextMate (my editors of choice) both
have formatting tools which can take a selection of text and convert
any illegal characters into HTML entities. I’m sure that any other
programming editor can do the same.

For anyone else who’s wondering, highlighter.js takes any block of
code that has been marked up with <pre><code> ... </code></pre> and
automatically divines what sort of code it is and uses JavaScript to
colorize it and make it look the way code does in a programmer’s
editor (different colors for different operators and function names
and variables to help you read the raw code more fluently).

Walter

On Apr 11, 2009, at 9:08 PM, Dan J wrote:

That doesn’t seem to be what I’m looking for.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, I’m looking for something that would do this:

Take a block of code:

<div id="item1">
<p>Some text here</p>
    </div>
<div id="item2">
<p>Some text here</p>
    </div>
<div id="item3">
<p>Some text here</p>
    </div>
<div id="item4">
<p>Some text here</p>
    </div>

and format it to:

     <div id="item1">
          <p>Some text here</p>
     </div>
     <div id="item2">
          <p>Some text here</p>
     </div>
     <div id="item3">
          <p>Some text here</p>
     </div>
     <div id="item4">
          <p>Some text here</p>
     </div>

Basically the first code snippet is flat against the left hand side and then in the second box it’d tab in the items. If you have Dreamweaver it’s the last paint-can looking icon on the bottom of the code-bar on the left (CS4) and it says “Apply Source Formatting.”

Kind of like how in CSSEdit takes:

.style { background-color: #000000; color: #FFFFFF}

into

.style {
	background-color: #000000;
	color: #FFFFFF
}

I don’t need to highlight anything, just tab it out. I’ve rigged the template in question with some odd spacing, but it’d be nice to have a droplet or commercial product that did that easily.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There might be a Coda plug-in that will do this for you. <http://www.panic.com/coda/developer/community/plugins.php

You might also have luck asking on the Coda user group, they’re a
friendly bunch. http://groups.google.com/group/coda-users

Todd

On Apr 12, 2009, at 9:40 PM, Dan J wrote:

No, I’m looking for something that would do this:

Take a block of code:

<div id="item1">
<p>Some text here</p>
   </div>
<div id="item2">
<p>Some text here</p>
   </div>
<div id="item3">
<p>Some text here</p>
   </div>
<div id="item4">
<p>Some text here</p>
   </div>

and format it to:

    <div id="item1">
         <p>Some text here</p>
    </div>
    <div id="item2">
         <p>Some text here</p>
    </div>
    <div id="item3">
         <p>Some text here</p>
    </div>
    <div id="item4">
         <p>Some text here</p>
    </div>

Basically the first code snippet is flat against the left hand side
and then in the second box it’d tab in the items. If you have
Dreamweaver it’s the last paint-can looking icon on the bottom of
the code-bar on the left (CS4) and it says “Apply Source Formatting.”

Kind of like how in CSSEdit takes:

.style { background-color: #000000; color: #FFFFFF}

into

.style {
	background-color: #000000;
	color: #FFFFFF
}

I don’t need to highlight anything, just tab it out. I’ve rigged
the template in question with some odd spacing, but it’d be nice to
have a droplet or commercial product that did that easily.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Todd. I had looked at the plugin PHP Plugin because of the HTML tidy reference, and every-time I try and use it, it craps out and I have to force quit.

Two things I wonder. I run my applications through XSlimmer to drop all the Intel related items and language packs out of my software. It cuts both Freeway and Coda down considerably (helps them run smoother as well) and it also says that the plugin requires an Intel-based Mac and I’m working on a PPC.

Do you think those would make a difference as to why the plugin craps out?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t know anything about XSlimmer but I would guess the PPC is the
culprit. I too use one and some of the plug-ins don’t work for me
either.

[Reflects and rolls eyes] For the longest time I was using a B&W G3
and was finally able to get a used last-gen PowerMac G5 (Intel was too
expensive) which was an amazing improvement but even still it seems I
can’t use a simple plug-in on my PPC. Sheesh, I hate being poor. : )

Todd

On Apr 13, 2009, at 2:19 AM, Dan J wrote:

Two things I wonder. I run my applications through XSlimmer to drop
all the Intel related items and language packs out of my software.
It cuts both Freeway and Coda down considerably (helps them run
smoother as well) and it also says that the plugin requires an Intel-
based Mac and I’m working on a PPC.

Do you think those would make a difference as to why the plugin
craps out?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I do not understand exactly (because of shortcomings in language and
knowledge) but maybe a extension called “TEA for Espresso” is something that
could be useful? There is a link to the espresso forum, that describes what
it does. The link is http://wiki.macrabbit.com/forums/viewthread/160/P0/,
and this a feature list of the first version:

  • My favorite Textmate HTML actions (Wrap Selection in Tag, Insert
    Open/Close Tag with Current Word, Wrap Selection in Link, etc.)
  • The ability to add your own actions, whether by using generic TEA actions
    with different snippets via XML or writing completely custom scripts in
    Python (making use of the helper functions that TEA provides)
  • 100% Python, with source code freely available under the MIT license at
    the GitHub tea-for-espresso
    projecthttp://github.com/onecrayon/tea-for-espresso/for anyone
    interested in creating Python Sugar actions outside of TEA
  • I’ve stuck some pretty extensive documentation for the Sugar and how you
    can customize/extend it over at the GitHub
    wikihttp://wiki.github.com/onecrayon/tea-for-espressofor those who
    want to test out the waters
    Wolfgang

2009/4/13 Dan J email@hidden

No, I’m looking for something that would do this:

Take a block of code:

<div id="item1">
<p>Some text here</p>
   </div>
<div id="item2">
<p>Some text here</p>
   </div>
<div id="item3">
<p>Some text here</p>
   </div>
<div id="item4">
<p>Some text here</p>
   </div>

and format it to:

    <div id="item1">
         <p>Some text here</p>
    </div>
    <div id="item2">
         <p>Some text here</p>
    </div>
    <div id="item3">
         <p>Some text here</p>
    </div>
    <div id="item4">
         <p>Some text here</p>
    </div>

Basically the first code snippet is flat against the left hand side and
then in the second box it’d tab in the items. If you have Dreamweaver it’s
the last paint-can looking icon on the bottom of the code-bar on the left
(CS4) and it says “Apply Source Formatting.”

Kind of like how in CSSEdit takes:

.style { background-color: #000000; color: #FFFFFF}

into

.style {
       background-color: #000000;
       color: #FFFFFF
}

I don’t need to highlight anything, just tab it out. I’ve rigged the
template in question with some odd spacing, but it’d be nice to have a
droplet or commercial product that did that easily.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Aha. So you are looking to do what’s referred to as “pretty-printing”
the code.

In TextMate, this is as simple as selecting the text and choosing
Text / Indent Selection (Command-Option-left square bracket).

###Blatant Plug (and hoping not to start an amusing my-editor-can-beat-
up-your-editor battle)

I recommend a quick purchase of TM – it’s not that much (although I
don’t know how the Euro is doing against the dollar these days). I
used to use BBEdit for everything, and I still use it for some things
(I love its GREP search and multi-file search and replace features)
but TM is my day-to-day editor because it lets me do less – way less
in most cases – and have everything just work. Its project management
tools and the ability to debug most languages and look up references
for most languages directly while editing are unparalleled. Further,
you can write or record your own macros for it, and have them play
back whenever you type a key combo or tab-expand a shortcut.

Walter

On Apr 12, 2009, at 10:40 PM, Dan J wrote:

Basically the first code snippet is flat against the left hand side
and then in the second box it’d tab in the items. If you have
Dreamweaver it’s the last paint-can looking icon on the bottom of
the code-bar on the left (CS4) and it says “Apply Source Formatting.”


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I already have, and use TextMate, quite heavily and I just downloaded the Tidy HTML bundle and it sort of does what I need it too, but it’s still not quite right. I’ll have to adjust the code in the Bundle editor, but I also heard making a Coda plugin is easy too. Who knew that Dreamweaver would have it right?

I’ve managed to alleviate the situation by rigging the template a certain way. There was word that in the new Espresso update coming out that there would be source code formatting which would be great.

Thanks for the help.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t have Tidy here, I’m just talking about the basic built in
indent selection tool. Are you trying to get something to un-twist
“More Efficient” code – everything on one line?

For that, I would use BBEdit’s Format palette in “Gentle Hierarchical”
mode. Horses for courses, as Mr. Logan has often said.

Walter

On Apr 13, 2009, at 2:58 PM, Dan J wrote:

I just downloaded the Tidy HTML bundle and it sort of does what I
need it too, but it’s still not quite right.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s more for the “pretty” aspect.

The long version is I’m using ScreenSteps for my tutorials and it outputs HTML files using an HTML template. How the template is setup is with a series of tags, much like CMS, except they use % as the starter parts (example: %Title%) and then each individual “step” has its own DIV wrap. So I’ve managed to tab in and tab out certain parts to minimize correction. What was causing the snag was that it would always over-indent the first step after the summary and then I’d have to go in and un-indent it until I found a bunch of other kooky things about the output and after I ran it through Dreamweaver’s Source Code Formatter I ended up getting the results I wanted.

I tried using HTML Tidy in TM and it enters down everything too much and after about 10 minutes of staring at the enigma known as the bundle editor, I’m content with my work-around.

It also seems that whenever I ran the PHP Plugin from Coda on my PPC mac that it’d then run another instance of Coda and so my Mac has been bogged down all day and I couldn’t figure that part out till I ran the Activity Monitor.

Quite a day, quite a day. I will try BBEdit, I think I have a license there, and see if that does it. I’d prefer something that wasn’t as resource heavy as Dreamweaver and I’m really hoping that MacRabbit tosses it into Espresso because it shouldn’t be this difficult, but again software is generating this HTML and I don’t run into this issue when I write it on my own.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you want the editor to reformat existing code with indents then
BBEdit does this. Go to the Markup menu and choose Tidy>Reflow
document. A dialog will appear, choose Indent block-level tags and
click Ok.

HTH,

Joe

On 13 Apr 2009, at 23:54, Dan J wrote:

It’s more for the “pretty” aspect.

The long version is I’m using ScreenSteps for my tutorials and it
outputs HTML files using an HTML template. How the template is
setup is with a series of tags, much like CMS, except they use % as
the starter parts (example: %Title%) and then each individual “step”
has its own DIV wrap. So I’ve managed to tab in and tab out certain
parts to minimize correction. What was causing the snag was that it
would always over-indent the first step after the summary and then
I’d have to go in and un-indent it until I found a bunch of other
kooky things about the output and after I ran it through
Dreamweaver’s Source Code Formatter I ended up getting the results I
wanted.

I tried using HTML Tidy in TM and it enters down everything too much
and after about 10 minutes of staring at the enigma known as the
bundle editor, I’m content with my work-around.

It also seems that whenever I ran the PHP Plugin from Coda on my PPC
mac that it’d then run another instance of Coda and so my Mac has
been bogged down all day and I couldn’t figure that part out till I
ran the Activity Monitor.

Quite a day, quite a day. I will try BBEdit, I think I have a
license there, and see if that does it. I’d prefer something that
wasn’t as resource heavy as Dreamweaver and I’m really hoping that
MacRabbit tosses it into Espresso because it shouldn’t be this
difficult, but again software is generating this HTML and I don’t
run into this issue when I write it on my own.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, so this is to correct the source view of your published code
after it’s been auto-generated. I understand, now. I thought you
wanted your code examples to look “purty” in the browser view. That’s
what highlighter and its friends are for.

Walter

On Apr 13, 2009, at 6:54 PM, Dan J wrote:

and then I’d have to go in and un-indent it until I found a bunch of
other kooky things about the output and after I ran it through
Dreamweaver’s Source Code Formatter I ended up getting the results I
wanted.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Joe and Walt. I did try BBEdit but it re-flow’s the entire document rather than just a specific section (unless there is a way to do just a selection).

It still is the best I’ve seen out of my options so far.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could cut and paste into a new document, reflow it and then cut
and paste back. A bit convoluted but I’ve never seen an app or IDE
that will auto indent a selected block. I personally tend to use
BBEdits command-[ to unindent anything I want to re-indent, and then
use the cmd-] to indent it properly.

Not as quick as auto but what I’m used to…

Joe

On 15 Apr 2009, at 08:42, Dan J wrote:

Thanks Joe and Walt. I did try BBEdit but it re-flow’s the entire
document rather than just a specific section (unless there is a way
to do just a selection).

It still is the best I’ve seen out of my options so far.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Select a section of code. From the HTML Tools palette, click on
Utilities / Format. Choose your favorite format (Gentle Hierarchical
is nice on the eyes). Press the Okay button. Bingo.

Walter

On Apr 15, 2009, at 3:42 AM, Dan J wrote:

Thanks Joe and Walt. I did try BBEdit but it re-flow’s the entire
document rather than just a specific section (unless there is a way
to do just a selection).


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oddly enough a program called “Taco HTML Edit” does the trick. The problem, at least for picky me, is in BBEdit it takes the code from this:

<div id="sample">
<p>This Is Sample Text</p>
    </div>

and converts it to this:

<div id="sample">
   <p>
          This Is Sample Text
       </p>
    </div>

when I really want it to look like (and Taco HTML Edit does):

<div id="sample">
       <p>This Is Sample Text</p>
    </div>

Nothing like having a Taco icon in your dockbar. LOL :slight_smile:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options