Posted in code
2588
5:24 am, August 28, 2018
 

How to make your code look nice

This one is just in case you don't like using the tab button or maybe you have inherited some code that is just a big mess.

Using the Code Beautifier Tool you can just paste in the code, and it adds tabs and indenting for you.

So you can paste in some code like this: (this is just some random minified css)

.y,.yp,.yf,.yi,.yl,.ye{}.z1asCe,.qa__svg-icon{display:inline-block;fill:currentColor;height:24px;line-height:24px;position:relative;width:24px}.z1asCe svg,.qa__svg-icon svg{display:block;height:100%;width:100%}.s2er{}.s2fp{}.s2fp-h{}.s2ml{}.s2ra{}.s2tb{}.s2tb-h{}.spch{}.spchc{}.spch-dlg{background:transparent;border:none}.spch{background:#fff;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;text-align:left;top:0;visibility:hidden;width:100%;z-index:10000;transition:visibility 0s linear 0.218s,background-color 0.218s}.s2fp.spch{opacity:1;visibility:visible;transition-delay:0s}.s2tb-h.spch{background:rgba(255,255,255,0);opacity:0;visibility:hidden}.s2tb.spch{background:rgba(255,255,255,0);opacity:1;visibility:visible;transition-delay:0s}.close-button{background:none;border:none;color:#777;cursor:pointer;font-size:26px;right:0;height:11px;line-height:15px;margin:15px;opacity:.6;padding:0;position:absolute;top:0;width:15px;z-index:10}.close-button:hover{opacity:.8}.close-button:active{opacity:1}

And it will turn it into something more readable, like this:

.z1asCe,.qa__svg-icon {
	display:inline-block;
	fill:currentColor;
	height:24px;
	line-height:24px;
	position:relative;
	width:24px
}
...[snipped]

Here is a link to the Code Beautifier

Here is a quick video on how to use the Code Beautifier

View Statistics
This Week
70
This Month
270
This Year
318

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Articles
Search Articles by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Bajo
Random CSS Property

scroll-margin-bottom

The scroll-margin-bottom property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
scroll-margin-bottom css reference