"Enter"a basıp içeriğe geçin

Highlight.js Eklentisi ile Kod Renklendirme

Bloğunuzda html, css, c#, python gibi diller yada scriptlerle ile ilgili kod paylaşımı yapıyor olabilirsiniz. Sitenizde kod paylaşımı yaptığınız yazınız, hem görüntü olarak hem de okunabilirlik açısından zayıftır. Ayrıca site için reklam mevcutsa, yazınız daha da kötü bir hal alır. Yazınızı hem görünüm açısından hem de kod okunabilirliği açısından güzel bir hale getirebilirsiniz. Bunun için birçok eklenti mevcuttur. Lakin bu makalede highlighter.js ile kod renklendirme eklentisini kullanacağız.

Highlight.js Eklentisini Projeye Ekleme

İlk adım olarak https://highlightjs.org/ adresine gidin. Kaynak dosyaları internet üzerinden projenize çekecekseniz, cdn olarak ekleyebilirsiniz. Eğer eklentiyi projeye dahil etmek istiyorsanız download kısmından indirip projeye dahil edebilirsiniz.

İsterseniz direk aşağıdaki kodları da projeye ekleyebilirsiniz. Dosyaları </head> etiketinin hemen üstüne yada </body> etiketinin hemen üzerine ekleyebilirsiniz.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Yukarıdaki gerekli kütüphaneleri projeye dahil ettikten sonra gerisi gayet basit. Yazı içerisinde hangi kod parçalarını renklendirmek istiyorsanız, kodları aşağıdaki kod bloğu içerisine almalısınız.

Html kodlarını aşağıdaki etiket içerisine yerleştirin.

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

C# kodlarını aşağıdaki etiket içerisine yerleştirin.

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

Yukarıda iki farklı kod parçaçığı için, gereken kod belirtilmiştir. Diğer programlama dilleri ile yazılmış kod parçalarını renklendirmek için gereken sınıf ismini sitesinden öğrenebilirsiniz.

Son olarak; varsayılan olarak belirtilmiş kod renklendirmesini beğenmemiş olabilirsiniz. Problem değil çünkü, bu eklentinin hazırladığı birçok stil dosyası mevcut. Yani eklediğiniz default.min.css stil dosyası yerine farklı bir stil dosyası ekleyerek kod renklerini siteye daha uygun ve hoşunuza gidebilecek bir görünüme getirebilirsiniz.

Aşağı stil dosya isimleri belirtilmiştir. default.min.css yerine aşağıdaki stil dosyası isimlerinden biriyle değiştirebilirsiniz.

  • zenburn.min.css
  • xt256.min.css
  • xcode.min.css
  • vs2015.min.css
  • vs.min.css
  • tomorrow-night-eighties.min.css
  • tomorrow-night-bright.min.css
  • tomorrow-night-blue.min.css
  • tomorrow-night.min.css
  • tomorrow.min.css
  • sunburst.min.css
  • stackoverflow-light.min.css
  • stackoverflow-dark.min.css
  • srcery.min.css
  • solarized-light.min.css
  • solarized-dark.min.css
  • shades-of-purple.min.css
  • school-book.min.css
  • routeros.min.css
  • rainbow.min.css
  • railscasts.min.css
  • qtcreator_light.min.css
  • qtcreator_dark.min.css
  • purebasic.min.css
  • pojoaque.min.css
  • paraiso-light.min.css
  • paraiso-dark.min.css
  • ocean.min.css
  • obsidian.min.css
  • nord.min.css
  • nnfx-dark.min.css
  • nnfx.min.css
  • night-owl.min.css
  • monokai-sublime.min.css
  • monokai.min.css
  • mono-blue.min.css
  • magula.min.css
  • lioshi.min.css
  • lightfair.min.css
  • kimbie.light.min.css
  • kimbie.dark.min.css
  • isbl-editor-light.min.css
  • isbl-editor-dark.min.css
  • ir-black.min.css
  • idea.min.css
  • hybrid.min.css
  • hopscotch.min.css
  • gruvbox-light.min.css
  • gruvbox-dark.min.css
  • grayscale.min.css
  • gradient-light.min.css
  • gradient-dark.min.css
  • googlecode.min.css
  • gml.min.css
  • github-gist.min.css
  • github.min.css
  • foundation.min.css
  • far.min.css
  • dracula.min.css
  • docco.min.css
  • default.min.css
  • dark.min.css
  • darcula.min.css
  • color-brewer.min.css
  • codepen-embed.min.css
  • brown-paper.min.css
  • atom-one-light.min.css
  • atom-one-dark-reasonable.min.css
  • atom-one-dark.min.css
  • atelier-sulphurpool-light.min.css
  • atelier-sulphurpool-dark.min.css
  • atelier-seaside-light.min.css
  • atelier-seaside-dark.min.css
  • atelier-savanna-light.min.css
  • atelier-savanna-dark.min.css
  • atelier-plateau-light.min.css
  • atelier-plateau-dark.min.css
  • atelier-lakeside-light.min.css
  • atelier-lakeside-dark.min.css
  • atelier-heath-light.min.css
  • atelier-heath-dark.min.css
  • atelier-forest-light.min.css
  • atelier-forest-dark.min.css
  • atelier-estuary-light.min.css
  • atelier-estuary-dark.min.css
  • atelier-dune-light.min.css
  • atelier-dune-dark.min.css
  • atelier-cave-light.min.css
  • atelier-cave-dark.min.css
  • ascetic.min.css
  • arta.min.css
  • arduino-light.min.css
  • an-old-hope.min.css
  • androidstudio.min.css
  • agate.min.css
  • a11y-light.min.css
  • a11y-dark.min.css

Ayrıca html kodlarını yazıya eklediğinizde bir bozukluk olabilir. Bunu çözmek için html kodunuzu decode yapabilirsiniz. Decode etmek için https://mothereff.in/html-entities adresini ziyaret edebilirsiniz.

Yazıyı Paylaşmak İster misin?
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Tumblr
Tumblr
Share on Reddit
Reddit
    Bir cevap yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir