Syntax Highlighter Untuk Menulis Source Code Pada Blogger Menggunakan Highlight.js

Memiliki website yang elegan tentu merupakan kepuasan tersendiri bagi pemilik Web. Apalagi konten suatu website dapat dengan mudah dibaca dan dipahami oleh pengunjung merupakan keinginan dan harapan semua pemilik Web. Terkadang website berisi source code yang tentu saja penulisan dan teksnya harus berbeda dengan penjelasan dari web. Hal ini tentu saja untuk memudahkan pembaca memahami yang mana merupakan source code dan yang mana yang merupakan teks biasa. 

(toc) #title=(Table of Content)

Sekilas Tentang Syntax Highlighter

Syntax highlighter adalah fitur pada penyunting teks atau platform web yang menampilkan kode program berwarna dengan gaya berbeda pada setiap elemen sintaksnya (seperti fungsi, string, komentar, dll.) yang tujuannya sendiri adalah untuk memudahkan pembacaan, pemahaman, dan analisis kode tersebut. Fitur ini secara otomatis menerapkan gaya visual pada kode, sehingga pembaca dapat dengan cepat mengenali bagian-bagian kode dan fungsi-fungsinya, serta membuat konten tutorial kode terlihat lebih profesional dan nyaman dibaca. 

Tentang Highlight.js 

Mengutip informasi resmi dari websitenya, Highlight.js merupakan syntax highlighter javascript opensource favorit yang mendukung Node.js dan web. Highlight.js sendiri dapat digunakan secara gratis, mendukung 192 bahasa dan 512 tema, dapat mendeteksi bahasa otomatis, serta tidak bergantung dengan librari lainnya. Tentu ini menjadi menjadi daya tarik tersendiri bagi penggunanya dengan tampilan yang luar biasa. Penggunaannya pun dapat diupload ke server, atau menggunaan cdn yang dapat dilihat pada halaman website resminya. Untuk penggunaan yang lebih spesifik, anda dapat mempelajarinya melalui website resminya, dokumentasi atau Github.

Syntax Highlighter Pada Blogger Menggunakan Highlight.js 

Langkah-Langkah Membuat Syntax Highlighter Pada Blogger

Pada tutorial kali ini, Kami hanya membahas penggunaan Highlight.js pada blog. Adapun langkah-langkah untuk membuat syntax highlighter pada blogger adalah sebagai berikut:

1. Memasang Kode CSS Pada Header Blog

Untuk mengkostumisasi tampilan sintaks pada website kita, kita tentu perlu memasukkan code css pada bagian header blog. Pastikan anda memasukkan kode ini diatas tag </head> .

  <b:if cond='data:blog.pageType == &quot;item&quot;'>     
<style type='text/css'>     
	
