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/[email protected]/main.js'/> </b:if> </b:if>
- Selesai. Simpan perubahan!
Penggunaan
Selengkapnya cara penggunaan syntax highlighter ini dapat dilihat pada halaman Formatting Syntax Highlighter.