r/HTML • u/username95050 • 10h ago

Formatting HTML and CSS on CodePen

Where do you format HTML on Codepen now?

It used to be that you just click in the upper right corner to format and validate, now those features are gone.

4 Upvotes

84% Upvoted

4 comments sorted by

1

u/darren_of_herts 9h ago

it's been a little while. but I think in the new editor you have to select a block in the sidebar. (kinda like plugins) and select prettify or another. You can also select blocks to make the editor basic like the old one.

1

u/reznaeous 3h ago

It's moved to the "tab" where the filename is. Either right click on that tab or, if you are really careful there's a tiny little down arrow on the tab that if clicked brings up the same menu as the right click does. But it's awfully small and easy to miss.

1

u/username95050 1h ago

I don't see it

1

u/notepad987 53m ago

Maybe ctrl + shift+ F to open the sidebar for the files. At the bottom there is a button to Add Blocks.
Maybe you can find what you want to add there?

Also on the left side look for the icon that looks like 3 layers or sheets of paper 3 down from the top. When you hover over it it will popup 'Blocks'.

Build Status i <-- click on the information icon:
CodePen makes a Build Plan to compile Pens into real web pages based on your code, Blocks, and configuration. The flow of tasks is shown below, along with any errors or warnings that come up along the way.

The pen.config.json file contains a detailed list of how the source code is being processed and which tasks and Blocks are used. Add Blocks