Kodu vurgulamak için highlight.js kullanımı

Programlama odaklı bir blog veya web siteniz varsa, blog veya web sitenizde paylaştığınız HTML, CSS veya Javascript kodlarınızı renkli olarak vurgulayabilirsiniz.

Highlight.js

Her şeyden önce kendi blogumda da kullandığım vurgulayıcı highlight.js'dir. Highlight.js eksiksiz bir kod vurgusu olan, hafif ve Vanilla JS ile yazılmış olup geniş bir dil ve stil listesini desteklemektedir. Ayrıca, kullanılan dili algılar ve size ilgili renkleri sağlar.

Highlight.js resmi web sitesinde çok iyi bir şekilde kurulum ve resmi temaların nasıl kullanılacağı anlatılmaktadır.

Kurulum

Blogger hesabınıza giriş yaparak blogunuzun kumanda panelinden Şablon HTML Düzenle diyoruz.

Daha sonra </body> kodunu bulup, aşağıdaki kodu </body> kodunun üst tarafına ekleyiniz.


<script src="//cdn.jsdelivr.net/highlight.js/9.11.0/highlight.min.js"></script>
<script>//<![CDATA[
for(var aCodes=document.getElementsByTagName("pre"),i=0;i<aCodes.length;i++)hljs.highlightBlock(aCodes[i]);
//]]></script>

Tema Kullanımı

Son olarak aşağıdaki Temalardan istediğinizi kullanarak Kod Kutusunu özelleştirebilirsiniz. Aşağıdaki sitllerden birini temanızın </head> kodunun üzerine ekleyerek ve şablonu kaydedin.

Tema #1 - (Açık)


<style>
/*highlight*/
.hljs, pre {background-color:#f7f7f7;padding:1.2rem;overflow:auto;line-height:1.45;border-radius:2px;display:block;color:#333;overflow-x:auto;font-size:1rem;margin:0}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}
</style>

Tema #2 - (Koyu)


<style>
/*highlight*/
.hljs, pre {padding:1.2rem;overflow:auto;line-height:1.45;border-radius:2px;display:block;overflow-x:auto;font-size:1rem;margin:0;background:#2B303E;color:rgba(255,255,255,.8)}.hljs-comment,.hljs-meta,.hljs-quote{color:rgba(255,255,255,.4)}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#d4737b}.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-number,.hljs-params,.hljs-type{color:#7b8dd2}.hljs-attribute{color:#f1cd9a}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#9abf6f}.hljs-section,.hljs-title{color:#90b7cav}.hljs-keyword,.hljs-selector-tag{color:#c592ce}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
</style>

Temel Kullanım

Vurgulayacağınız kodun düz metin olması gerekir, özellikle html içeriyorsa, tarayıcı bunu bu şekilde yorumlayabilir. Bu nedenle kullanmadan önce, oloBloggger tarafından sağlanan çevrimiçi Kod Dönüştürme aracını kullanarak kodunuzu metne dönüştürmenizi ve sonra eklemenizi öneririm.

Şimdi blogger sitenizde CSS, HTML ve JavaScript gibi kodlarını <pre><code>..kodunuzu buraya yazın..</code></pre> kodu içerisine ekleyin. Sonunda şöyle bir şey görünecektir:


<pre>&lt;!DOCTYPE html&gt;
&lt;title&gt;Title&lt;/title&gt;

&lt;style&gt;body {width: 500px;}&lt;/style&gt;

&lt;script type="application/javascript"&gt;
  function $init() {return true;}
&lt;/script&gt;

&lt;body&gt;
  &lt;p checked class="title" id='title'&gt;Title&lt;/p&gt;
  &lt;!-- El resto de la pagina --&gt;
&lt;/body&gt;</pre>

Ve html'ye yapıştırıldığında şöyle görünecektir:


<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- El resto de la pagina -->
</body>

Uğradığınız ve okuduğunuz için teşekkürler.