Extension: Syntax Highlighter - Kode Highlighter Berbasis PrismJS

Tentang

Syntax Highlighter adalah ekstensi untuk menambahkan fitur Formatting Syntax Highlighter. Syntax highligher yang ditambahkan adalah berbasis PrismJS. Dengan penambahan ini, anda dapat menampilkan source code dengan lebih menarik.



Spesifikasi

Extension Version 1.1
PrismJs Version 1.28.0
Dukungan Bahasa HTML, CSS, Javascript, XML, C-like, Markup, SVG, MathML, SSML, Atom, RSS, dan Plain



Instalasi

  1. Backup Theme - (Selengkapnya).
  2. Masuk ke XML Editor. Cari id='head_extensions'
  3. Anda akan dibawa pada baris kode kurang lebih seperti berikut: Lihat.
  4. Copy dan paste Extension Kode di bawah ke dalam head_extensions. Kurang lebih seperti berikut: Lihat.

    Extension Kode
            
    <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/[email protected]/main.js'/>
    </b:if>
    </b:if>
            
          

  5. Selesai. Simpan perubahan!



Penggunaan

Selengkapnya cara penggunaan syntax highlighter ini dapat dilihat pada halaman Formatting Syntax Highlighter.
Komentar