• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Beautify HTML and CSS

Contributor ,
Mar 23, 2022 Mar 23, 2022

Copy link to clipboard

Copied

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

Views

631

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 23, 2022 Mar 23, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 23, 2022 Mar 23, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 23, 2022 Mar 23, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 23, 2022 Mar 23, 2022

Copy link to clipboard

Copied

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.

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 24, 2022 Mar 24, 2022

Copy link to clipboard

Copied

quote

...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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 24, 2022 Mar 24, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 24, 2022 Mar 24, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 24, 2022 Mar 24, 2022

Copy link to clipboard

Copied

LATEST

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.

 

image.png

 

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

image.png

 

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.  🙂

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines