Wednesday, 19 October 2016
HTML SYNTAX HIGHLIGHTER


-----------------------------------------------------------------------------------------------------------------
CODE:
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<title>View Source Button</title>
<link rel='stylesheet' href='https://css-tricks.com/examples/ViewSourceButton/css/style.css'>
<link rel='stylesheet' href='https://css-tricks.com/examples/ViewSourceButton/css/prettify.css'>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/ViewSourceButton/prettify/prettify.js"></script>
<script>
$(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>
<script type='text/javascript'>
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
*/ -->
<div id="page-wrap">
<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>
<a class="button" href="#source-code" id="view-source">Fancy View Source</a>
<h1>Primitive Version</h1>
<p>Only works in Firefox and Chrome. Maybe others, but definitely not
Safari or Opera.</p>
<a class="button" onClick='window.location="view-source:" +
window.location.href'>Primitive View Source</a>
<div id="source-code">
<a href="#" id="x"><img src="http://css-tricks.com/examples/ViewSourceButton/images/x.png" alt="close"></a>
</div>
</div>
</body>
</html>
Related movie you might like to see :

ELEVATE ZOOM JAVA SCRIPT WITH ONE I...

PRINT STAR PATTERN IN JAVA SCRIPT

MOUSE OVER MOUSE OUT IN JAVA SCRIPT

EDIT IMAGE IN NOTEPAD++

NOTEPAD++ REMOVE UNWANTED LINES

Direct Link Generator CODE

Direct Links to your Files on Googl...

ON LINE JAVA LIBRARY

GOOGLE CUSTOM SEARCH BOX

RADIO BUTTON SLIDER TO KEY FRAME SL...

NOTE PAD ++ SYNTAX HIGHLIGHTER FOR ...

ONLINE ZIP OPNER

JAVA COLOR PICKER WITH

GOOGLE CONSOLE

GOOGLE CHROME EXTENSION FILE SAVE O...

OPEN DESKTOP TEXT FILE BY COMMAND P...

HOW TO GET MALWARE ADD POPUP WITHOU...

SHOPIFY JACK MOORE ZOOM

RELATED POST WIDGET LIST SHAPE

BUTTON PADDING CHANGE HEIGHT WIDTH
?
+
X
Recommended for you
Loading..
Related Post for HTML SYNTAX HIGHLIGHTER
SHARING WIDGET Add To Any For Blogger Share button for Blogger To place under every post in Blogger To place under every post in Bloggerhttps://codepen.io/sunnysingh/pen/OPxbgq<!DOCTYPE html><html lan…
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
SEO SCORE TOOLS SEO Audit Tool Reasons to be a Professional Member 1. Generate more SEO leads from your website 2. Increase SEO sales with personalized audits 3. Get email notifications o…
JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
AUTO CSS JS SLIDER WITH ARROW BULLET ------------------------------------------------------------------------------------------------------- BX SLIDER CODE: READ MORE: BX SLIDER IN BLOGGER TEMPALTE - You…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE …
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HD…
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.