SH JS ile Kodları Renklendirelim

Syntax Highlighting in JavaScript

Kod yazarların çok işine yarayacak bir araç. JavaScript ve CSS yardımı ile oluşturulmuş kullanışlı bir kod renklendirme aracı. Yazdığınız kodları sayfalarınızda renklendirerek yayınlayabilirsiniz. Fazla uzatmadan eklentinin özelliklerine ve kullanımına geçmek istiyorum.

Neden Renklendirmeliyiz?

Özellikle kod dökümantasyonlarında kullanılan bu araç yazdığınız kodları renklendirerek kod editörlerindeki gibi sunum rahatlığı sağlar.  Syntax Highlighting şeklinde ingilizce bir terimdir SH ve kodların yazım kuralına göre seçilmesi anlamına gelir.

Hangi Dilleri Renklendirebiliriz?

Çok uzun bir liste mevcut, hemen hemen aklınıza gelebilecek tüm dilleri destekliyor. Aşağıda listenin tamamı mevcut;

Nereden İndiririz?

Öncelikle SHJS’den ana dosyayı indirmelisiniz. Ardından sitede kullanacağınız programlama diline göre burada yer alan listeden javascript dosyasını indirin. Son olarak burada yer alan listeden de istediğiniz css dosyasını indirin.

Nasıl Kullanılır?

İndirdiğiniz js ve css dosyalarını sayfanızın <head> .. </head> tagları içerisine aşağıdaki gibi ekleyin;

<head>
...
<script src="shjs/sh_main.min.js" type="text/javascript"></script>
<script src="shjs/sh_xml.min.js" type="text/javascript"></script>
<script src="shjs/sh_php.min.js" type="text/javascript"></script>
<script src="shjs/sh_url.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="shjs/sh_acid.css">
...
</head>

ve sonra

<body onload="sh_highlightDocument();">

ile de renklendirmeyi aktif edelim.. Bundan sonra yazdığınız kodları renklendirmeye başlayabilirsiniz. Nasıl mı?

Örnek C++ Renklendirmesi:

<pre class="sh_cpp">
#include <iostream>

using namespace std;

int main(int argc, char ** argv) {
  cout << "Hello world" << endl;
  return 0;
}
</pre>

bu örnekte de görüldüğü gibi C++ kodlarımızı <pre> etiketi içerisine eklediğimiz class ile basitçe renklendirebiliyoruz;

<pre class="sh_cpp"> .... </pre>

tagları arasına yazıyoruz. Kullanabileceğiniz Class isimlerinin tam listesi aşağıda mevcut;

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

Yararlı bir döküman olması dileğiyle, bitti! Saygılar, sevgiler..

Leave a Reply









This site is using OpenAvatar based on