Cara Menciptakan Syntax Highlighter (Kotak Script) Keren Di Blogger
Desain syntax highlighter yang menarik akan menciptakan pengunjung dengan gampang mengetahui dan melihat arahan yang diletakkan.
Ada aneka macam jenis syntax highlighter yang ada dikala ini, begitu juga dengan tampilannya.
Namun kali ini aku akan membagikan syntaxt highlighter menyerupai yang aku gunakan dalam blog tikusmales.com dikala ini.
Membuat Syntax Highlighter Seperti Blog
Cara Memasang
1. Masuk ke "Blogger.com" > pilih sajian "Tema" > klik "Edit HTML".
2. Kemudian copy arahan di bawah ini dan letakkan di atas atau sebelum arahan ]]></b:skin> atau </style>
/* Syntax */ pre {overflow: auto;max-height: 450px;margin: 10px 0 !important;padding: 20px;}code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Roboto,sans-serif!important;direction:ltr;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}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}: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:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}3. Setelah itu copy arahan di bawah ini dan letakkan di atas atau sebelum arahan </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>4. Klik "Simpan"
Cara Menggunakan
5. Masuk ke sajian "Postingan" > klik "Entri baru" > Letakkan arahan di bawah ini pada tab HTML (bukan compose).
<pre><code class="language-css"> isi arahan disini </code></pre>Untuk akhirnya menyerupai syntax highlighter yang dipakai dalam postingan ini.
Keren kan kodenya! Silahkan diterapkan ke blog kau ya.
Kunjungi kembali tikusmales.com untuk warta menarik perihal blog.
Sumber: taniarascia.com/adding-syntax-highlighting-to-code-snippets/ Sumber https://www.tikusmales.com/
