معاينة Markdown

ما هو Markdown؟

Markdown هي لغة ترميز خفيفة الوزن أنشأها John Gruber عام 2004. تستخدم رموز تنسيق نصية بسيطة كالنجمة والعلامة المربعة والشرطة للتعبير عن البنية: العناوين، الخط العريض، المائل، القوائم، الروابط، ومقاطع الكود. تُصيّر أداة معاينة Markdown ذلك النص العادي إلى HTML منسّق لترى شكل المستند النهائي قبل النشر. المواصفة الأصلية موثّقة في توثيق Gruber على Daring Fireball، وقد جرى توحيد الصيغة لاحقاً بمعيار CommonMark.

أصبح Markdown الصيغة الافتراضية لكتابة توثيق المطوّرين وملفات README ومولّدات المواقع الستاتيكية (Jekyll وHugo وAstro) والويكي وقواعد المعرفة. تدعم GitHub وGitLab وBitbucket وStack Overflow وReddit وNotion جميعها Markdown بصورة أصلية. وبما أن المصدر نص عادي، فإن ملفات Markdown يسهل إدارتها بـ Git وإجراء diff بين الفروع ودمجها دون تعارضات في الأجزاء غير المتداخلة من الملف.

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

لماذا تستخدم أداة معاينة Markdown أونلاين؟

كتابة Markdown في محرر عادي دون معاينة يعني التخمين في شكل المخرجات. أداة المعاينة المباشرة تُنهي هذه المشكلة فوراً.

حالات استخدام معاينة Markdown

مرجع صياغة Markdown

يوضّح الجدول أدناه صياغة Markdown الشائعة مع نتيجتها المُصيَّرة وعنصر HTML المقابل. يغطي هذا معيار CommonMark الأساسي الذي تدعمه تقريباً كل محللات Markdown.

مقارنة بين نكهات Markdown

تُضيف منصات مختلفة مزايا إضافية على مواصفة Markdown الأصلية. معرفة النكهة المستهدفة يساعدك على تجنّب صياغة تفشل بصمت في محلّل آخر.

أمثلة الكود: تصيير Markdown برمجياً

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

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

الأسئلة الشائعة