Beautify HTML and CSS

[markeeeee]

Can I beautify HTML and CSS in Dreamweaver?

- Sort tabs out and make code easier to read.

- Make minified code (that is all on one long line) readable

[Jon Fritz]

For CSS minification, I was able to use a Brackets extension inside DW up until CC 2019.

After that version the extension I had stopped working. 

I haven't found a new one that gives DW the same functionality.

[markeeeee]

Sorry my post wasn't perhaps clear. I'm looking for a way to 'Beautify' CSS and HTML.

There is a Brackets Beautify extension, which works fine in Brackets. But the Brackets extension to Lint HTML no longer works.

I was hoping that Dreamweaver can do both:

Beautify

Validate HTML and CSS

[Jon Fritz]

You have two posts in the forum.

One about Validation, which DW can do a couple of different ways (as answered in your other post) and one about making minified code from css and html, which DW can't do without an extension.

DW does have the ability to format code adding indentation based on rules you set, to make code more readable. You can find the command under Edit > Code >  Apply Source Formatting and for the settings the command follows, go to Tools > Tag Libraries.

[Nancy OShea]

My server has GZIP enabled so everything I upload is automatically compressed by the server to save bandwidth.  

There are plenty of free online services.  Bookmark these links in your browser.  Test your results carefully to ensure nothing breaks.

• https://www.minifier.org/
• https://www.digitalocean.com/community/tools/minify
• https://www.cleancss.com/css-minify/
• https://www.toptal.com/developers/cssminifier/
• https://kangax.github.io/html-minifier/
• https://beautifytools.com/html-minifier.php

Hope that helps.

[Jon Fritz]

...There is a Brackets Beautify extension, which works fine in Brackets...

By markeeeee

Could you point me to the Brackets extension you're using? 

DW doesn't have a fully functional Brackets implementation within it, but a lot of Brackets extensions do run correctly if manually installed in the right place. 

I could test it and post the method of installation if it works correctly, then you would have the feature you're looking for without having to switch programs.

[markeeeee]

Hi.

In the Brackets app > Extension Manager > and I installed the Beautify extension by Drew Hamlett.

I've tried it out and it seems to work.

Let me know if you can get it to work in Dreamweaver!

Thanks

[Jon Fritz]

Unfortunately, looks like it doesn't work. At least the version I found online by that author, in the latest version of DW.

The only other version I have installed is CC2015, before Adobe added Brackets to the program. So I can't test if that's a newer development, like the minifier I had used in the past in DW CC2019.

Sorry.

[Nancy OShea]

I think code format is less relevant than valid working code.  But if you're obsessed with it, you can set Code Format in Preferences by clicking on Tag Libraries button.   When done, hit the Apply button.  See screenshots.

To Apply Formatting, click the paint bucket icon on your Common Menu.

When scripts are minified, formatting styles are removed.  For this reason, I don't care much what code looks like as long as I can read it and it works as intended.  🙂