Posted in code
3177
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
99
This Month
436
This Year
907

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

mask-mode

The mask-mode CSS property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
mask-mode css reference