What is Syntax Highlighter?
Syntax Highlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what Syntax Highlighter is capable of, have a look at the demo page. Know more about it on http://alexgorbatchev.com/SyntaxHighlighter/
How to add it to Blogger?
-Go to Template>Edit HTML
-Press CTRL+F and search ]]></b:skin>
-Paste the following code above it
/ * CSS Prism Syntax Highlighter * / pre { padding : 50px 10px 10px 10px ; margin : .5em 0 ; white-space : pre ; word-wrap : break-word ; overflow : auto ; background-color : #2c323c ; position : relative ; border-radius : 4px ; max-height : 500px ; }-And again Paste the 3 jQuery before </body> or </head> (any one)
pre::before { font-size : 16px ; content : attr(title) ; position : absolute ; top : 0 ; background-color : #eee ; padding : 10px ; left : 0 ; right : 0 ; color : #fff ; text-transform : uppercase ; display : block ; margin : 0 0 15px 0 ; font-weight : bold ; }
pre :: after { content : 'Double-click to selection' ; padding : 2px 0.3s ease-in-out ; }
pre: hover :: after { opacity : 0 ; top : -8px ; visibility : visible ; }
code { font-family : Consolas, Monaco, ' Andale Mono ',' Courier New ', Courier, Monospace ; line-height : 16px ; color : # 88a9ad ; background-color : transparent ; padding : 1px 2px ; font-size : 12px ; }
pre 0 ; font-weight : bold ; }
.token.punctuation code { color : #ccc ; }
pre code .token.punctuation { color : #fafafa ; }
.token.comment code, code .token.prolog, .token.doctype code, code .token.cdata { color : # 777 ; }
code .namespace { opacity : .8 ; }
.token.property code, code .token.tag, .token.boolean code, code .token.number { color : # e5dc56 ; }
.token.selector code, code-name .token.attr, code .token.string { color : # 88a9ad ; }
.token.selector pre code, pre code .token.attr-name { color : #fafafa ; }
pre code .token.string { color : # 40ee46 ; }
.token.entity code, code .token.url, pre-css .language .token.string, pre .style .token.string { color : #ccc ; }
.token.operator code { color : # 1887dd ; }
.token.atrule code, code .token.attr-value { color : # 009 999 ; }
.token.atrule pre code, pre code .token.attr-value { color : # 1baeb0 ; }
.token.keyword code { color : # e13200 ; font-style : italic ; }
.token.comment code { font-style : italic ; }
.token.regex code { color : #ccc ; }
.token.important code { font-weight : bold ; }
code .token.entity { cursor : help ; }
Pre mark { background-color : # ea4f4e! important ; color : # fff! important ; padding : 2px ; border-radius : 2px ; }
code mark { background-color : # ea4f4e! important ; color : # fff! important ; padding : 2px ; border-radius : 2px ; }
pre code mark { background-color : # ea4f4e! important ; color : # fff! important ; padding : 2px ; border-radius : 2px ; }
.comments pre { padding : 10px 10px 15px 10px ; background : # 2c323c ; }
.comments 10px ; left : 0 ; right : 0 ; color : # fff ; text-transform : uppercase ; display : inline-block ; margin : 0 0 10px 0 ; font-weight : bold ; border-radius : 4px ; border : none ; }
.comments pre :: after { font-size : 11px ; }
.comments pre code { color : # eee ; }
.comments pre.line-numbers { padding-left : 10px ; }
pre.line-numbers { position : relative ; padding-left : 3.0em ; counter-reset : linenumber ; }
pre.line-numbers> code { position : relative ; }
.line-numbers .line-numbers-rows { height : 100% ; position : absolute ; pointer-events : none ; top : 0 ; font-size : 100% ; left : -3.5em ; width : 3em ; -webkit-user-select : none ; -moz-user-select : none ; -ms-user-select : none ; padding : 0 ; }
.line-numbers-rows> span { pointer-events : none ; display : block ; counter-increment : linenumber ; }
.line-numbers-rows> span:before { content : counter(linenumber) ; color : #999 ; display : block ; padding-right : 0.8em ; text-align : right ; transition : 350ms ; }
pre [Data-codetype = 'CSSku']: before { background-color : # 00a1d6 ; }
pre [Data-codetype = 'HTMLku']: before { background-color : # 3cc888 ; }
pre [Data-codetype = 'JavaScriptku']: before { background-color : # 75d6d0 ; }
pre [Data-codetype = 'JQueryku']: before { background-color : # e5b460 ; }
1
<script> $ ('pre') . attr ('class', 'line-numbers') ; Prism.hooks.add ("after-highlight",function(e) {vart=e.element.parentNode;if( ! t || ! /pre/i . test ( t . nodeName ) || t . className . indexOf ( "line-numbers" ) == = - 1 ) { return } var n = 1 + e . code . split ( "\n" ) . length ; var r ; lines = new Array ( n ) ; lines = lines . join ( "<span></span>" ) ; r = document . createElement ( "span" ) ; r . className = "line-numbers-rows" ; r . innerHTML = lines ; if ( t . hasAttribute ( "data-start" ) ) { t . style . counterReset = "linenumber " + ( parseInt ( t . getAttribute ( "Data-start" ) , 10 ) - 1 ) } e . element . appendChild ( r ) } ) </script>2
<script type = 'text/javascript'> var pres = document . getElementsByTagName ( & quot ; pre & quot ; ) ; for ( var i = 0 ; i & lt ; pres . length ; i ++ ) { pres [ i ] . addEventListener ( & quot ; dblclick & quot ; , function ( ) { var selection = getSelection ( ) ; var range = document . createRange ( ) ; range . selectNodeContents ( this ) ; selection . removeAllRanges ( ) ; selection . addRange ( range ) ; } , false ) ; } </script>3
<script src = 'https : //arlina-design.googlecode.com/svn/prism.js' type = 'text / javascript'/>-Hit the Save template button
-And now create a new post
-Go to HTML tab and paste the following Code
<pre title="HTML" Data-codetype="HTMLku"> <code class="markup language"> ... HTML code (which already di`escape`) here ... </ code > </ pre >
< pre title = "CSS" Data-codetype = "CSSku" > < code class = "language-css" > ... CSS code here JavaScript code here ... </ code > </ pre > < pre title = "jQuery" Data-codetype = "JQueryku" > < code class = "language-javascript" > ... jQuery code here ... </ code > </pre>
You are all done :)
Original post - http://arlinadesign.blogspot.in/2014/11/memasang-prism-syntax-highlighter-di-blogger.html
EmoticonEmoticon