0

I work on Geany because it is lightweight and simple. But one future I really miss from using sophisticated and heavy code editors is prettifying the code with a keystroke. But Geany allows external scripts to run on the text in the editor through "custom commands".

So I am on the look out for CLI program that can prettify a webpage containing HTML + CSS + JS? Not just HTML or JS. Prettify the webpage if it contains either HTML or CSS or JS or all of them.

4
  • Run it through html-tidy + js-beautify? ( github.com/beautify-web/js-beautify )? Commented Jul 17, 2021 at 10:48
  • @ArtemS.Tashkinov html-tidy nukes CSS. Besides I am looking for a single utility that can prettify if it's a HTML or CSS or JS.
    – Finch
    Commented Jul 19, 2021 at 18:33
  • Sorry, haven't seen anything for that ever. Including JS/CSS in your HTML code is a bad practice anyways, so if I were you I'd split HTML files into HTML and JS/CSS and pure HTML. Commented Jul 19, 2021 at 18:35
  • Of course @ArtemS.Tashkinov. But sometimes one needs to included a little bit of JS into the HTML.
    – Finch
    Commented Sep 26, 2021 at 17:26

1 Answer 1

1

First install prettier "globally" using either npm or your Package manager.

Using npm:

npm install -g prettier

To "prettify" CSS using "custom commands" with Geany:

Config - One time only!

  1. Edit -> Format -> Send selection to -> Set custom commands
  2. Click Add
  3. Enter prettier --stdin-filepath temp.css in Command field.
  4. Enter CSS in Label
  5. Click OK.

Now every time you want to "prettify" CSS:

  1. Select the CSS text you want to prettify:
  2. Go to / pressEdit -> Format -> Send selection to -> CSS

[recommended] To "prettify" any source code file directly using prettier:

  1. npx prettier --write .
  2. Read the "Usage" section in the document for more information.

Caution: Prettifying, Beautifying or Formatting your source code files modifies them.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .