Web Geliştirmede Markdown Nasıl Kullanılır

Feb 2, 2026
Nasıl Yapılır

Web geliştiricileri ve içerik yaratıcıları olarak, genellikle içine sarılmış metin yazma metni harcıyoruz. Html kod. Ya size markdown ile yapmanın daha iyi bir yolu olduğunu söyleseydik? Kodu yazmaya ve yazmaya odaklanabildiğiniz bir yol mu?

Markdown, 2004 yılında John Gruber ve Aaron Swartz tarafından geliştirilen düz metin, hafif bir işaretleme dilidir. Başlangıçta, XHTML / HTML'yi daha kolay yazmak için, düz metin dosyalarını yapısal olarak geçerli HTML veya XHTML'ye dönüştürerek, yazılımın hemen hemen her türlü yazma için kullanılabilir: el yazmaları, öğreticiler, notlar, web içeriği ve daha fazlası.

Nispeten basit olmasına rağmen, ilk başladığınızda markdown biraz korkutucu olabilir. Ancak bir kez takıldıktan sonra, içeriğinizi yazmak yerine kodunuzu ne kadar zamanın biçimlendirilmesini hızla gerçekleştirirsiniz.

01. Bir Markdown Editor Seçin

Web için markdown ile çalışırken, karşılaşabileceğiniz temel sözdizimini ve sınırlamaları anlamak önemlidir. Başlamadan önce, bir tür editöre ve siteniz için bir tercümana ihtiyacınız var. Alternatif olarak, yayınlamadan önce markdown'ı dönüştürebilirsiniz.

You'll need some kind of editor to get started

Başlamak için bir tür editöre ihtiyacınız olacak

Seçebileceğiniz birkaç editör var. Atasözü Harika, çünkü HTML ve PDF de dahil olmak üzere çok çeşitli ihracat seçenekleri sunar. Başka bir harika alternatif Stackedit - Ücretsiz, çevrimiçi bir Markdown Editor. Tabii ki, herhangi bir düz metin editörü çalışacak.

Jetpack is handy for use with WordPress

Jetpack, WordPress ile kullanım için kullanışlıdır

Markdown'ınızı HTML'ye dönüştürmeyi planlamazsanız, siteniz için bir eklenti (veya kesici) alabilirsiniz. WordPress için, Jetpack Markdown için mükemmel bir desteğe sahiptir; bu seçeneği etkinleştirdiğiniz sürece, yazıların ve yorumların ve yorumların içinde ve yorumlarını kullanmanızı sağlar.

Herhangi bir işaretleme dili gibi, Markdown kendi sözdizimine sahiptir. Not: Bir dizi farklı lezzet veya markdown çeşitleri vardır. Bu yazıda, yalnızca ortak paylaşılan sözdizimini kapsayacağız.

02. Başlıkları ayarlayın

