[ana sayfa] [hakkımda] [arşiv] [iletişim]

11 Blogger Syntax Highlighter Entegresi (Kod Renklendirici)

Bloggerda kodlarınızın kod editörlerdeki gibi renkli bir şekilde görünmesini istiyorsanız Syntax Highlighter'ı blogunuza entegre etmelisiniz...Bunun için blogunuzun Yerleşim > HTML'yi düzenle kısmından <head> tagını bulun hemen ardından şu kodları ekleyin:

<script src='http://shjs.sourceforge.net/sh_main.js' type='text/javascript'/>
<script src='http://shjs.sourceforge.net/lang/sh_cpp.js' type='text/javascript'/>
<script src='http://shjs.sourceforge.net/lang/sh_php.js' type='text/javascript'/>
<script src='http://shjs.sourceforge.net/lang/sh_javascript.js' type='text/javascript'/>
<script src='http://shjs.sourceforge.net/lang/sh_sql.js' type='text/javascript'/>
<script src='http://shjs.sourceforge.net/lang/sh_css.js' type='text/javascript'/>

Ben yukarıdaki dilleri entegre ettim eğer sizin tercihiniz farklıysa burada diğer dil dosyalarına ulaşabilirsiniz: http://shjs.sourceforge.net/lang/

Şimdi sıra css'yi eklemeye geldi bunun için kodlar arasından ]]></b:skin> kodunu bulun ve hemen üstüne şu css kodlarını yapıştırın:


pre.sh_sourceCode {
background-color: #eeeeee;
color: #000000;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_keyword {
color: #bb7977;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_type {
color: #8080c0;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_string {
color: #a68500;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_regexp {
color: #a68500;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_specialchar {
color: #ff00ff;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_comment {
color: #ff8000;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_number {
color: #800080;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_preproc {
color: #0080c0;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_symbol {
color: #ff0080;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_function {
color: #004466;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_cbracket {
color: #ff0080;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_url {
color: #a68500;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_date {
color: #bb7977;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_time {
color: #bb7977;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_file {
color: #bb7977;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_ip {
color: #a68500;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_name {
color: #a68500;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_variable {
color: #0080c0;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_oldfile {
color: #ff00ff;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_newfile {
color: #a68500;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_difflines {
color: #bb7977;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_selector {
color: #0080c0;
font-weight: normal;
font-style: normal;
}

pre.sh_sourceCode .sh_property {
color: #bb7977;
font-weight: bold;
font-style: normal;
}

pre.sh_sourceCode .sh_value {
color: #a68500;
font-weight: normal;
font-style: normal;
}


Son olarak <body> tagını <body onload="sh_highlightDocument();"> ile değiştirin.

Yazınıza örneğin php kodu eklerken şu şekilde ekleyin:

<pre class="sh_php">KODLAR</pre>

Diğer dil etiketleri için aşağıdaki tablodan yararlanabilirsiniz:

Language HTML class
Bison sh_bison
C sh_c
C++ sh_cpp
C# sh_csharp
ChangeLog sh_changelog
CSS sh_css
Desktop files sh_desktop
Diff sh_diff
Flex sh_flex
GLSL sh_glsl
Haxe sh_haxe
HTML sh_html
Java sh_java
Java properties files sh_properties
JavaScript sh_javascript
JavaScript with DOM sh_javascript_dom
LaTeX sh_latex
LDAP files sh_ldap
Log files sh_log
LSM (Linux Software Map) files sh_lsm
M4 sh_m4
Makefile sh_makefile
Objective Caml sh_caml
Oracle SQL sh_oracle
Pascal sh_pascal
Perl sh_perl
PHP sh_php
Prolog sh_prolog
Python sh_python
RPM spec files sh_spec
Ruby sh_ruby
S-Lang sh_slang
Scala sh_scala
Shell sh_sh
SQL sh_sql
Standard ML sh_sml
Tcl sh_tcl
XML sh_xml
Xorg configuration files sh_xorg

Yardımını esirgemediği için BLaSTER kardeşime teşekkürler ;)

11 yorum :

Adsız dedi ki...

vay hocam bloga bayağı önem vermeye başladın çok güzel sağol kolay gelsin :))))

Emre Kayan dedi ki...

teşekkürler

Adsız dedi ki...

çalışmıyor hocam b-skin kodu yada body kodlarını falan gene göstermıyor kafayı yemek üzereyim bişi yapamadım varsa bir bilgin yazarsan ii olur..

serdaR dedi ki...

kodları bulamamanı anlamadım ? ctrl + f yaparak ararmısın?

Adsız dedi ki...

herşeyi yaptım ancak olmadı söylediklerini aynen yaptım ancak bazı kodları gördü bazılarını görmedi besemea body kodu yazamıyorum yazdığım zman blog onu yorumluyo göstermiyor txt gibi

Adsız dedi ki...

mesela ben bloguma bi yazı eklemek istedim içinde bi form örneği vardı eklıyorum ama kodları kod halinde değil form halinde gösteriyor yorumluyor senın verdiklerini bloguma uygularım bu seferde olmadı deliricem bi yardım gözünü sevim..!

serdaR dedi ki...

Bazı kodlar vardır bu kodları konuya eklemek istediğinde siten bunları yorumlamaya çalışır o zaman görünmeyen kodları(yorumladıklarını) bu siteden:

http://www.dan.co.jp/cases/javascript/encode_entities.html

encode ederek kodlarına ekle...

Örneğin;

<?php YADA <? tagını blogun yorumlar ve görünmez bu kodu yukarıda verdiğim siteden encode ederek koyarsan sorun kalmaz ;)

Kolay gelsin...

Adsız dedi ki...

Saolasın sonunda çözüldü sorunum :))

serdaR dedi ki...

sevindim :) iyi bloglamalar...

Adsız dedi ki...

way güzel yukarıdaki gibi bir kodu bu şekilde yapabiliriz yani :D geçenlerde sitede html ve css dersleri vereyim demiştim de kodlar okundğu için gösterememiştim bir bakalım şimdi D:

Adsız dedi ki...

Birde bu arka plan ve yazı boyutu farklı onu nasıl yaparız :D

Yorum Gönder

Yorumun denetlendikten sonra görüntülenecek...Teşekkürler!