Posted in code
2543
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
50
This Month
240
This Year
273

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


Me
Random CSS Property

box-sizing

The box-sizing CSS property sets how the total width and height of an element is calculated.
box-sizing css reference