Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

2+ Cara Menambahkan Syntax Highlighter Pre Code di Blogger

Ditulis oleh Arief Ghozaly Posting Komentar
Kali ini, izinkan saya berbagi tutorial bagaimana caranya membuat, memasang atau menampilkan Syntax Highlighter di artikel web blog karena banyaknya blogger yang masih penasaran.

Setidaknya, ada 2 tutorial bagaimana caranya menambahkan Syntax Highlighter. Dibedakan menjadi 2 karena punya karakteristik tampilan yang cukup unik dan keren. Keduanya sudah saya coba, disertakan contoh gambarnya.

Cara Membuat Syntax Highlighter


Poin ini merupakan cara yang pertama. Bagaimana bentuknya, bisa dicek di bawah:

2+ Cara Menambahkan Syntax Highlighter Pre Code di Blogger

Keren, kan? Ada warna-warninya lagi :)

1. Simpan script di bawah ini, di atas kode </head>

<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

2. Selanjutnya, cari kode ]]></b:skin>

3. Simpan kode di bawah ini, di atas kode ]]></b:skin>

pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

4. Ketuk tombol Simpan. OK selesai.

Cara penggunaannya cukup mudah, yakni dengan bantuan kode:

<pre><code> Kode di Sini </code</pre>

Cara Menambahkan Syntax Highlighter


Poin ini merupakan cara yang kedua. Mengenai bagaimana bentuknya, berikut tampilannya:

2+ Cara Menambahkan Syntax Highlighter Pre Code di Blogger

1. Cari kode ]]></b:skin>

2. Simpan kode CSS di bawah ini, di atas kode ]]></b:skin>

.post-body pre,
#comments pre {
background-color: #292e34; /* Kode Warna Background */
border-left: 5px solid #008c5f; /* Kode Warna variasi border kiri */
padding: 0;
margin: 0.5em auto;
position: relative;
white-space: pre;
word-wrap: break-word;
word-break: normal;
overflow: auto;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
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,
#comments pre code {
display: block;
color: #bfbf90; /* Kode Warna Huruf */
font-size: 13px; /* Ukuran Huruf */
max-height: 250px;
padding: 10px 15px;
line-height: 1.5em;
white-space: pre;
overflow: auto;
user-select: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.post-body pre code span {
color: #95b2f6;
font-style: italic;
}
.post-body pre mark,
.post-body code mark,
.post-body pre code mark {
background-color: #95b2f6;
color: #292e34;
margin: 0;
padding: 0;
}
.post-body code,
.post-body code.tutor {
color: #d85555;
letter-spacing: -0.3px;
font-size: 1em;
user-select: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.post-body pre.html:before,
.post-body pre.css:before,
.post-body pre.javascript:before,
.post-body pre.jquery:before {
background-color: #bde0b9; /* Kode Warna Background */
font: 500 14px "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
color: #333333; /* Kode Warna Huruf */
display: block;
padding: 10px 35px;
font-size: 16px;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 7px;
background-position-y: center;
}
.post-body pre.html:before {
content: "HTML";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.css:before {
content: "CSS";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.javascript:before {
content: "Javascript";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.jquery:before {
content: "jQuery";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%231d2129'/%3E%3C/svg%3E");
}

3. Klik tombol Simpan. OK selesai.

Mengenai bagaimana cara menampilkan Syntax Highlighter di dalam postingan web blog, maka kode yang diperlukan:

<pre class="html"><code>
<!-- Masukkan semua kode HTML disini -->
</code></pre>

<pre class="css"><code>
<!-- Masukkan semua kode CSS disini -->
</code></pre>

<pre class="javascript"><code>
<!-- Masukkan semua kode Javascript disini -->
</code></pre>

<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery disini -->
</code></pre>

Terkait bagaimana cara mengaktifkan atau menggunakan Syntax Highlighter ini, sobat harus menggunakan tag <pre><code> dan </code></pre> di dalam postingan web blog. Tepatnya di tab HTML, bukan Compose. Contohnya:

<pre><code> Kode di Sini </code></pre>

Atau bisa juga:

<pre><code>
Kode di Sini
</code></pre>

Masalahnya, setiap Syntax Highlighter punya karakternya masing-masing ketika ingin ditampilkan di halaman artikel. Contohnya seperti tutorial No. 2 di atas. Harus menggunakan kode di bawah ini agar Syntax Highlighter mau muncul.

<pre class="jquery"><code>

Apabila fitur Syntax Highlighter gagal tampil, coba hapus kode CSS bawaannya. Contohnya seperti punya saya:

pre{word-break:break-word;white-space:pre-wrap;background:rgba(232,191,115,0.08);border-left:5px solid rgba(245,228,194,0.17);padding:15px 20px;margin:20px 0;margin:1.25rem 0}

Bisa jadi juga penyebabnya karena adanya script jQuery yang berbenturan sehingga Syntax Highlighter gagal ditampilkan di postingan web blog, sedangkan tutorialnya sudah dilakukan. Pokoknya, semoga berhasil.

Kesimpulan


Sebenarnya, pemasangan dan penggunaan Syntax Highlighter sedikit merepotkan. Namun, apabila kawan-kawan memang sukanya dengan hal-hal yang rumit, bisalaaah.

Selain itu, ada puluhan atau mungkin ribuan tampilan Syntax Highlighter yang bisa sobat coba-coba sendiri. Silakan klik di sini: Syntax Highlighter for Blogger.

Itulah tutorial bagaimana caranya membuat, memasang atau menampilkan Syntax Highlighter di artikel web blog karena banyaknya blogger yang masih penasaran.

Sumber:

https://codepen.io/kurniawanz/pen/YzWpxMw
https://codepen.io/search/pens?q=syntax+highlighter
https://codepen.io/search/pens?q=syntax+highlighter+for+blogger
https://www.sahretech.com/2018/12/cara-membuat-syntax-highl.html
Arief Ghozaly
Arief Ghozaly Konten kreator artikel (writer/creator) sejak 2015.

Posting Komentar untuk "2+ Cara Menambahkan Syntax Highlighter Pre Code di Blogger"

Silakan berkomentar menggunakan akun Google, Anonim atau Nama (URL). No Spam, Please... Komentar spam tidak akan dipublikasikan 😊

Kontes Lomba Blog
Kontes Lomba Blog