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
Yukarıdaki Javascript dosyasını web sitemize yükleyeceğiz. <head></head> tagları arasına yukarıdaki kodu yapıştırın.
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.
Style tasarımını etiketleri arasında;
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.
Örneğin html için stil tasarımı
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ı etiketleri arasında;
<link href="dosya_yolu/sunburst.css" media="all" rel="stylesheet"/>
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
https://ozkiremitci.blogspot.fr/2015/11/prettify-javascript-kullanarak-kod-penceresi-olusturmak.html