Özel Kod Kutusu Oluşturma Program Uygulama Yazıları İçin



Kod blogları normal yazı içerisinde pek anlamlı değildir. Uygulama tanıtıyorsanız ve bu uygulama da kod blogları varsa bu kodları anlamlı bütün halinde görüntüleyebilmek okur için avantajlıdır.

Html, Css, Php, C#, C++ vb. gibi diller için geliştirilen Google code-prettify javascript uygulamasını sitemize entegre ederek kodlarımıza anlaşılır görünümü kazandıracağız. Kodlarınızda ki yazı karakteri, açıklamalar, seçiciler, değişkenler, oparatörler ve koşulları daha belirgin göstermek istiyorsanız bu konuyu okumaya devam etmelisiniz.

Google Prettify Kod Penceresi

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Yukarıdaki Javascript dosyasını web sitemize yükleyeceğiz. <head></head> tagları arasına yukarıdaki kodu yapıştırın.

Stil Tasarımı

Kodlarınızın görünümünü değiştirmek için bazı stil tasarımları bulunuyor. Buradan bakabilirsiniz.

Aşağıda sunburst.css stil dosyasının css kodlarını paylaştım.(Güncelleme: 25 Haziran 2017) Bu stil dosyası hoşuma gitti. Diğerlerini yukarıdaki linkten inceleyebilirsiniz. Stil dosyası kodlarını notepad++ tarzı metin editöründe açıp, sunburst.css olarak kaydedin ve dosya yolunu yazarak kullanın.


/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
 background-color: #000;
 border-radius: 8px;
}

pre.prettyprint {
 width: 95%;
 margin: 1em auto;
 padding: 1em;
 white-space: pre-wrap;
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}


Style tasarımını <head></head> etiketleri arasında;
<link href="dosya_yolu/sunburst.css" media="all" rel="stylesheet"/>

olarak eklemeniz gerekmektedir.


Nasıl Kullanılır ?

Kullanımı basittir. Hatta yazılan programlama diline göre stil tasarımı dahi yapabilirsiniz. Örnekleri inceleyelim.

<pre class="prettyprint">
// Mail değişkenler
<?php
class Mail {
 protected $to;
 protected $from;
 protected $sender;
 protected $reply_to;
 protected $subject;
}
?>
</pre>

Örneğin html için stil tasarımı

<pre class="prettyprint lang-html">
<html>
 <head>
  <title>test page</title>
 </head>
 <body>
  <p class="test" style="margin: 10px;">içerik</p>
 </body>
</html>
</pre>

Kaynaklar;
https://github.com/google/code-prettify
https://code.google.com/p/google-code-prettify/wiki/GettingStarted
http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

6 yorum

  1. Keşke biraz daha açıklayıcı anlatsaydınız , stil tasarım kodunu nereye kopyalayacağız?

    YanıtlaSil
    Yanıtlar
    1. Geri bildirim için teşekkürler.

      Style kodunun ekleneceği alanı atlamışım.

      Yazıyı güncelleyerek style kodunun ekleneceği yeri belirttim.

      Sizde;

      <link href="style.css1; media="all" rel="stylesheet"/>

      Yukarıdaki kodu <head></head> etiketleri arasında uygun yere ekleyerek style dosyasını sayfanıza ekleyebilirsiniz.

      Sil
  2. CSS kodları çalışmıyor, sayfa yerinde değil.

    http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css

    YanıtlaSil
    Yanıtlar
    1. 25 Ocak 2016 da Google code.google.com hizmetini sonlandırdığı için kaynaklara erişemiyoruz. Github.com üzerinde proje yayınlandı. Dilersen buradan tamamına erişebilir, son sürüm üzerine çalışabilirsin.

      https://github.com/google/code-prettify

      Blogdaki yazıyı güncelledim. Güncel kaynaklara erişebilirsiniz.

      Sil
    2. Tamam teşekkür ederim ama yeni bir sorunla karşı karşıya kaldım; örnek yazdığım HTML kodları kod kutusu içinde çalışıyor ve diğer kodların C# mesela yarısı gözüküyor yarısı ekrana gelmiyor.

      Sil
    3. < pre class="prettyprint lang-html">

      veya

      < pre class="prettyprint">< code class="language-c">...< /code>< /pre>

      olarak kullanmayı dene.

      Son olarak css style dosyasının çalışmama ihtimali var veya kodların html kodlarını bozuyor da olabilir. Bunun için style dosyasını sil ve,

      < script src="https://rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer="">< /script>

      Yalnıca yukarıdakini ekle, daha sonra tüm kod görümleri için;

      < pre class="prettyprint">Kodlar Buraya< /pre>

      Yazman yeterli olur.

      Sil

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0