HTML'de altı başlık stilleri vardır: h1 , h2 , h3 , h4 , H5 ve h6 . Bunları Markdown'da yeniden oluşturmak için, bir dizi Hashtag sembolü kullanın ( # ) - başlık sayısına karşılık gelen - ardından başlık metni. Örneğin, bir oluşturmak için & lt; h1 & gt; Etiket, bir hashtag kullanın # ; bir ... için & lt; h2 & gt; Tag, iki hashtag kullanın ## ; Ve benzeri ve benzeri.

Markdown girişi: 

 # Başlık 1
## başlık 2
### başlık 3
#### 4 başlık 4
##### Başlık 5
###### Başlık 6

HTML çıkışı: 

 & lt; h1 / h1 ve gt;
2. H2 / H2 ve GT;
& lt; h3 ve gt; başlık 3 (/ h3 ve gt;
& lt; H4 ve GT; 4 / H4 ve GT;
H5 & GT; (5) başlık (5 / h5 ve gt;
& lt; h6 ve gt; başlığı 6

03. Paragrafları işaretleyin

Paragraflar tarafından temsil edilir. & lt; p & gt; HTML'de etiketleyin. Markdown olarak, bir veya daha fazla boş satır ile ayrılırlar. HTML gibi, boşluk göz ardı edilir. Öyleyse 20 boş satır eklerseniz, hala sadece bir paragrafa sahip olacaksınız.

Markdown girişi: 

 Hızlı kahverengi tilki tembel köpeğin üzerinden atlar.
Tembel köpek umursamıyor, çünkü o tembel bir köpek.

HTML çıkışı: 

 & lt; p & gt; Hızlı kahverengi tilki tembel köpeğin üzerine atlar.
Tembel köpek umrunda değil, çünkü tembel bir köpek.

04. Çizgi sonuçları

HTML'de gösterilen hat sonları & lt; br & gt; Tag, önceki satırın sonunda iki boşluk olan tek bir satır sonu kullanılarak eklenir.

Markdown girişi: 

 Hızlı kahverengi tilki
tembel köpeğin üzerinden atlar.

HTML çıkışı: 

 Hızlı kahverengi tilki; tembel köpeğin üzerine atlar.

05. Mark vurgu

Metninize vurgu yapmanın iki yolu vardır: italik ( & lt; em & gt; HTML'de) veya kalın ( & lt; güçlü & gt; html içinde).

Markdown'da, bunu bir veya iki yıldız işareti kullanarak başarırsınız ( * ). Ayrıca alt çizgi (_), ancak yıldızlarla yapışır, çünkü diğer şeyler için alt çizgi kullanan diğer markdown'lar var.

Markdown girişi: 

 * italik metin *
** Kalın metin **

HTML çıkışı: 

 & lt; em & gt; italik metin & em & gt;
& lt; güçlü & gt; cesur metin;

Not: Üç yıldız kullanarak da cesur-italik metinler oluşturabilirsiniz: *** Kalın ve italik metin *** .

06. Yatay kurallar oluşturun

Yatay bir kural oluşturmak için (veya & lt; hr & gt; HTML'de), üç veya daha fazla tireden oluşan bir dizi kullanın ( --- ), yıldız () *** ) veya eşit işaretler ( === ). Hangisini tercih ettiğiniz, ancak sadece yukarıda ve aşağıda boş bir satır eklediğinizden emin olun.

Markdown girişi: 

 Yeni bir şey öğrenmek her zaman çok eğlencelidir.

---

Eminim!

HTML çıkışı: 

 & lt; yeni bir şey öğrenmek her zaman çok eğlencelidir. & LT; / P & GT;
& lt; hr & gt;
& lt; p & gt; emin! & lt; / p & gt;

07. Resim ve linkler ekleyin

HTML'de, kullanarak bir görüntü eklenir. & lt; img & gt; Etiket ve bağlantılar kullanarak eklenir. & lt; a & gt; etiket.

Markdown'da görüntüler ünlem işareti ile başlar ( K! ), ardından kare parantezler ( [] ) 'alt metin' ve parantez için ( () ) görüntünün yolu için. Ayrıca çift tırnak içinde isteğe bağlı bir başlık ekleyebilirsiniz ( "" ).

Bağlantılarla, neredeyse aynısı, bunun dışında ünlem işareti yok.

Markdown girişi: 

! [Alt Metin] (/ yol / / image.jpg "İsteğe bağlı başlık")
[Bağlantı Text] (http://example.com "İsteğe bağlı başlık")

Not: Ayrıca referans bağlantılarını ve görüntüleri de kullanabilirsiniz, ancak bu burada ele alınmaz.

HTML çıkışı: 

 & lt; img src = "/ yol / / image.jpg" alt = "alt metin" başlığı = "İsteğe bağlı başlık" / & gt;
& lt; a href = "http://example.com" title = "İsteğe bağlı başlık" ve GT;
bağlantı metni

08. Listeleri yapın

HTML'de iki tür liste vardır: sipariş edildi ( & lt; ol & gt; ) ve sırasız ( & lt; ul & gt; ). Markdown ile, sipariş edilen listeler ve yıldızlar için numaraları kullanın ( * ) veya tire - ) Sırasız listeler için.

Markdown girişi: 

 1. Madde 1
2. madde 2
* İlk eşya
* İkinci öğe
- İlk eşya
- İkinci Ürün

HTML çıkışı: 

 & lt; ol & gt;
ÖĞRENDİ ÖĞE 1 ÖZETİ; / LI & GT;
& l li & gt; madde 2; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& l li ve gt; ilk öğe; / li & gt;
& LI & GT; İkinci Öğe; / Li & Gt;
& lt; / ul & gt;
& lt; ul & gt;
& l li ve gt; ilk öğe; / li & gt;
& LI & GT; İkinci Öğe; / Li & Gt;
& lt; / ul & gt;

09. Satır içi kod ve kod blokları ekleyin

HTML'de kodla çalışırken, kullanarak bir satır içi öğe olarak dahil edebilirsiniz. Etiketler; veya kullanarak önceden biçimlendirilmiş bir metin bloğu olarak & lt; prew & gt; kod; kombinasyon.

Markdown'da, bu elemanlar her taraftaki tek bir backtick kullanılarak sınırlandırılır ( ` ); veya kod bloğunun üstünde ve altında üç backtick içeren çitle çevrili bir tarz kullanarak ( `` `` `` ).

Markdown girişi: 

 `NumberOfPoints'in değişkeni, oyuncunun puanını tutar.
Eğer oyuncu.wins {
NumberOfPoints + = 1
}

HTML çıkışı: 

 Kod ve GT; NumberOfPoints & lt; / CODE & GT; Değişken oyuncunun puanını tutar.
& lt; prew & gt; kod;
Eğer oyuncu.wins {
NumberOfPoints + = 1
}
& lt; / prew & gt;

10. Stil Yukarı Blokotlar

BLOKQUOTES, HTML kullanarak & lt; blockquote & gt; etiket. Markdown'da, sembolden daha büyük ( & gt; ) satırdan önce.

Markdown girişi: 

 & gt; Bu benim blockquote.
& gt;
& gt; Bu aynı blokajın bir parçasıdır.
& gt; Bu yeni bir blokequote.

HTML çıkışı: 

 & lt; blockquote & gt;
& LT; P & GT; bu benim blokajım. & lt; / p & gt;
& lt; br & gt;
bu, bu aynı blokajın bir parçasıdır. & LT; / P & GT;
& lt; / blockquote & gt;
& lt; blockquote & gt;
& LT; P & GT; Bu yeni bir blokequote. & lt; / p & gt;
& lt; / blockquote & gt;

11. Embed Girl HTML

Desteklenmeyen bir HTML öğesi oluşturmanız gerektiğinde zamanlar vardır;Örneğin, bir ihtiyacınız olabilir. & lt; tablo ve gt; veya & lt; div & gt; etiket.

Bu durumda, Markdown ve HTML'yi karıştırabilirsiniz, ancak bazı kısıtlamalar vardır.Örneğin, blok düzeyinde HTML etiketlerinde markdown ekleyemezsiniz.

Daha fazla oku:

  • 20 node.js bilmeniz gereken modüller
  • 12 Ortak JavaScript soruları cevaplandı
  • HTML ve CSS'yi öğrenmek için en iyi kaynaklardan 9

Nasıl Yapılır - En Popüler Makaleler

Bileşenleri canlandırmak için reaksiyon yayını nasıl kullanır

Nasıl Yapılır Feb 2, 2026

(Görüntü Kredi: Mat Crouch) REACT Yayı, Web'de uygulamak için komik bir şekilde zor olan animasyonlarda size ya..

Bir kişiyi nasıl çizilir

Nasıl Yapılır Feb 2, 2026

Hangi tür sanatçı olursa, bir kişinin nasıl çizileceğini anlamak temel bir beceridir. İnsan formuna ustalaşın ve kendi karakter tasarımlarınız..

CSS şekilleri ile nasıl tasarlanır: bir giriş

Nasıl Yapılır Feb 2, 2026

Her web sitesinin temeli, sayfayı içeriği olan daha küçük öğelere bölmektir. Tasarımcılar için bu konuda büyük soru..

Daha gerçekçi rakamlar nasıl çizilir

Nasıl Yapılır Feb 2, 2026

Bu şekilde çizim öğreticisinde, özellikle göğüslerin sıkıştırma ve yerçekimin etkileri nedeniyle şekli nasıl deği..

SASS'de medya sorguları nasıl yapılır

Nasıl Yapılır Feb 2, 2026

Neredeyse her site şimdi en azından bir selamla duyarlı web tasarımına göre oluşturulmuştur. Bu duyarlı stilleri yapman�..

Efektlerden Sonra İhracat Animasyonları HTML5'e

Nasıl Yapılır Feb 2, 2026

Web'de animasyon kalmak için burada. Bizimizi getirmeye yardımcı olan ince hareketlerden her şeyde UI tasarımı ..

Bir fotoğrafı bir VR setine dönüştürme

Nasıl Yapılır Feb 2, 2026

Tipik olarak, birisi artırılmış gerçeklik veya sanal gerçekliği değerlendirdiğinde, video oyunlarını düşünüyor ola..

Photoshop'taki bir şablondan bir poster yapın

Nasıl Yapılır Feb 2, 2026

Adobe, bugün yaptığım yeni bir dizi video dersi başlatıyor, bu da çeşitli kullanan belirli tasarım projelerinin nasıl oluşturulacağını belirlemeyi amaçlayan Yarat..

Kategoriler