Markdown ile Markdown Hakkında

Markdown Nedir?

Çoğu zaman, yayınlanacak bir yazı yazılırken üzerinde çok değişiklik yapılması gerekir. HTML, bir publishing(yayın) formatı olduğu için, bir HTML dosyasında hızlı bir şekilde değişiklik ve ekleme yapmak zordur. Bir yazıyı notepad gibi bir editörde açıp orada istediğimiz gibi biçimlendirdikten sonra o yazının son halini HTML’e çevirebilseydik çok hızlı bir şekilde yayın yapmış olurduk. İşte, markdown, plain text(düz yazı) yazı yazarken bu yazıyı formatlı bir şekilde yazmayı sağlar. Böylelikle, bir yazıyı daha sonradan HTML’e dönüştürülebilir biçimde hızlı bir şekilde düzenleyebiliriz.

Bundan sonra uzun blog yazılarını yazmayı kolaylaştırmak için markdown‘ı kullanacağım. Yani, yazıyı baştan sona düz yazı halinde gedit ya da vim ‘de markdown‘ın syntax‘ı ile yazacağım. Bu yazı üzerinde düzenlemeleri bitirdikten sonra bu yazıyı, Markdown.pl ile HTML’e çevireceğim.

Markdown Syntax‘ı neye benzer?

Markdown Syntax‘ı, düz yazı şeklindeki e-posta’larda kullanılan yazı formatından gelir. Yani, belirli noktalama işaretlerinden oluşur.

Markdown Syntax’ta bahsedildiği gibi,

HTML Syntax’ının ufak bir altkümesidir.

HTML Tag’larını eklemeyi kolaylaştırmak için düşünülmüştür.

Mesela, e-posta’larda;

bir kelimeyi vurgulamak için genelde *emphasis* yazılır, yani bir kelimenin etrafına "*" işaretleri koyulur, 
">" işareti, <blockquote></blockquote>'a eşdeğerdir, 
"*" işareti, ve 1. 2. ... gibi listeleme yapısı, sırasıyla, <ul></ul> ve <ol></ol> anlamındadır. 

Syntax Özellikleri

Markdown‘ın kendi basit syntax‘ı ile bir metni düz yazı halinde yazarken, HTML farmatına geçeceğimiz yerlerde bunu ayrıca belirtmeye gerek yoktur. Gerektiği yerde HTML Syntax‘ı ile yazılır ve markdown ile devam edilir. Syntax hakkında hep akılda tutulması gereken birkaç nokta vardır. Bunlar;

  • Block-Level HTML Elemanlarında, herhangi bir eleman(<p>,<div>,pre,table gibi) yazılmadan önce bir satır boşluk bırakılmalıdır. Bunun sebebi, bence, hizalanabilen(layout) HTML elemanalarını diğer elemanlardan ayırmaktır.
  • Span-Level(inline) elemanlar olduğu gibi yazılabilir. Öncesinde bir satır boşluk bırakmaya gerek yoktur.
  • Line Break, yani <br \> için, satır sonunda 2 SPACE karakteri bırakılmalıdır.
  • Kod Blokları: Blog yazılarında bir işi gösteren HTML Kodu(sample) yazmak gerekebilir. Burada HTML elemanlarını olduğu gibi yazamayız. Çünkü, bu durumda browser, bu elemanları render eder. Bu yüzden bu yazıları, küçük bir html kodu için inline code block ya da büyük HTML kodları için <pre><code></code></pre> olarak render edilecek olan <code> bloğu olarak formatlamamız gerekir. İlki için, backtick‘ler kullanılır, ikincisi için; öncesinde bir satır boşluk bırakılır sonra o satırda 4 SPACE ya da 1 TAB indentation yapılır.
  • Escape Karakteri: Aslında yukarıdaki maddenin de sebebi olan;markdown‘ın syntax‘ını belirtmek için kendine ayırdığı noktalama işaretlerini, formatlama aracı olarak değil de bir noktalama işareti gibi kullanmak istediğimizde markdown‘a bunu belirtmemizin gerekmesi, Escape Karakterlerini oluşturmuştur. Escape karakteri, “\” dir.

Escape Karakteri aşağıdaki karakterler için kullanılabilir:

\ backslash 
` backtick 
* asterisk 
_ underscore 
{} curly braces 
[] square brackets 
() parentheses 
# hash mark 
+ plus sign 
- minus sign (hyphen) 
. dot 
! exclamation mark 

Yukarıdaki karakterlerin aslında markdown‘ın syntax‘ını oluşturan karakterler olduğunu da dolaylı olarak anlamış oluruz.

Markdown Syntax’ı – Block-Level: p, br, h1, blockquote, list, code

Paragraflar

Paragraf için <p></p> şeklinde belirtmeye gerek yoktur. Öncesinde bir satır boşluk olan yazı bloğu paragraf olarak algılanır.

Line Breaks

Satır sonunda 2 SPACE bırakılmalıdır.

Headers – <h1>,<h2>,<h3>...<h6>

Bir satırın altına miktarı önemli olmayan sayıda; “=” yazılırsa o satır <h1> olarak algılanır, “-” yazılırsa o satır <h2> olarak algılanır.

Bunlar haricinde # h1 - başlık1 # , ###### h6 - başlık ###### formatı da kullanılabilir.

Blockquote – Alıntılar

> alıntı buradan başlar... yapısı kullanılabilir. İç içe alıntılar ilk alıntı bloğunun altında >> şeklinde yazılarak yapılabilir. Alıntılar, diğer markdown elemanlarını içerebilir.

> dan sonra bir paragraf varsa, paragraf line break‘ler içeriyorsa, her satırın başına > koymaya gerek yoktur.

Lists – Listeler

Numaralandırılmamış listeler için * yapısı, numaralandırılmışlar için de 1. yapısı kullanılabilir.

Code Blocks – Kod Blokları

Bir satır 4 SPACE ya da 1 TAB içerden başladığında kod bloğu olmuş olur. Inline Code Block için “(backtick) kullanılır.

Markdown Syntax’ı – Span Level: em, b, a, img

Emphasis – İtalik – em

* ile <em>, ** ile de <b> etiketleri koyulmuş olur.

Link

[buraya tıklayınız](http://www.example.com "alt") şeklinde yazılabilir.

Otomatik linkler için, <www.example.com> yapısı kullanılabilir.

Ek – 11.09.2011 

Markdown, iki çeşit link‘i destekler: Inline ve Reference tiplerinde linkler.

Çok fazla link olduğunda, linkleri düzenlemek için en uygun yöntem olan Referans tipi linklerin kullanımı şöyledir:

Bu [şuraya][şurasının id‘si] bir link -> Bu şuraya bir link.

Düzenleme kolaylığı için de id ile belirtilen linkler, sayfanın en altında listelenir.

[id]: http://www.surasi.com

Ek – 11.09.2011

Image

![alternative text - alt](\resmin\yolu\resim.uzanti) yapısı kullanılır.

Markdown ile HTML’e Dönüştürme işlemi

Markdown, Perl çalış. dosyası indirildikten sonra,

lifeinbeta@lifeinbeta:~/Desktop$ perl Markdown.pl -html4tags markdown.txt >> 1.html 

şeklinde çağrılabilir.

NOT: Bu işi incremental hale getiren bir bash script‘i yazacağım.

Bu yazının markdown ile HTML’e dönüştürülmeden önceki halinden bazı bölümler:

*Markdown* Nedir? 
================= 
[Markdown Syntax'ta](http://daringfireball.net/projects/markdown/syntax) bahsedildiği gibi, 
> HTML Syntax'ının ufak bir altkümesidir. 
HTML Tag'larını eklemeyi kolaylaştırmak için düşünülmüştür. 
Bu bağlamda uzun blog yazılarını yazmayı kolaylaştırmak için kullanacağım. 
Yani, yazıyı baştan sona düz yazı olarak `gedit` ya da `vim`'de *markdown*'ın *syntax*'ı ile yazacağım. HTML bir *publishing*(yayın) formatıdır. 
... 
... 
* *Block-Level* HTML Elemanlarında, herhangi bir eleman(`<p>`,`<div>`,`pre`,`table` gibi) yazılmadan önce, bir satır boşluk bırakılmalıdır. *Markdown* boşluk olarak *TAB* ya da *SPACE*'i algılar. Bunun sebebi, bence, hizalanabilen(*layout*) elemanalarını diğer elemanlardan ayırmaktır. * *Line Break*, yani `<br \>` için satır sonunda iki adet boşluk karakterteri bırakılmalıdır. 
.... 

Birkaç Not

  1. Markdown context-sensitive‘dir diyebiliriz. HTML bir *publishing*(yayın) formatıdır. kısmındaki () işlaretleri, morkdown‘da tanımlı karakterler oldukları halde, kullanıldıkları yer geçerli oldukları context olmadığı için escape yapmak zorunda kalmadık.
  2. Code Block içerisinde parse işlemi yapılmaz. Bu nedenle istenen karakter escapeedilmeden yazılabilir.emphasis yazmak için, *emphasis* yazmaya gerek yok.
  3. Backtick kullanımı;`` yapısı içerdeki iki tane *backtick*'i *escape* eder.inline code block“ gibi.
  4. zzzzzzzzzzzzz

zzzzzzzzzzzz

Mesela, e-posta'larda kullanıldığı gibi; 

kısmından sonra bir satır boşluk bırakılmadan

*emphasis*, yani bir kelimenin etrafına * işaretleri koyulur, 

şeklinde devam edilirse code block başladığının farkına varmaz.

Ayrıca, Liste içerisinde <code> kullanımı sıkıntı yaratabilir. Listelerde, <code> ‘lar için zzzz yapısı kullanılmalıdır.

Bir Benzetme

Bu yazıyı yazarken aklıma bootstrapping compiler) kavramı geldi. Bu kavram, bir dilin compiler programının o dille yazılmasıyla ilgilidir (C Compiler’ının C’de yazılması gibi). Böyle bir şey yapılmasının temel nedeni, bir dilin olgunluk seviyesini(maturity), o dilin compiler programını yazarak ölçmektir. Ben markdown‘ı kullanmaya alışmak için markdown ile bir yazı yazmak istedim. Yazdığım yazı markdown hakkında olduğu için, bir bakıma Bootstrapping Markdown oldu 😛

NOTLAR

Markdown‘ile oluşturduğum HTML çıktısını WordPress‘e koyduğumda şunlar oldu:

  1. Markdown’da Heading‘ler için  “=” (h1) ve “-” (h2) kullandığım için başlıklar kullandığım temaya göre aşırı büyüktü. h1’leri h2 ve h2’leri de h3 yaptığımda en uygun hali oldu. Bu yüzden bundan sonra, Markdown‘da ## baslik2 ## ve ### baslik2 ### yapısını kullanmam gerekecek.
  2. Markdown‘ın <pre><code> diye biçimlendirdiği kod bloklarında alt alta görünen satırlar, WordPress’te tek satıra indirgeniyor. Zor bir hata! Şimdilik elle düzelttim, ama bu hatayı çözmem gerekecek. Aslında, sadece <pre> içine alınmış olsa bu temadaki gösterimde sorun olmuyor. <pre><code></code></pre> içindeki yazıları WordPress‘in HTML kısmına kopyaladığımda <code></code> bloğundaki her bir satır ayrı ayrı <code> tag‘ları arasına alınıyor. Bu yüzden alt alta olan satırlar yan yana görünüyor. Bunun için,
Markdown.pl‘de,
#$result = "\n\n<pre><code>" . $codeblock . "\n</code></pre>\n\n";
$result = "\n\n<pre>" . $codeblock . "\n</pre>\n\n";
şeklinde değiştirdim.

NOT: Aşağıdaki gerçeklemeler kısmı 21.05.2011 tarihinde eklendi.

Markdown Gerçeklemeleri

  1. Markdown’ın çoğu dildeki uygulamalarına referanslar bruada
  2. PEG grameri kullanılarak yapılmış olan C gerçeklemesi
  3. C Gerçeklemesi – Tanoku/Upskirt #Basit ve sade bir gerçekleme
  4. Ruby Gerçeklemesi – BlueCloth
  5. Ruby Gerçeklemesi – Maruku
  6. Ruby Gerçeklemesi – RDiscount
  7. Ruby Gerçeklemesi – Kitabu #Ayrıca, PDF‘de üretebiliyor. Bunun için, Prince PDF Generator kütüphanesi kullanılıyor.
  8. PHP Gerçeklemesi – PHP Markdown
  9. JavaScript Gerçeklemesi – Markdown-js
  10. JavaScript Gerçeklemesi – showdown
  11. Java Gerçeklemesi – MarkdownJ #Basit ve sade görünüyor. Ayrıca, Ant script‘i var. Ayrıca, jsp uygulaması olarak yapılmış.

Linkler

Şu linkte Markdown deneme tahtası ve bunun hemen yanında syntax cheatsheet var.

Advertisements

1 Comment

Filed under araç

One response to “Markdown ile Markdown Hakkında

  1. Pingback: hayırlı olsun – markdown syntax ile bloglamaksalihozdemir.net/tech | salihozdemir.net/tech

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s