العمل مع Markdown في TypeScript: المكتبات، المحللات والأدوات

مقدمة في Markdown و TypeScript

Markdown هي لغة ترميز خفيفة الوزن، تُستخدم على نطاق واسع لتنسيق النص في التوثيق، ملفات README، المدونات والدردشات. TypeScript، كإضافة صارمة التوصيف فوق JavaScript، تسمح بإنشاء تطبيقات موثوقة وقابلة للتوسع لمعالجة Markdown. على موقع pythonlib.ru سنستعرض أفضل المكتبات والأدوات للعمل مع Markdown في TypeScript، وإمكانياتها وأمثلة استخدامها.

المكتبات الشائعة لتحليل Markdown

توجد عدة حلول ناضجة لتحويل Markdown إلى HTML أو صيغ أخرى. سننظر في الثلاثة الأكثر شيوعًا:

\n
• marked — محلل سريع وخفيف الوزن مع دعم صياغة GFM (GitHub Flavored Markdown). يحتوي على أنواع مدمجة لـ TypeScript.
\n
• showdown — محول متعدد الاستخدامات من Markdown إلى HTML مع إمكانية التوسيع والتخصيص.
\n
• unified (مع حزمة remark) — نظام بيئي حديث لمعالجة Markdown بناءً على AST (شجرة التركيب النحوي المجردة). يسمح ليس فقط بالتحليل، بل أيضًا بتحليل وتحويل وتنسيق Markdown.
\n

التثبيت والإعداد

للبدء، قم بتثبيت إحدى المكتبات عبر npm. مثال لـ marked:

npm install marked\nnpm install @types/marked --save-dev

لـ unified مع remark ستحتاج إلى عدة حزم:

npm install unified remark-parse remark-html\nnpm install @types/unified @types/remark-parse

مثال: تحليل Markdown باستخدام marked

لننشئ دالة بسيطة لتحويل سلسلة Markdown إلى HTML:

import { marked } from 'marked';\n\nfunction renderMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\nconst md = `# عنوان\\n\\nهذا نص **غامق** و _مائل_.`;\nconst html = renderMarkdown(md);\nconsole.log(html);\n// الإخراج: <h1>عنوان</h1>\n// <p>هذا <strong>غامق</strong> نص و <em>مائل</em>.</p>

العمل مع AST عبر unified + remark

مكتبة unified تسمح بالعمل مع Markdown على مستوى الشجرة. هذا مفيد لتحليل بنية المستند، استخراج العناوين أو تحويل الروابط.

import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkHtml from 'remark-html';\n\nasync function mdToHtml(mdContent: string): Promise<string> {\n    const file = await unified()\n        .use(remarkParse)\n        .use(remarkHtml)\n        .process(mdContent);\n    return String(file);\n}\n\nconst md = `## المستوى الثاني\\n\\nقائمة:\\n- بند 1\\n- بند 2`;\nmdToHtml(md).then(console.log);\n// الإخراج: <h2>المستوى الثاني</h2>\n// <p>قائمة:</p>\n// <ul>\n// <li>بند 1</li>\n// <li>بند 2</li>\n// </ul>

إنشاء محرر Markdown مع تمييز الكود

للموقع التعليمي، من المفيد تنفيذ محرر تفاعلي حيث يكتب المستخدم Markdown، ويرى على اليمين معاينة HTML مع تمييز الصياغة. سنستخدم marked و highlight.js لتمييز كتل الكود:

import { marked } from 'marked';\nimport hljs from 'highlight.js';\n\n// إعداد marked لاستخدام highlight.js\nmarked.setOptions({\n    highlight: (code: string, lang: string) => {\n        if (lang && hljs.getLanguage(lang)) {\n            return hljs.highlight(code, { language: lang }).value;\n        }\n        return code; // إذا لم يتم تحديد اللغة أو لم يتم العثور عليها\n    }\n});\n\nfunction previewMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\n// مثال للاستخدام في المتصفح (حدث input على textarea)\nconst textarea = document.getElementById('editor'