Programlama ve web tasarım üzerine konu açan bloglar için syntax Highlighter metin düzenleme'ye ve vurgulama'ya yardımcı olacak bir özellik. Kod kategorisi için farklı renkler oluşturan bu özelliği, kod baylaşımı yapan bloglarınız için kullanabilirsiniz. Kısaca aşağıdaki adımları takip edip, blogunuza uygulamanız yeterli.

<style type='text/css'>
/* Syntax Highlighter Monokai Sublime */
.post-body pre code, .post-body code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,monospace;font-size:100%;font-weight:normal;}
.post-body pre{padding:7px;border-radius:4px;background-color:#23241f;word-spacing:normal;word-break:normal;line-height:1.4em!important;}
  pre,pre code{white-space: pre-wrap;}
.hljs {
  display: block;
  overflow-x: auto;
  padding:0 0.5em 0.5em;
margin:0;
  background: #23241f;
max-height:360px;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}
.hljs::-webkit-scrollbar{width:8px;height:25px;}
.hljs::-webkit-scrollbar-thumb
{border-radius:2px; background:rgba(255,255,255,.2)}
</style>

Daha sonra aşağıdaki script kodları </body> veya &lt;!--</body>--&gt;&lt;/body&gt; öğesini aratarak üst kısmına yerleştiriniz.

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>

En son temanızı kaydettikten bu özelliği aşağıda gösterildiği etiketler içerisinde sayfanızda paylaşabilirsiniz.

<pre><code>Kode CSS/JavaScript/PHP öğeleri</code></pre>