Posted in code
2655
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
81
This Month
337
This Year
385

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

“Make no mistake: This is not your diary. You are not letting it all hang out. You are picking and choosing every single word.”


Dani Shapiro
Random CSS Property

animation-name

The animation-name CSS property specifies the names of one or more @keyframes at-rules describing the animation or animations to apply to the element.
animation-name css reference