Blogger SyntaxHighlighter HTML Yapılandırması

Google’dan blog yayınlama hizmeti olan Blogger , kutunun dışında bir sözdizimi vurgulayıcısı sağlamıyor. Bu, yayınlarınızda sözdizimini vurgulamak için üçüncü taraf çözümlere başvurmanız gerektiği anlamına gelir.

SyntaxHighlighter Yüklemesi

Yapılacak ilk şey, aşağıda gösterildiği gibi Blogger blogunuzun gösterge tablosunu açmaktır. Sol tarafta Şablon yazan menüyü bulun ve tıklayın.


Bu blogunuzun şablon sayfasını açacaktır. Aşağıda gösterildiği gibi HTML editörünü açmak için HTML Düzenle yazan düğmeyi tıklayın .

Editör penceresinde herhangi bir yeri tıklayın ve CTRL + F tuşlarına basın . Şimdi sağ üst köşede aşağıda gösterildiği gibi bir arama kutusu görünmelidir. Arama kutusuna “ </head>” (tırnak işaretleri olmadan) girin ve ENTER düğmesine basın .

Editör penceresi şimdi, gerekli stil sayfalarını ve JavaScript dosyalarını ekleyeceğimiz HTML başlık etiketinin sonuna atlayacaktır. SyntaxHighlighter yapılandırması dört bölümden oluşur:

• Çekirdek dosyaları
• SyntaxHighlighter teması
• Blog için gereken belirli fırça (lar)
• Yapılandırma betiği

Çekirdek dosyalar

Çekirdek dosyalar aşağıdaki JavaScript dosyasından ve stil sayfasından oluşur:

HTML <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>

SyntaxHighlighter teması

Orada SyntaxHighlighter için kullanılabilir bir dizi tema , aşağıda stil sayfası varsayılan tema.

CSS <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

Blog için gereken belirli fırça (lar)

Vurgulanması gereken yapılandırılmış dile bağlı olarak, ilgili fırçanın içe aktarılması gerekir. SyntaxHighlighter sitesi mevcut tüm fırçaların tam bir listesini içerir . Bu örnekte 'Java' ve 'XML' için fırça ekleyeceğiz .

JS <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></scrip>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>

Yapılandırma Betiği

Gerekli tüm bağımlılıklar eklendikten sonra, Blogger için belirli bir modu etkinleştirmemiz ve SyntaxHighlighter'a web sayfasında bulunan tüm kod bloklarını vurgulamasını istemek gerekir. Bu, aşağıda gösterildiği gibi bir JavaScript pasajı ekleyerek yapılır.

Jquery <script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Blogger şablonuna eklenecek komut dosyasının tamamı aşağıda gösterilmiştir. Ekranda gösterilen şekilde '</head>' etiketinin hemen önüne kopyalayıp yapıştırın .

HTML <!-- 'SyntaxHighlighter' additions START -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
<!-- 'SyntaxHighlighter' additions END -->

Blogger şablonunuzda yapılan değişiklikleri kaydetmek için Şablonu kaydet düğmesini tıklayın.Bu kurulum sonlandırır, bir sonraki bölümde SyntaxHighlighter'ın nasıl kullanılacağını göreceksiniz.

SyntaxHighlighter Kullanımı

SyntaxHighlighter'ı kullanmak için, vurgulanacak bölümün <pre> adlı bir XML etiketiyle sarılması gerekir . Bu etiket, yukarıdaki kurulumun 3. bölümünde eklenmiş olan aynı fırça olan 'fırça' adlı gerekli bir parametreye sahiptir .

Bu örnekte , 'Java' fırçasıyla HelloWorldbir <pre> etiketine bir Java sınıfını ve 'XML' fırçasıyla bir <pre> etiketine bir Hello World XML dosyasını ekleyeceğiz. Aşağıdaki kodu kopyalayın ve gösterildiği gibi bir Blogger gönderisinin içine yapıştırın.

CSS  <pre class="brush: java">
public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
</pre>

<pre class="brush: xml">
&lt;?xml version="1.0" encoding="UTF-8" ?>
&lt;text>Hello World!&lt;/text>
</pre>

Bütün işlem işlemler bu kadar herkese kolay gelsin.