Extension: Syntax Highlighter

About

Syntax Highlighter is an extension for adding the Formatting Syntax Highlighter feature. The syntax highlighter is based on PrismJS. With this addition, you can display source code more attractively.



Specifications

Extension Version 1.1
PrismJs Version 1.28.0
Supported Languages HTML, CSS, Javascript, XML, C-like, Markup, SVG, MathML, SSML, Atom, RSS, and Plain



Installation

  1. Backup Theme - (More Info).
  2. Open XML Editor. Find id='head_extensions'
  3. You will be directed to a code section similar to this: View.
  4. Copy and paste the Extension Code below into head_extensions. It should look like this: View.

    Extension Code 
            
<b:if cond='true' id='syntax_highlighter' version='1.1'>
<b:if cond='data:view.isSingleItem'>
<style id='w-css-syntax-highlighter'>
/*<![CDATA[*/
/*PrismJS 1.28.0 CSS (Adapted for NEOS Blogger Theme)
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers+normalize-whitespace*/
code[class*=language-],pre[class*=language-]{color:#000;background:0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}code[class*="language-"],pre[class*="language-"]{color:var(--color);background:0;text-shadow:none}pre[class*=language-]{margin:0}code[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,pre[class*="language-"]::-moz-selection,code[class*="language-"] ::selection,code[class*="language-"]::selection,pre[class*="language-"] ::selection,pre[class*="language-"]::selection{background:var(--skin-blue)}pre[class*="language-"]{background:0}:not(pre)>code[class*=language-]{background:var(--bg2);border-radius:3px;padding-left:.3em;padding-right:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--skin-brown)}.token.punctuation{color:var(--color2)}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:var(--skin-green)}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:var(--skin-blue)}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:var(--skin-brown);background:0}.token.atrule,.token.keyword{color:var(--skin-blue)}.token.attr-value{color:var(--skin-brown)}.token.class-name,.token.function{color:var(--skin-red)}.token.important,.token.regex,.token.variable{color:var(--skin-orange)}.w--dm .w-codebox-w1{--bg:var(--bg2)}.w-codebox-w1{position:relative}.w-codebox-w1.w--box1>.w-codebox-w2,.w-codebox-w1.w--box2>.w-codebox-w2{background:var(--bg)}.w-codebox-w1,.w-codebox-w2{padding:0!important}.w-codebox-w2{overflow:auto;max-height:400px;width:100%;box-sizing:border-box;line-height:0}.w-codebox-w1.w--box0 pre{padding-top:0;padding-right:0;padding-bottom:0;overflow:hidden}.w-codebox-w3{display:inline-block;line-height:1.5}.w-codebox-toolbar{position:absolute!important;background:none!important;padding:0!important;z-index:2!important;border:none!important;top:.8em;right:.8em;text-align:right;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;-webkit-transition:all .5s;transition:all .5s}.w-codebox-w1.w--box0 .w-codebox-toolbar{margin-top:-16px}.w-codebox-toolbar:after{content:none!important}.w-codebox-w1:hover .w-codebox-toolbar{opacity:1;visibility:visible}.w-codebox-toolbar button{display:inline-block;background:var(--key);color:#fff;padding:8px;border-radius:50%;-webkit-transition:box-shadow .3s;transition:box-shadow .3s}.w-codebox-toolbar button:hover{box-shadow:0 2px 4px rgba(0,0,0,.4)}.w-codebox-toolbar button.w--success{background:#30cd4a}.w-codebox-toolbar button.w--failed{background:#c74949}.w-codebox-w1 .line-numbers-rows{border-color:var(--thin-border-color)}.w-codebox-w1 .line-numbers-rows>span:before{color:var(--color2)}.w-codebox-w1.w--w1 code{white-space:pre-wrap!important;word-break:break-all}.w-codebox-w1.w--w1 pre{overflow:hidden}.w-codebox-w1.w--w1.w--box0 pre{padding-left:0}.w-codebox-w1.w--l0 pre{color:var(--color);font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em}
/*]]>*/
</style>
<script id='w-js-syntax-highlighter' async='async' src='https://cdn.jsdelivr.net/gh/neostheme/syntax-highlighter@1.1/main.js'/>
</b:if>
</b:if>

  5. Done. Save the changes!



Usage

More details about how to use this syntax highlighter can be found on: Formatting Syntax Highlighter.
Have Question?