HTML SYNTAX HIGHLIGHTER

Wednesday, 19 October 2016

HTML SYNTAX HIGHLIGHTER

-----------------------------------------------------------------------------------------------------------------
CODE:
------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<title>View Source Button</title>

<style>

#source-code { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }

#source-code:target { display: block; }

#source-code pre { padding: 20px; font: 14px/1.6 Monaco, Courier, MonoSpace; margin: 50px auto; background: rgba(0,0,0,0.8); color: white; width: 80%; height: 80%; overflow: auto; }

#source-code pre a, #source-code pre a span { text-decoration: none; color: #00ccff !important; }

#x { position: absolute; top: 30px; left: 10%; margin-left: -41px; }

.button { background: #00ccff; padding: 10px 20px; color: white; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

</style>

$(function() {

$("<pre />", {

"html": '<!DOCTYPE html>\n<html>\n' +

$("html")

.html()

.replace(/[<>]/g, function(m) { return {'<':'<','>':'>'}[m]})

.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +

'\n</html>',

"class": "prettyprint"

}).appendTo("#source-code");

prettyPrint();

});

</script>

</head>

<body>

<!-- /*

* PASTE YOUR CODE CSS WHAT U LIKE TO HEIGHLIGHT

*/ -->

<style>

.label-size:last-child {

margin-bottom: 3px;

}

</style>

document.write(fbgadgets("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0lKI4zHwGuTQTvTP7i7Pag_tU0ftROEba9kTKg4ba8mDJArQmIJnwJZI6bCVYPIv10pqg-mEYj_Wp0_EOqfnSIsCxymUf-q2QV_Wz3we92f1mvfezwXEr3Mp_fM1Ql4do0JOETLon0w51/s72-c/GENERIC+BLOGGER+TEMPLATE.png","Generic Blogger Template"));

</script>

<!-- /*

* PASTE YOUR CODE CSS WHAT U LIKE TO HEIGHLIGHT

*/ -->

<h1>Fancy View Source Button</h1>

<p>Click a link, see the source of the page. Click the X or press the back button to close. This uses jQuery and CSS3. </p>