/*---------------------
Syntax Highlighter
-----------------------*/
.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:6px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre code{margin-bottom: -20px;overflow-x: auto;border-radius: 6px;color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;line-height:1.5em}
.hljs,.hljs-subst,.hljs-tag{color:#eaebec}
.hljs-emphasis,.hljs-strong{color:#a8a8a2}
.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}
.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}
.hljs-strong{font-weight:700}
.hljs-emphasis{font-style:italic}
.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f15a5a}
.hljs-attribute,.hljs-symbol{color:#66d9ef}
.hljs-class .hljs-title,.hljs-params{color:#f8f8f2}
.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}
.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}
mark{padding:1px 6px;border-radius:2px;font-family:&#39;Fira Mono&#39;, monospace;font-size: 15px}
code mark{font-size: 13px;margin: 2px;display: inline-block;}
pre code mark{margin:0;padding:0;border-radius:2px}
mark .hljs, mark .hljs-subst, mark .hljs-tag, mark .hljs-addition, mark.hljs-built_in, mark .hljs-builtin-name, mark .hljs-selector-attr, mark .hljs-selector-id, mark .hljs-selector-pseudo, mark .hljs-string, mark .hljs-attr, mark .hljs-template-variable, mark .hljs-type, .hljs-variable, mark .hljs-attribute,mark .hljs-symbol,mark .hljs-bullet,mark .hljs-link,mark .hljs-literal,mark .hljs-number,mark .hljs-quote,mark .hljs-regexp{color:#000}
.code-badge-copy-icon{background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 512 512&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M391.89,450H163a50.17,50.17,0,0,1-50.11-50.11V98.11A50.17,50.17,0,0,1,163,48h150.1a15,15,0,0,1,10.61,4.39L437.61,166.27A15,15,0,0,1,442,176.88v223A50.17,50.17,0,0,1,391.89,450ZM163,78a20.13,20.13,0,0,0-20.11,20.11V399.89A20.13,20.13,0,0,0,163,420H391.89A20.13,20.13,0,0,0,412,399.89V183.09L306.91,78Z&#39; fill=&#39;%23c6c9ce&#39;/%3E%3Cpath d=&#39;M427,191.88H348.23a50.17,50.17,0,0,1-50.11-50.11V63a15,15,0,0,1,30,0v78.77a20.13,20.13,0,0,0,20.11,20.11H427a15,15,0,0,1,0,30Z&#39; fill=&#39;%23c6c9ce&#39;/%3E%3C/svg%3E&quot;);background-size:55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -8px -5px -14px}
.code-badge &gt; .code-badge-check-icon{background:green}
.code-badge-check-icon{cursor:pointer;padding:0 7px;margin:-5px 0 -5px -5px;background:url(&#39;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=&#39;);background-size:100% 100%}
#copyy i.code-badge-copy-icon:before{content:&#39;Copy Code&#39;;font-style:normal;position:absolute;display:block;top:-20px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;visibility:hidden;opacity:0;transition:all .2s ease}
#copyy:hover i.code-badge-copy-icon::before{visibility:visible;opacity:1;top:-33px}
#copyy i.code-badge-copy-icon:after{content:&#39;&#39;;position:absolute;top:0;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;opacity:0;visibility:hidden;transition:all .2s ease}
#copyy:hover i.code-badge-copy-icon::after{visibility:visible;opacity:1;top:-9.8px}
#copyy  i.code-badge-check-icon:before{content:&#39;Code Copied!&#39;;font-style:normal;position:absolute;display:block;top:-33px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;transition:all .2s ease}
#copyy i.code-badge-check-icon:after{content:&#39;&#39;;position:absolute;top:-9.8px;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;transition:all .2s ease}


/*---------------------
Syntax Highlighter
-----------------------*/
</style>
</b:if>

2. Memasang Highlight.js Pada Body Blog

Setelah dilakukan pemasangan kode css pada bagian head, anda juga perlu memasukkan kode cnd Highlight.js pada bagian body blog. Saran saya, masukkan code berikut diatas tag </body> blog anda.

<!--Syntax Highlighter--> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>   
  
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>

</b:if>
<!--End Syntax Highlighter-->   

3. Memasang Kode Javascript Pada Body

Selanjutnya, Kita juga perlu menambahkan sedikit javascript pada bagian body blog untuk mempercantik tampilannya dan menambah sedikit fungsi yang berguna bagi pembaca. Tahap ini dapat diabaikan jika anda tidak menginginkannya. 

<script>/*<![CDATA[*/
!function(e,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?o(e,!0):function(e){if(!e.document)throw new Error("A window with a document is required");return o(e)}:o(e)}("undefined"!=typeof window?window:this,function(y,e){if("boolean"!=typeof o)var o=!1;function t(e){var o,m={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"fa fa-copy",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",onBeforeCodeCopied:null};function t(){m.loadDelay?setTimeout(n,loadDelay):n()}function n(){if(!document.querySelector(m.templateSelector)){var e=document.createElement("div");e.innerHTML=function(){for(var e=["<style>","@media print {","   .code-badge { display: none; }","}"," .dark-mode .code-badge {","        background: rgba(78,95,109,.10);","    }"," .code-badge-pre {","        position: relative;","    }","    .code-badge {","        display: flex;","        flex-direction: row;","        white-space: normal;","        background: rgba(88,101,111,.63);","        color: #333;","        font-size: 0.875em;","        opacity: 0.5;","        transition: opacity linear 0.5s;","        border-radius: 0 4px 0 4px;","        padding: 5px 8px 5px 8px;","        position: absolute;","        right: 0;","        top: 0;","    }","    .code-badge.active {","        opacity: 0.8;","    }","","    .code-badge:hover {","        opacity: .95;","    }","","    .code-badge a,","    .code-badge a:hover {","        text-decoration: none;","    }","","    .code-badge-language {","        margin-right: 10px;","        font-weight: 600;","        color: goldenrod;","    }","    .fa.text-success:{ color: limegreen !important }","</style>",'<div id="CodeBadgeTemplate" style="display:none">','    <div class="code-badge">','        <div class="code-badge-language" >{{language}}</div>','        <div  id="copyy" title="Salin Code">','            <i class="{{copyIconClass}}"></i></i></a>',"        </div>","     </div>","</div>"],o="",t=0;t<e.length;t++)o+=e[t]+"\n";return o}();var o=e.querySelector("style"),t=e.querySelector(m.templateSelector);document.body.appendChild(o),document.body.appendChild(t)}for(var n=document.querySelector(m.templateSelector).innerHTML,c=document.querySelectorAll("pre>code.hljs"),a=0;a<c.length;a++){var r=c[a];if(!r.querySelector(".code-badge")){for(var d="",l=0;l<r.classList.length;l++){var i=r.classList[l];if("language-"===i.substr(0,9)){d=r.classList[l].replace("language-","");break}if("lang-"===i.substr(0,5)){d=r.classList[l].replace("lang-","");break}if(!d)for(var s=0;s<r.classList.length;s++)if("hljs"!=r.classList[s]){d=r.classList[s];break}}"ps"==(d=d?d.toLowerCase():"text")?d="powershell":"cs"==d?d="csharp":"js"==d?d="javascript":"ts"==d?d="typescript":"fox"==d&&(d="foxpro");var p=n.replace("{{language}}",d).replace("{{copyIconClass}}",m.copyIconClass).trim(),u=document.createElement("div");u.innerHTML=p,u=u.querySelector(".code-badge");var g=r.parentElement;g.classList.add("code-badge-pre"),m.copyIconContent&&(u.querySelector(".code-badge-copy-icon").innerText=m.copyIconContent),g.insertBefore(u,r)}}document.querySelector(m.contentSelector).addEventListener("click",function(e){return e.srcElement.classList.contains("code-badge-copy-icon")&&(e.preventDefault(),e.cancelBubble=!0,function(e){var o=e.srcElement.parentElement.parentElement.parentElement,t=o.querySelector("pre>code"),n=t.textContent||t.innerText;m.onBeforeCodeCopied&&(n=m.onBeforeCodeCopied(n,t));var c=document.createElement("textarea");c.value=n.trim(),document.body.appendChild(c),c.style.display="block",y.document.documentMode?c.setSelectionRange(0,c.value.length):c.select();document.execCommand("copy"),document.body.removeChild(c),function(e){var o=m.copyIconClass.split(" "),t=m.checkIconClass.split(" "),n=e.querySelector(".code-badge-copy-icon");n.innerText=m.checkIconContent;for(var c=0;c<o.length;c++)n.classList.remove(o[c]);for(c=0;c<t.length;c++)n.classList.add(t[c]);setTimeout(function(){n.innerText=m.copyIconContent;for(var e=0;e<t.length;e++)n.classList.remove(t[e]);for(e=0;e<o.length;e++)n.classList.add(o[e])},2e3)}(o)}(e)),!1})}o=e,Object.assign(m,o),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()}y.highlightJsBadge=t,y.module&&y.module.exports&&(y.module.exports.highlightJsBadge=t),o&&t()});

document.addEventListener("DOMContentLoaded", (event) => {
  var pres = document.querySelectorAll("pre>code");
  for (var i = 0; i < pres.length; i++) {
    hljs.highlightBlock(pres[i]);
  }

  var options = {
    contentSelector: ".post-body",
    loadDelay:0,
    copyIconClass: "code-badge-copy-icon",
    checkIconClass: "code-badge-check-icon",
    onBeforeTextCopied: function(text, codeElement) {
      return text;   
    }
  };
  window.highlightJsBadge(options);
});

function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

/*]]>*/</script>

Hasil Akhir

Untuk menampilkan Syntax highlighter pada postingan, anda hanya perlu memasukkan format kode berikut pada postingan anda. 

<pre><code class="language-html">...</code></pre>

atau

<pre><code class="html">...</code></pre>

Anda dapat mengganti  class pada format kode diatas dengan bahasa pemrograman lain seperti php untuk bahasa pemrograman PHP, js untuk Javascript, python untuk pemograman Python, css untuk CSS, dan lain sebagainya. Untuk penggunaan bahasa pemrograman yang lebih spesifik, anda dapat melihatnya pada tabel di bawah ini.

Language	Aliases	Package
1C	1c
4D	4d	highlightjs-4d
ABAP	sap-abap, abap	highlight-sap-abap
ABNF	abnf
Access logs	accesslog
Ada	ada
Apex	apex	highlightjs-apex
Arduino (C++ w/Arduino libs)	arduino, ino
ARM assembler	armasm, arm
AVR assembler	avrasm
ActionScript	actionscript, as
Alan IF	alan, i	highlightjs-alan
Alan	ln	highlightjs-alan
AngelScript	angelscript, asc
Apache	apache, apacheconf
AppleScript	applescript, osascript
Arcade	arcade
AsciiDoc	asciidoc, adoc
AspectJ	aspectj
AutoHotkey	autohotkey
AutoIt	autoit
Awk	awk, mawk, nawk, gawk
Ballerina	ballerina, bal	highlightjs-ballerina
Bash	bash, sh, zsh
Basic	basic
BBCode	bbcode	highlightjs-bbcode
Blade (Laravel)	blade	highlightjs-blade
BNF	bnf
BQN	bqn	highlightjs-bqn
Brainfuck	brainfuck, bf
C#	csharp, cs
C	c, h
C++	cpp, hpp, cc, hh, c++, h++, cxx, hxx
C/AL	cal
C3	c3	highlightjs-c3
Cache Object Script	cos, cls
Candid	candid, did	highlightjs-motoko
CMake	cmake, cmake.in
COBOL	cobol, standard-cobol	highlightjs-cobol
Coq	coq
CSP	csp
CSS	css
Cap’n Proto	capnproto, capnp
Chaos	chaos, kaos	highlightjs-chaos
Chapel	chapel, chpl	highlightjs-chapel
Cisco CLI	cisco	highlightjs-cisco-cli
Clojure	clojure, clj
CoffeeScript	coffeescript, coffee, cson, iced
CpcdosC+	cpc	highlightjs-cpcdos
Crmsh	crmsh, crm, pcmk
Crystal	crystal, cr
cURL	curl	highlightjs-curl
Cypher (Neo4j)	cypher	highlightjs-cypher
D	d
Dafny	dafny	highlightjs-dafny
Dart	dart
Delphi	dpr, dfm, pas, pascal
Diff	diff, patch
Django	django, jinja
DNS Zone file	dns, zone, bind
Dockerfile	dockerfile, docker
DOS	dos, bat, cmd
dsconfig	dsconfig
DTS (Device Tree)	dts
Dust	dust, dst
Dylan	dylan	highlightjs-dylan
EBNF	ebnf
Elixir	elixir
Elm	elm
Erlang	erlang, erl
Excel	excel, xls, xlsx
Extempore	extempore, xtlang, xtm	highlightjs-xtlang
F#	fsharp, fs, fsx, fsi, fsscript
FIX	fix
Flix	flix	highlightjs-flix
Fortran	fortran, f90, f95
FunC	func	highlightjs-func
G-Code	gcode, nc
Gams	gams, gms
GAUSS	gauss, gss
GDScript	godot, gdscript	highlightjs-gdscript
Gherkin	gherkin
Glimmer and EmberJS	hbs, glimmer, html.hbs, html.handlebars, htmlbars	highlightjs-glimmer
GN for Ninja	gn, gni	highlightjs-GN
Go	go, golang
Grammatical Framework	gf	highlightjs-gf
Golo	golo, gololang
Gradle	gradle
GraphQL	graphql
Groovy	groovy
GSQL	gsql	highlightjs-gsql
HTML, XML	xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
HTTP	http, https
Haml	haml
Handlebars	handlebars, hbs, html.hbs, html.handlebars
Haskell	haskell, hs
Haxe	haxe, hx
High-level shader language	hlsl	highlightjs-hlsl
Hy	hy, hylang
Ini, TOML	ini, toml
Inform7	inform7, i7
IRPF90	irpf90
Iptables	iptables	highlightjs-iptables
JSON	json
Java	java, jsp
JavaScript	javascript, js, jsx
Jolie	jolie, iol, ol	highlightjs-jolie
Julia	julia, jl
Julia REPL	julia-repl
Kotlin	kotlin, kt
Lang		highlightjs-lang
LaTeX	tex
Leaf	leaf
Lean	lean	highlightjs-lean
Lasso	lasso, ls, lassoscript
Less	less
LDIF	ldif
Lisp	lisp
LiveCode Server	livecodeserver
LiveScript	livescript, ls
LookML	lookml	highlightjs-lookml
Lua	lua
Macaulay2	macaulay2	highlightjs-macaulay2
Makefile	makefile, mk, mak, make
Markdown	markdown, md, mkdown, mkd
Mathematica	mathematica, mma, wl
Matlab	matlab
Maxima	maxima
Maya Embedded Language	mel
Mercury	mercury
MIPS Assembler	mips, mipsasm
Mint	mint	highlightjs-mint
mIRC Scripting Language	mirc, mrc	highlightjs-mirc
Mizar	mizar
MKB	mkb	highlightjs-mkb
MLIR	mlir	highlightjs-mlir
Mojolicious	mojolicious
Monkey	monkey
Moonscript	moonscript, moon
Motoko	motoko, mo	highlightjs-motoko
N1QL	n1ql
NSIS	nsis
Never	never	highlightjs-never
Nginx	nginx, nginxconf
Nim	nim, nimrod
Nix	nix
Oak	oak	highlightjs-oak
Object Constraint Language	ocl	highlightjs-ocl
OCaml	ocaml, ml
Objective C	objectivec, mm, objc, obj-c, obj-c++, objective-c++
OpenGL Shading Language	glsl
OpenSCAD	openscad, scad
Oracle Rules Language	ruleslanguage
Oxygene	oxygene
PF	pf, pf.conf
PHP	php
Papyrus	papyrus, psc	highlightjs-papyrus
Parser3	parser3
Perl	perl, pl, pm
Pine Script	pine, pinescript	highlightjs-pine
Plaintext	plaintext, txt, text
Pony	pony
PostgreSQL & PL/pgSQL	pgsql, postgres, postgresql
PowerShell	powershell, ps, ps1
Processing	processing
Prolog	prolog
Properties	properties
Protocol Buffers	proto, protobuf
Puppet	puppet, pp
Python	python, py, gyp
Python profiler results	profile
Python REPL	python-repl, pycon
Q#	qsharp	highlightjs-qsharp
Q	k, kdb
QML	qml
R	r
Razor CSHTML	cshtml, razor, razor-cshtml	highlightjs-cshtml-razor
ReasonML	reasonml, re
Rebol & Red	redbol, rebol, red, red-system	highlightjs-redbol
RenderMan RIB	rib
RenderMan RSL	rsl
RiScript	risc, riscript	highlightjs-riscript
RISC-V Assembly	riscv, riscvasm	highlightjs-riscvasm
Roboconf	graph, instances
Robot Framework	robot, rf	highlightjs-robot
RPM spec files	rpm-specfile, rpm, spec, rpm-spec, specfile	highlightjs-rpm-specfile
Ruby	ruby, rb, gemspec, podspec, thor, irb
Rust	rust, rs
RVT Script	rvt, rvt-script	highlightjs-rvt-script
SAS	SAS, sas
SCSS	scss
SQL	sql
STEP Part 21	p21, step, stp
Scala	scala
Scheme	scheme
Scilab	scilab, sci
SFZ	sfz	highlightjs-sfz
Shape Expressions	shexc	highlightjs-shexc
Shell	shell, console
Smali	smali
Smalltalk	smalltalk, st
SML	sml, ml
Solidity	solidity, sol	highlightjs-solidity
Splunk SPL	spl	highlightjs-spl
Stan	stan, stanfuncs
Stata	stata
Structured Text	iecst, scl, stl, structured-text	highlightjs-structured-text
Stylus	stylus, styl
SubUnit	subunit
Supercollider	supercollider, sc	highlightjs-supercollider
Svelte	svelte	highlightjs-svelte
Swift	swift
Tcl	tcl, tk
Terraform (HCL)	terraform, tf, hcl	highlightjs-terraform
Test Anything Protocol	tap
Thrift	thrift
Toit	toit	toit-highlight
TP	tp
Transact-SQL	tsql	highlightjs-tsql
Twig	twig, craftcms
TypeScript	typescript, ts, tsx, mts, cts
Unicorn Rails log	unicorn-rails-log	highlightjs-unicorn-rails-log
VB.Net	vbnet, vb
VBA	vba	highlightjs-vba
VBScript	vbscript, vbs
VHDL	vhdl
Vala	vala
Verilog	verilog, v
Vim Script	vim
X#	xsharp, xs, prg	highlightjs-xsharp
X++	axapta, x++
x86 Assembly	x86asm
x86 Assembly (AT&T)	x86asmatt	highlightjs-x86asmatt
XL	xl, tao
XQuery	xquery, xpath, xq, xqm
YAML	yml, yaml
ZenScript	zenscript, zs	highlightjs-zenscript
Zephir	zephir, zep

Sumber: Supported Languages Highlight.js

Penutup

Walhasil, kita telah berhasil menampilkan Syntax highlighter pada blog anda. Jika tidak, mungkin ada langkah-langkah yang terlewat. Anda dapat membuat komentar di bagian halaman bawah blog ini, dan secepat mungkin akan saya bantu untuk solusinya.