📄
← Rehberlere dön

Markdown'ı HTML'e Dönüştürme: Kapsamlı Bir Kılavuz

· Etiketler: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

Markdown'ı HTML'e Dönüştürme

Markdown yazmak için tasarlanmıştır, ancak web HTML üzerinde çalışır. Her Markdown belgesinin bir tarayıcı tarafından görüntülenmeden önce HTML'e dönüştürülmesi gerekir. Bu kılavuz, Markdown'ı HTML'e dönüştürmek için başlıca yöntemleri kapsar.

Yöntem 1: Komut Satırı Araçları

Pandoc

Pandoc, düzinelerce formatı destekleyen evrensel belge dönüştürücüdür.

# Temel dönüştürme
pandoc input.md -o output.html

# <html> ve <body> etiketleriyle bağımsız HTML
pandoc input.md -o output.html -s

# İçindekiler tablosu ile
pandoc input.md -o output.html -s --toc

Python-Markdown

pip install markdown
python -m markdown input.md > output.html

import markdown
with open("input.md", "r") as f:
    text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])

CommonMark (JavaScript)

npm install commonmark

const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);

Yöntem 2: Statik Site Oluşturucuları

Jekyll

Jekyll, GitHub Pages'i çalıştırır. _posts veya koleksiyonlardaki Markdown dosyalarını HTML'e dönüştürür.

gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve

Dinamik içerik için Liquid şablonlarıyla Kramdown işleyicisini kullanır.

Hugo

Hugo, milisaniyelik derleme hızlarıyla bilinen Go tabanlı bir statik site oluşturucusudur.

hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D

Tablolar, çitli kod blokları ve dipnotlar desteğiyle varsayılan Markdown işleyicisi olarak Goldmark'ı kullanır.

Next.js (MDX)

Next.js, React bileşenlerini Markdown içine gömen MDX'i destekler.

npm install next @next/mdx @mdx-js/loader

MDX, dokümantasyona canlı kod örnekleri, grafikler ve formlar eklemenizi sağlar.

Yöntem 3: Çevrimiçi Dönüştürücü

Araç yüklemeden tek seferlik dönüştürmeler için, tarayıcı tabanlı dönüştürücüler anında sonuçlar sağlar:

  1. Markdown'ı düzenleyici paneline yazın veya yapıştırın.
  2. HTML çıktısı gerçek zamanlı olarak görünür.
  3. Oluşturulan HTML'i herhangi bir web sayfasında veya CMS'de kullanmak üzere kopyalayın.

Markdown önizleme aracı, GitHub Flavored Markdown'ı — tablolar, kod blokları, görev listeleri ve üstü çizili metin — tamamen tarayıcınızda işler.

Yöntem 4: Düzenleyici Eklentileri

| Düzenleyici | Özellik | Komut | |--------|---------|---------| | VS Code | Yerleşik önizleme | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | Yerleşik destek | Hızlı Dokümantasyon | | Vim | vim-markdown | :MarkdownPreview |

İşleme Hattı

Bir statik site oluşturucusu Markdown'ı HTML'e dönüştürdüğünde, şu hattı izler:

Markdown → AST'ye Ayrıştır → Uzantıları Uygula → HTML'e İşle → Şablonu Uygula → Sayfayı Çıkar

Bir özellik beklendiği gibi işlenmezse, sorun genellikle ayrıştırıcıda (söz dizimini desteklemez) veya işleyicide (beklenmeyen HTML çıktısı verir) olur.

Markdown'ı Çevrimiçi HTML'e Dönüştürün

Markdown'ı anında HTML'e dönüştürmek için Markdown önizleme aracını kullanın. Düzenleyiciye Markdown yazın veya yapıştırın, işlenmiş önizleme gerçek zamanlı olarak güncellenir.

Markdown'ı HTML'e Dönüştürme: Kapsamlı Bir Kılavuz - CoolTool