6 Ekim 2015 Salı

Örnek Kod Siteye Nasıl Eklenir - Blogger

Syntax Highlighter
           Geliştirilen uygulamanın örnek kodları web sayfasında düzenli bir şekilde nasıl paylaşılır. Syntax Highlighter




Başla

Geliştirdiğiniz uygulamaların kod parçalarını sitenizde göstermek isteyebilirsiniz. Bunun için bir vurgulayıcı kullanmalısınız.
Blogger için bu işlem nasıl yapılır bakalım.
SyntaxHighlighter 3.0.83 projesini kullanacağız.   Proje Hakkında bkz.

Adım 1 :

Temel CSS ve JS Dosyalarını Belirleyin


Blog panelinden Şablon-->"HTML'yi Düzenle"yi tıklayın. Açılan şablon kodlarında 
<head></head>
etiketlerinin arasına aşağıdaki kodları yapıştırın. Aşağıdaki kodlara dikkat ederseniz shBrushJava.min.js, shBrushXml.min.js gibi dosyalar göreceksiniz. Bu kısma hangi dilleri kullanacaksanız onları ekleyin.
Desteklenen tüm dillerin CDN' lerine Buradan ulaşabilirsiniz. Örneğin C# dilinde paylaşım yapacaksanız;

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js' type='text/javascript'/>

kodunu ekleyin.

Eklenecek Kod 
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

Adım 2 :

Yeni Yayın--> HTML kısmına gelin. Kod yazmak istediğiniz yere;



<pre class="brush:js">
...Kodlarınız Buraya
</pre>

yazın. class="brush: js" javascript kodu için. Siz hangi dili istiyorsanız onu yazın. Örneğin; java için "brush:java"

Adım 3 :

Kodlarınızı yapıştırdıktan sonra bir sorunla karşılaşıyorsanız temiz kod programı kullanın.


Kodunuzu Blogger' a eklemeden önce aşağıdaki siteye yapıştırın. Kodunuzun yeni halini Blogger' a ekleyin.
Temiz Kod İçin Tıkla
İşlem bu kadar.

Alternatif olarak online Syntax Highlighter programlarını da kullanabilirsiniz.


Bitir

Gönderen zaman:
Etiketler: , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)