View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
//gogo global variable (function(win) { var level = 0; var LOOP_SIZE = 100; var singleLine = false; var tabSize = 2; var tabChar = tabSize == 1 ? '\t' : ' '; var rowColumn = 80; win.runTabifier = function(code, options) { if (options.tabSize) tabSize = options.tabSize; if (options.tabChar) tabChar = options.tabChar; if (options.rowColumn) rowColumn = options.rowColumn; if (options.singleLine) singleLine = options.singleLine; if ('html' == options.type) code = cleanHTML(code); if ('css' == options.type) code = cleanCSS(code); if ('c' == options.type) code = cleanCStyle(code); return code; }; function finishTabifier(code) { code = code.replace(/\n\s*\n/g, '\n'); //blank lines code = code.replace(/^[\s\n]*/, ''); //leading space code = code.replace(/[\s\n]*$/, ''); //trailing space level = 0; //hideProgress(); return code; } function showProgress(done, total) { var perc = Math.floor(100 * done / total); var bar = document.getElementById('bar'); bar.innerHTML = perc + '%\u00A0'; bar.style.width = perc + '%'; bar.style.visibility = 'visible'; } function hideProgress() { var bar = document.getElementById('bar'); bar.style.visibility = 'hidden'; } function cleanHTML(code) { var i = 0; function cleanAsync() { var iStart = i; for (; i < code.length && i < iStart + LOOP_SIZE; i++) { point = i; //if no more tags, copy and exit if (-1 == code.substr(i).indexOf('<')) { out += code.substr(i); return finishTabifier(out); } //copy verbatim until a tag while ('<' != code.charAt(point)) point++; if (i != point) { cont = code.substr(i, point - i); if (!cont.match(/^\s+$/)) { if ('\n' == out.charAt(out.length - 1)) { out += tabs(); } else if ('\n' == cont.charAt(0)) { out += '\n' + tabs(); cont = cont.replace(/^\s+/, ''); } cont = cont.replace(/\s+/g, ' '); out += cont; } if (cont.match(/\n/)) { out += '\n' + tabs(); } } start = point; //find the end of the tag while ('>' != code.charAt(point)) point++; tag = code.substr(start, point - start); i = point; //if this is a special tag, deal with it! if ('!--' == tag.substr(1, 3)) { if (!tag.match(/--$/)) { while ('-->' != code.substr(point, 3)) point++; point += 2; tag = code.substr(start, point - start); i = point; } if ('\n' != out.charAt(out.length - 1)) out += '\n'; out += tabs(); out += tag + '>\n'; } else if ('!' == tag[1]) { out = placeTag(tag + '>', out); } else if ('?' == tag[1]) { out += tag + '>\n'; } else if (t = tag.match(/^<(script|style)/i)) { t[1] = t[1].toLowerCase(); tag = cleanTag(tag); out = placeTag(tag, out); end = String(code.substr(i + 1)).toLowerCase().indexOf('' + t[1]); if (end) { cont = code.substr(i + 1, end); i += end; out += cont; } } else { tag = cleanTag(tag); out = placeTag(tag, out); } } //showProgress(i, code.length); if (i < code.length) { return cleanAsync(); } else { return finishTabifier(out); } } var point = 0, start = null, end = null, tag = '', out = '', cont = ''; return cleanAsync(); } function tabs() { var s = ''; var t = ''; for (var n = 0; n < tabSize; n++) t += tabChar; for (var j = 0; j < level; j++) s += t; return s; } function cleanTag(tag) { var tagout = ''; tag = tag.replace(/\n/g, ' '); //remove newlines tag = tag.replace(/[\s]{2,}/g, ' '); //collapse whitespace tag = tag.split(' '); for (var j = 0; j < tag.length; j++) { if (-1 == tag[j].indexOf('=')) { //if this part doesn't have an equal sign, just lowercase it and copy it tagout += tag[j].toLowerCase() + ' '; } else { //otherwise lowercase the left part and... var k = tag[j].indexOf('='); var tmp = [tag[j].substr(0, k), tag[j].substr(k + 1)]; tagout += tmp[0].toLowerCase() + '='; var x = tmp[1].charAt(0); if ("'" == x || '"' == x) { //if the right part starts with a quote, find the rest of its parts tagout += tmp[1]; while (x != String(tag[j]).charAt(String(tag[j]).length - 1)) { tagout += ' ' + tag[++j]; } tagout += ' '; } else { //otherwise put quotes around it tagout += "'" + tmp[1] + "' "; } } } tag = tagout.replace(/\s*$/, '>'); return tag; } /////////////// The below variables are only used in the placeTag() function /////////////// but are declared global so that they are read only once //opening and closing tag on it's own line but no new indentation level var ownLine = ['area', 'body', 'head', 'hr', 'i?frame', 'link', 'meta', 'noscript', 'style', 'table', 'tbody', 'thead', 'tfoot']; //opening tag, contents, and closing tag get their own line //(i.e. line before opening, after closing) var contOwnLine = ['li', 'dt', 'dt', 'h[1-6]', 'option', 'script']; //line will go before these tags var lineBefore = new RegExp('^<(/?' + ownLine.join('|/?') + '|' + contOwnLine.join('|') + ')[ >]'); //line will go after these tags lineAfter = new RegExp('^<(br|/?' + ownLine.join('|/?') + '|/' + contOwnLine.join('|/') + ')[ >]'); //inside these tags (close tag expected) a new indentation level is created var newLevel = ['blockquote', 'div', 'dl', 'fieldset', 'form', 'frameset', 'map', 'ol', 'p', 'pre', 'select', 'td', 'th', 'tr', 'ul']; newLevel = new RegExp('^?(' + newLevel.join('|') + ')[ >]'); function placeTag(tag, out) { var nl = tag.match(newLevel); if (tag.match(lineBefore) || nl) { out = out.replace(/\s*$/, ''); out += "\n"; } if (nl && '/' == tag.charAt(1)) level--; if ('\n' == out.charAt(out.length - 1)) out += tabs(); if (nl && '/' != tag.charAt(1)) level++; out += tag; if (tag.match(lineAfter) || tag.match(newLevel)) { out = out.replace(/ *$/, ''); out += "\n"; } return out; } function cleanCSS(code) { var i = 0, iLength = 0, iBracket = null, iMedia = false; function cleanAsync() { var iStart = i, iChar; for (; i < code.length && i < iStart + LOOP_SIZE; i++) { iChar = code.charAt(i); if (out.charAt(out.length - 1) == '\n') iLength = 0; if ('@' == iChar ) { out += '\r@'; iMedia = true; } else if ('{' == code.charAt(i)) { level++; out += ' {' + (singleLine && (!iMedia && level || iMedia && level == 2 ) ? ' ' : '\n') + (singleLine && (!iMedia && level || iMedia && level == 2 ) ? '' : tabs()); //out += ' {
'; //iBracket = '{\n' + tabs(); } else if ('}' == iChar) { out = out.replace(/\s*$/, ''); level--; out += (singleLine && (!iMedia || iMedia && level == 1) ? ' ' : '\n' + tabs()) + '}\n' + tabs(); if (!level && iMedia) iMedia = false; /* if (!!iBracket) { if (iLength + 2 < rowColumn) out = out.replace(/
/g, ' ') + ' }\n' + tabs(); else out = out.replace(/
/g, iBracket) + '\n' + tabs() + '}\n' + tabs(); iBracket = null; } */ } else if (iChar.match(/;|,/)) { if (iLength < rowColumn || singleLine) out += iChar + ' '; else out += iChar + '\n' + tabs(); } else if ('\n' == iChar) { if (iLength < rowColumn) out += ' '; else out += '\n' + tabs(); } else { out += iChar; iLength++; } } //showProgress(i, code.length); if (i < code.length) { return cleanAsync(); } else { level = li; out = out.replace(/[\s\n]*$/, ''); return finishTabifier(out); } } if ('\n' == code[0]) code = code.substr(1); code = code.replace(/([^\/])?\n*/g, '$1'); code = code.replace(/\n\s+/g, '\n'); code = code.replace(/[ ]+/g, ' '); code = code.replace(/\s?([;:{},+>])\s?/g, '$1'); code = code.replace(/\{(.*):(.*)\}/g, '{$1: $2}'); var out = tabs(), li = level; return cleanAsync(); } function cleanCStyle(code) { var i = 0; function cleanAsync() { var iStart = i; for (; i < code.length && i < iStart + LOOP_SIZE; i++) { c = code.charAt(i); if (incomment) { if ('//' == incomment && '\n' == c) { incomment = false; } else if ('/*' == incomment && '*/' == code.substr(i, 2)) { incomment = false; c = '*/\n'; i++; } if (!incomment) { while (code.charAt(++i).match(/\s/));; i--; c += tabs(); } out += c; } else if (instring) { if (instring == c && // this string closes at the next matching quote // unless it was escaped, or the escape is escaped ('\\' != code.charAt(i - 1) || '\\' == code.charAt(i - 2))) { instring = false; } out += c; } else if (infor && '(' == c) { infor++; out += c; } else if (infor && ')' == c) { infor--; out += c; } else if ('else' == code.substr(i, 4)) { out = out.replace(/\s*$/, '') + ' e'; } else if (code.substr(i).match(/^for\s*\(/)) { infor = 1; out += 'for ('; while ('(' != code.charAt(++i));; } else if ('//' == code.substr(i, 2)) { incomment = '//'; out += '//'; i++; } else if ('/*' == code.substr(i, 2)) { incomment = '/*'; out += '\n' + tabs() + '/*'; i++; } else if ('"' == c || "'" == c) { if (instring && c == instring) { instring = false; } else { instring = c; } out += c; } else if ('{' == c) { level++; out = out.replace(/\s*$/, '') + ' {\n' + tabs(); while (code.charAt(++i).match(/\s/));; i--; } else if ('}' == c) { out = out.replace(/\s*$/, ''); level--; out += '\n' + tabs() + '}\n' + tabs(); while (code.charAt(++i).match(/\s/));; i--; } else if (';' == c && !infor) { out += ';\n' + tabs(); while (code.charAt(++i).match(/\s/));; i--; } else if ('\n' == c) { out += '\n' + tabs(); } else { out += c; } } //showProgress(i, code.length); if (i < code.length) { return cleanAsync(); } else { level = li; out = out.replace(/[\s\n]*$/, ''); return finishTabifier(out); } } code = code.replace(/^[\s\n]*/, ''); //leading space code = code.replace(/[\s\n]*$/, ''); //trailing space code = code.replace(/[\n\r]+/g, '\n'); //collapse newlines var out = tabs(), li = level, c = ''; var infor = false, forcount = 0, instring = false, incomment = false; return cleanAsync(); } })(window);
Tabifier
* { margin:0; padding:0; } a { color:#00a7e6; } body { background:#fff; font-family:HelveticaNeue-Light, helvetica, arial, verdana, sans-serif; font-size:12px; line-height:1.5; margin:15px; } footer { border-top:1px solid #e5e5e5; margin-top:30px; padding:5px 0; } header { background:#434343; color:#fff; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; display:block; line-height:40px; margin:20px 0; padding:5px; } h1 { float:left; font-family:HelveticaNeue-CondensedBold, helvetica, arial, verdana, sans-serif; font-size:26px; font-weight:bold; margin:0 5px; text-shadow:0 -1px 2px rgba(0, 0, 0, .75); text-transform:uppercase; } h2#today { background:#fff; font-family:HelveticaNeue, helvetica, arial, verdana, sans-serif; font-size:14px; font-weight:normal; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:#434343; display:block; float:right; padding:0 15px; } #add_task, #clear_data { background:#ccc; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; color:#fff; display:inline-block; float:left; font-family:HelveticaNeue, helvetica, arial, verdana, sans-serif; font-size:11px; line-height:19px; margin-right:5px; padding:0 5px; opacity:.8; text-decoration:none; text-shadow:0 -1px 2px rgba(0, 0, 0, .15); -webkit-transition:opacity .2s linear; transition:opacity .2s linear; } #add_task { background:#00de36; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#5fd053), to(#18cb05)); background:-moz-linear-gradient(100% 100% 90deg, #18cb05, #5fd053); border:1px solid #12c400; } #clear_data { background:#bbb; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#c8c8c8), to(#a9a9a9)); background:-moz-linear-gradient(100% 100% 90deg, #a9a9a9, #c8c8c8); border:1px solid #a4a4a4; } #add_task:hover, #clear_data:hover { opacity:1; } table { border-collapse:collapse; line-height:1; width:100%; } th, td { border-bottom:1px solid #e5e5e5; padding:4px; text-align:left; vertical-align:middle; width:48px; } th:first-child { width:auto; } thead th:after { content:':00'; } thead th:first-child:after, thead th:last-child:after { content:''; } tfoot td { padding:10px 5px; } tbody th { font-weight:normal; } tbody td:nth-child(even) { background:#efefef; } tfoot th, tfoot td { background:none; border:0; } .title label { display:none; } .task_title { background:-webkit-gradient(linear, 0% 0, 0% 10%, from(#c3c3c3), to(#fff)); background:-moz-linear-gradient(0% 10% 90deg, #fff, #c3c3c3); border:1px solid #c3c3c3; border-bottom:1px solid #ddd; border-top:1px solid #7c7c7c; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family:"Lucida Grande", "Lucida Sans", sans-serif; font-size:11px; height:23px; outline:none; overflow:hidden; padding:4px; resize:none; width:100%; } .task_title:focus { -webkit-box-shadow:0 0 3px rgba(4, 175, 239, 1); -moz-box-shadow:0 0 3px rgba(4, 175, 239, 1); box-shadow:0 0 3px rgba(4, 175, 239, 1); } .task_title.has_value { background:#fff; border:0; padding:6px; } .task_title.has_value:hover { background:rgba(4, 175, 239, .1); } .inc { float:left; height:20px; overflow:hidden; margin:0 1px; width:10px; } .inc label { background:#e6e6e6; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#e5e5e5), to(#ebebeb)); background:-moz-linear-gradient(19% 75% 90deg, #ebebeb, #e5e5e5); border:1px solid #ccc; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; cursor:pointer; display:block; height:100%; overflow:hidden; text-indent:-5000px; width:100%; } .inc label:hover { background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#cecece), to(#d9d9d9)); background:-moz-linear-gradient(19% 75% 90deg, #ebebeb, #d9d9d9); } .inc input { display:none; } .active { background:#00d0f9; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#62cdf5), to(#04afef))!important; background:-moz-linear-gradient(19% 75% 90deg, #04afef, #62cdf5)!important; border:1px solid #00a7e6!important; } @media screen and(max-width:799px) { th, td { padding:2px; text-align:center; width:12px; } th:first-child, td:first-child { padding:5px; text-align:left; } thead th:after { content:''; } .task_title { background:-webkit-gradient(linear, 0% 0, 0% 3%, from(#c3c3c3), to(#fff)); background:-moz-linear-gradient(0% 3% 90deg, #fff, #c3c3c3); height:82px; } .inc { height:20px; margin:1px; } } @media screen and(max-width:599px) { header { line-height:default; } h1 { float:none; font-size:20px; margin-bottom:5px; text-align:center; } h2#today { font-size:12px; float:none; line-height:2; text-align:center; } } .clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height: 0; }
#source { width: 100%; height: 300px; };
Pop out
Help
About
×
×