Ö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ı kısayolunu veriyorum. Bu stil dosyası hoşuma gitti. Diğerlerini linkten inceleyebilirsiniz.

Style tasarımını <head></head> etiketleri arasında;
<link href="http://google-code-prettify.googlecode.com/svn/trunk/styles/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

2 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

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