log_css= '#visph {\ position:fixed;\ left:0;\ top:0;\ width:100vw;\ height:100vh;\ overflow:auto;\ background:white;\ padding:1ex;\ box-sizing:border-box;\ }\ #visph.hidden {\ display:none;\ }\ #visph > details > div {\ border:1px solid black;\ overflow-x:scroll;\ padding:1ex;\ margin-bottom:1ex;\ }\ #visph > details > div > pre {\ min-width:100%;\ width:60em;\ white-space:pre-wrap;\ margin:0;\ }\ #visph .pro {\ font-weight:bold;\ }\ #visph .pro .nam {\ color:#00f\ }\ #visph .pro .val {\ font-weight:normal;\ font-style:italic;\ color:#f00;\ }\ #visph .sel {\ font-weight:bold;\ }\ #visph .com {\ color:#ccc;\ }\ #visph .tag {\ color:#00f;\ font-weight:bold;\ }\ #visph .att {\ font-weight:normal;\ }\ #visph .att .nam {\ color:#f0f;\ }\ #visph .att .val {\ font-style:italic;\ color:#f00;\ }\ '; var rtag = /(<\/?[^!][\S]*?)(\b[\s\S]*?)>/g; var rat1 = /(\b\S+?)(\s*=\s*)(["][^"]*?["])/g; var rat2 = /(\b\S+?)(\s*=\s*)(['][^']*?['])/g; function tag(t) { var r, tt, nt = '', i = 0; //t = t.replace(rtag,'$1$2>'); //return t; while ((r=rtag.exec(t))!==null) { nt += t.substring(i,r.index); nt += ''+r[1]; if (r[2]) { nt += ''; tt = r[2]; tt = tt.replace(rat1,'$1$2$3'); tt = tt.replace(rat2,'$1$2$3'); nt += tt+''; } nt += '>'; i = r.index+r[0].length; } tt = t.substring(i); return nt+tt; } function format(t,f='css') { t = t.replace(//g,'>'); if (f=='css') { // var rval = /:([^;]*?);/g; var rpro = /([\s\n]*)([^\s\n:]*[\s\n]*):([\s\n]*[^;]*?);/g; var rcom = /(\/\*[\s\S]*?\*\/)/g; var rsel1 = /^([\s\S]*?){/; var rsel2 = /}([\s\S]*?){/g; // t = t.replace(rval,':$1;'); t = t.replace(rpro,'$1$2:$3;'); t = t.replace(rcom,'$1'); t = t.replace(rsel1,'$1{'); t = t.replace(rsel2,'}$1{'); } else if (f=='html') { var rcom = /()/g; t = t.replace(rcom,'$1'); var r, tt, nt='', i=0; while ((r=rcom.exec(t))!==null) { //tt = t.substring(i,r.index); //tt = tt.replace(rtag,'$1$2>'); //nt += tt+r[0].replace(/>/g,'>'); nt += tag(t.substring(i,r.index))+r[0]; i = r.index+r[0].length; } //tt = t.substring(i); //tt = tt.replace(rtag,'$1$2>'); //t = nt+tt; t = nt+tag(t.substring(i)); } return '

'+t+'

'; } function wrap(t,c,f,o) { o = (o)?' open':''; return '

'+t+'

'+format(c,f)+''; } window.onload = function() { var style = document.createElement('style'); style.innerText = log_css; document.getElementsByTagName('head')[0].appendChild(style); var log = document.createElement('div'); log.id = 'visph'; log.className = 'hidden'; document.body.insertBefore(log,document.body.firstChild); document.body.ondblclick = function() { log.className = (log.className==='')?'hidden':''; }; log.innerHTML = ''; log.innerHTML += wrap('CSS with comments',css); log.innerHTML += wrap('CSS witout comments',nocomment_css); log.innerHTML += wrap('improved CSS with comments',improved_css); log.innerHTML += wrap('improved CSS without comments',nocomment_improved_css,'css',true); log.innerHTML += wrap('original HTML',html,'html'); log.innerHTML += wrap('improved HTML without comments',nocomment_improved_html,'html',true); log.innerHTML += wrap('improved HTML with comments',improved_html,'html'); var s=document.querySelectorAll('summary'); var i=s.length; var f = function() { this.blur(); }; while (i--) s[i].onfocus = f; alert('double click on page content to switch between page and different code views...'); }; var html = '\n\n \n My blog Page \n \n \n

Tarif Aziz

About me

\n Hi! I\'m Tarif Aziz and I\'m from Bangladesh.I\'m 14 and I\'m in 8th grade. I love to code.I want to be a software Engineer. I want to be a Software Engineer at Google. Currently I\'m Learning these:

Html
Python

Games Section

\n To download Zombie Safari click\n here
\n To download Bomb Squad click here\n

1st One is Zombie Safari and the second one is BombSquad.These are the games that I usually play on my mobile.

Movies Section

\n Some movies that I\'ve watched and loved are:
\n

The Matrix

Forest Gump

Contact me

\n \n

Follow me on

\n \n \n

\n \n \n'; var improved_html = '\n\n \n My blog Page \n\n\n\n\n\n\n\n\n\n\n\n\n \n \n\n\n

Tarif Aziz

\n\n\n\n

About me

\n\n

\n\n Hi! I\'m Tarif Aziz and I\'m from Bangladesh.I\'m 14 and I\'m in 8th grade. I love to code.I want to be a software Engineer. I want to be a Software Engineer at Google. Currently I\'m Learning these:\n

Html
Python

\n \n

Games Section

\n
\n To download Zombie Safari click\n here\n
\n To download Bomb Squad click\n here\n

1st One is Zombie Safari and the second one is BombSquad.These are the games that I usually play on my mobile.

\n \n\n

Movies Section

\n\n

Some movies that I\'ve watched and loved are:

\n\n\n

\n\n
\n

\n\n

\n \n\n \n \n \n'; var nocomment_improved_html = '\n\n \n My blog Page \n \n \n

Tarif Aziz

About me

\n Hi! I\'m Tarif Aziz and I\'m from Bangladesh.I\'m 14 and I\'m in 8th grade. I love to code.I want to be a software Engineer. I want to be a Software Engineer at Google. Currently I\'m Learning these:\n

Html
Python

\n \n

Games Section

\n
\n To download Zombie Safari click\n here\n
\n To download Bomb Squad click\n here\n

1st One is Zombie Safari and the second one is BombSquad.These are the games that I usually play on my mobile.

Movies Section

Some movies that I\'ve watched and loved are:

\n
\n

\n \n \n \n'; var css = 'body {\n font-family:sans-serif; /* specify a font-family, as implicit (default) one depend on context: mostly \'serif\' in browsers, but \'sans-serif\' in android app (webview) */\n}\nheader {\n text-align:center; /* to get same behaviour as deprecated element */\n}\nheader div { /* child div inherit text-align:center property */\n background-color:black;\n padding:10px;\n color:white;\n font-weight:bold; /* reproduce behaviour of deprecated element */\n /* as later we define a \'bold\' class, we can also use it in the \'class\' attribute of the targeted
*/\n}\nh1 {\n text-align:center; /* to get same behaviour as align=center deprecated attribut on all
as you use text centering on each */\n}\n.separator {\n background-color:deepskyblue;\n padding:10px; /* as you use this on an empty
, default height is null, so padding add spaces inside it to get a height of 20px: you can even remplace it by height:20px, wich is quicker understandable by human */\n /*color:white;*/ /* unnecessary, as we use this class with empty
s */\n}\n.bold {\n font-weight:bold; /* reproduce behaviour of deprecated element */\n}\n.center {\n text-align:center; /* reproduce behaviour of deprecated element */\n}\n#games p {\n font-weight:bold; /* reproduce behaviour of deprecated element */\n font-style:italic; /* reproduce behaviour of deprecated element */\n}\n#movies {\n background-color:maroon;\n padding:10px;\n color:white;\n}\n#movies figure {\n display:inline-block; /* to get a width adjusted to content, so caption is centered under the image */\n margin:0; /* default behaviour of
introduce some margins */\n}\n#movies figcaption {\n text-align:center;\n font-weight:bold;\n font-size:110%; /* to get less or more the same size as the replaced
element */\n margin:1em 0; /* to get less or more same spacing than the
*/\n}\nli {\n font-weight:bold; /* reproduce behaviour of deprecated element */\n}\n'; var nocomment_css = 'body {\n font-family:sans-serif;\n}\nheader {\n text-align:center;\n}\nheader div {\n background-color:black;\n padding:10px;\n color:white;\n font-weight:bold;\n}\nh1 {\n text-align:center;\n}\n.separator {\n background-color:deepskyblue;\n padding:10px;\n}\n.bold {\n font-weight:bold;\n}\n.center {\n text-align:center;\n}\n#games p {\n font-weight:bold;\n font-style:italic;\n}\n#movies {\n background-color:maroon;\n padding:10px;\n color:white;\n}\n#movies figure {\n display:inline-block;\n margin:0;\n}\n#movies figcaption {\n text-align:center;\n font-weight:bold;\n font-size:110%;\n margin:1em 0;\n}\nli {\n font-weight:bold;\n}\n'; var nocomment_improved_css = 'body {\n font-family:sans-serif;\n}\nheader, h1, form div, #movies figcaption {\n text-align:center;\n}\nheader div {\n background-color:black;\n padding:10px;\n color:white;\n}\n.separator {\n background-color:deepskyblue;\n padding:10px;\n}\n.bold, header div, #movies figcaption, #games p, li {\n font-weight:bold;\n}\n#games p {\n font-style:italic;\n}\n#movies {\n background-color:maroon;\n padding:10px;\n color:white;\n}\n#movies figure {\n display:inline-block;\n margin:0;\n}\n#movies figcaption {\n font-size:110%;\n margin:1em 0;\n}\n'; var improved_css = 'body {\n font-family:sans-serif; /* specify a font-family, as implicit (default) one depend on context: mostly \'serif\' in browsers, but \'sans-serif\' in android app (webview) */\n}\nheader, h1, form div, #movies figcaption {\n text-align:center; /* to get same behaviour as deprecated element and align=center deprecated attribute */\n}\nheader div { /* child div inherit text-align:center property */\n background-color:black;\n padding:10px;\n color:white;\n /*font-weight:bold;*/ /* reproduce behaviour of deprecated element */\n /* as later we define a \'bold\' class, we can also use it in the \'class\' attribute of the targeted
or keep together the both rules */\n}\n.separator {\n background-color:deepskyblue;\n padding:10px; /* as you use this on an empty
, default height is null, so padding add spaces inside it to get a height of 20px: you can even remplace it by height:20px, wich is quicker understandable by human */\n /*color:white;*/ /* unnecessary, as we use this class with empty
s */\n}\n.bold, header div, #movies figcaption, #games p, li {\n font-weight:bold; /* reproduce behaviour of deprecated element */\n}\n#games p {\n font-style:italic; /* reproduce behaviour of deprecated element */\n}\n#movies {\n background-color:maroon;\n padding:10px;\n color:white;\n}\n#movies figure {\n display:inline-block; /* to get a width adjusted to content, so caption is centered under the image */\n margin:0; /* default behaviour of
introduce some margins */\n}\n#movies figcaption {\n font-size:110%; /* to get less or more the same size as the replaced
element */\n margin:1em 0; /* to get less or more same spacing than the
*/\n}\n';

About me

Games Section

Movies Section

The Matrix

Forest Gump

Contact me

Follow me on

About me

Games Section

Movies Section

About me

Games Section

Movies Section

element /\n margin:1em 0; / to get less or more same spacing than the

element /\n margin:1em 0; / to get less or more same spacing than the

*/\n}\n';

My blog page 02 [cleaning code example for @Tarif Aziz] + custom css and html code highligthning