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
- Backup Theme - (Selengkapnya).
-
Masuk ke XML Editor. Cari
id='head_extensions' - Anda akan dibawa pada baris kode kurang lebih seperti berikut: Lihat.
-
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/syntax-highlighter@1.1/main.js'/> </b:if> </b:if>
- Selesai. Simpan perubahan!
Penggunaan
Selengkapnya cara penggunaan syntax highlighter ini dapat dilihat pada halaman Formatting Syntax Highlighter.