How to add a syntax within blockquote on our site should be need some base-code, this is using Syntax made by HighlightJS.org which is combined with Blockquote function. This I will called it with Blockquote Mods v1, I found this article made by Adhy's site. And for one click auto copy blockquote code I found on Kang Ismet's site.
That way we do not need to save the .CSS Stylesheet, so can make the site faster loading, because due to load asynchronously. It would be a great option.
So I had compiled all of them for easier usage.
Put all of this above </body> :
1. SYNTAX HIGHLIGHTER
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:true});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>2. COMBINE BLOCKQUOTE INTEGRATED WITH SYNTAX HIGHLIGHTER AUTOMATICS
<script type='text/javascript'>
//<![CDATA[
var $span = $("blockquote");
$span.replaceWith(function () {
return $('<code/>', {
html: this.innerHTML
});
});
$( "code" ).wrap( "<pre/>" );
//]]>
</script>3. MAKE CSS IN ASYNCHRONOUS MODE FOR SYNTAX HIGHLIGHT'S CSS
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/dark.min.css");
//]]>
</script>//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.cssNOTE:
• You can change 'dark.min.css' to 'default.min.css'.• Remember the 'highlight.js' still be needed, it's different with '*.css'. See point number 1 again..
• Feel free to change the version of CSS file. This tutorial using Highlight.js version 8.4 and Font Awesome version 4.3.0.
OPTIONAL: RAW SCRIPTS FOR ALL CSS COMBINED IN ONE SCRIPT WITH CHANGING RULE: ''ASYNCHRONOUS''.
MULTI SHEET ASYNC MODE - This is RAW version of Async mode for three CSS's scripts.<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//STYLESHEET-01.CSS");loadCSS("//STYLESHEET-02.CSS");loadCSS("//STYLESHEET-03.CSS");
//]]>
</script>Let's continue for now, one step more (Point 4).
4. ONE CLICK OR DOUBLE CLICK TO SELECT ALL TEXT
Put before </body>, right after the other code :<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("click", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>• At second line, change 'click' to 'dblclick' for single click or double click to select all text.
YOU ARE FINISH! Congrats !!
 |
| Screenshot of HighlightJS intregated on Blockquote |
USAGE AFTER COMBINED
<blockquote> TEXT, CODES, SCRIPTS OR ANYTHING </blockquote>If you wanna customize some style, you can change the CSS, this is for an example only.
CSS CUSTOMIZE - Documentations, No need to applied this for now!
blockquote,.blocktext{display:block;background:#eee;padding:15px;margin:20px 0;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.3em;color:#666;text-align:left;}
.blockquote{display:block;background:#fff;padding:25px 15px 10px;margin:20px 0;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.3em;color:#666;text-align:left;border-left:15px solid #555;border-right:2px solid #555;box-shadow:2px 2px 15px #ccc}
.blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:100px;font-weight:bold;color:#999;position:absolute;left:10px;top:15px;text-shadow:2px 2px 0 #ccc}
.blockquote::after{content:""}
.blockquote a{text-decoration:none;color:#ffa133!important;font-weight:400!important}
.blockquote a:hover{color:#666!important}
.blockquote em{font-style:italic}
.blockquote p{margin:0!important}
.blockquote cite {color: #999999;font-size: 14px;display: block;margin-top: 5px;}
.blockquote cite:before {content: "\9999 \1000";}
blockquote{position:relative;}
blockquote .c_b{display:block;position:absolute;top:0;right:0;z-index:99;padding:2px 5px;}
pre {position:relative}
pre .c_b {display:block;position:absolute;top:0;z-index:99;right:0;padding:2px 5px;}
code .kode,{
font-family:"Courier New",monospace;
font-size:12px;
background:#eee;
color:#333;
}
pre, .codeview{
max-height:500px;overflow:scroll;overflow-x:auto;
font-size:12px;
background:#444 no-repeat right;
max-width:100%;
text-align:left;
overflow:auto;
line-height:150%;
/*border-radius*/
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
color:#FFFFFF;
margin:1em auto;
padding:3.5em 3em;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
font-family:sans-serif;
}Make the 'pre' with scroll features, so the long text will be displayed wonderfull.
max-height: 500px; overflow: scroll; overflow-x: auto;* Still need edit style from seputar.kisefx.com