Hakkımda . Gizlilik . İletişim . RSS . Twitter


Blogger ve Web Siteleri İçin Kod Eklentisi

22 Kasım 2019

Blogger ve Web Siteleri İçin Kod Eklentisi

Blogger'da kod eklemek büyük sıkıntı. Bu mevzu hakkında yazılanları şöyle bir tarayınca hep aynı şeylerle karşılaşıyorsunuz. Başka yöntemler de benim gördüğüm kadarıyla işe yaramıyor. Blogger'a adam akıllı, düzgün şekilde kod eklemek için kullanacağımız kodları buradaki konuda buldum.

Hemen vakit kaybetmeden nasıl olacağını anlatmaya geçeyim.

Önce şuradan gerekli dosyaları indirin. Bunun içinde bir stil ve bir javascript dosyası var:

* jquery.highlight.css

* jquery.highlight.js

Bunları uygun bir yere yükleyin. Sonra şunları Blogger şablonunuzda

<head>....</head>

etiketleri arasına şöyle ekleyin:

<link type="text/css" rel="stylesheet" media="all" href="[yüklü olduğu dizin]/jquery.highlight.css" />
<script type="text/javascript" src="[yüklü olduğu dizin]/jquery.highlight.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});
</script>

Bu kadar. Şimdi istediğiniz kodları düzgün ve güzel bir şekilde Blogger'da yazdığınız yazı içerisinde kullanıp görüntüleyebilirsiniz. Bu eklentiyi

<pre class="code">standart</pre>
<pre class="code" lang="js">js kod</pre>
<pre class="code" lang="css">css kod</pre>
<pre class="code" lang="html">html kod</pre>
<pre class="code" lang="php">php kod</pre>

şeklinde kullanıyorsunuz. Eklentinin desteklediği diller: HTML, CSS, JS, BASH, SQL ve PHP. Nasıl göründüğünü merak ediyorsanız buyurun:

HTML:

<script src="highlight.js" type="text/javascript"></script>

JS:

$(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});

JS:

var defaults = {
  // show source code tab
  source: true,
  // show zebra
  zebra: true,
  //indents: "tabs" or "space"  
  indent: 'tabs',
  //ordered ("ol") or unordered ("ul') list
  list: 'ol'
}

Bu uygulamayı başka yazılım kullandığınız, örneğin WordPress yüklü, sitelerinizde de kullanabilirsiniz. Bunun için yukarıda <head>....</head> etiketi için yapılması gerekenleri aynen yapmanız yeterli.