📄
← العودة للأدلة

كيفية تحويل Markdown إلى HTML: دليل شامل

· وسوم: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

كيفية تحويل Markdown إلى HTML

تم تصميم Markdown للكتابة، لكن الويب يعمل بـ HTML. كل مستند Markdown يحتاج إلى تحويل إلى HTML قبل أن يتمكن المتصفح من عرضه. يغطي هذا الدليل الطرق الرئيسية لتحويل Markdown إلى HTML.

الطريقة 1: أدوات سطر الأوامر

Pandoc

Pandoc هو محول المستندات الشامل الذي يدعم عشرات التنسيقات.

# Basic conversion
pandoc input.md -o output.html

# Standalone HTML with <html> and <body> tags
pandoc input.md -o output.html -s

# With table of contents
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);

الطريقة 2: مولدات المواقع الثابتة

Jekyll

يشغل Jekyll صفحات GitHub Pages. يحول ملفات Markdown من _posts أو المجموعات إلى HTML.

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

يستخدم معالج Kramdown مع قوالب Liquid للمحتوى الديناميكي.

Hugo

Hugo هو مولد مواقع ثابتة مبني على Go معروف بسرعات بناء تقاس بالميلي ثانية.

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

يستخدم Goldmark كمعالج Markdown الافتراضي مع دعم الجداول وكتل التعليمات البرمجية المسيجة والحواشي السفلية.

Next.js (MDX)

يدعم Next.js صيغة MDX، مما يسمح بتضمين مكونات React داخل Markdown.

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

تتيح لك MDX تضمين أمثلة تعليمات برمجية حية ورسوم بيانية ونماذج في التوثيق.

الطريقة 3: المحول عبر الإنترنت

للتحويلات الفردية دون تثبيت أدوات، توفر المحولات المستندة إلى المتصفح نتائج فورية:

  1. الصق أو اكتب Markdown في لوحة المحرر.
  2. يظهر مخرج HTML في الوقت الفعلي.
  3. انسخ HTML المُنشأ للاستخدام في أي صفحة ويب أو CMS.

تعالج أداة معاينة Markdown صيغة GitHub Flavored Markdown — الجداول وكتل التعليمات البرمجية وقوائم المهام والشطب — بالكامل في متصفحك.

الطريقة 4: إضافات المحررات

| المحرر | الميزة | الأمر | |--------|---------|---------| | VS Code | معاينة مدمجة | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | دعم مدمج | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

خط أنابيب المعالجة

عندما يحول مولد المواقع الثابتة Markdown إلى HTML، يتبع خط الأنابيب هذا:

Markdown → Parse to AST → Apply extensions → Render to HTML → Apply template → Output page

إذا لم يتم عرض ميزة كما هو متوقع، فالمشكلة عادةً تكون في المحلل (لا يدعم الصيغة) أو المُصيّر (يخرج HTML غير متوقع).

تحويل Markdown إلى HTML عبر الإنترنت

استخدم أداة معاينة Markdown لتحويل Markdown إلى HTML فورًا. اكتب أو الصق Markdown في المحرر، وسيتم تحديث المعاينة المنسقة في الوقت الفعلي.

كيفية تحويل Markdown إلى HTML: دليل شامل - CoolTool