معالجة Markdown في TypeScript: المكتبات، المحللات والتطبيق العملي

العمل مع Markdown في TypeScript: من التحليل إلى الإضافات المخصصة

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

لماذا تعتبر TypeScript مهمة للعمل مع Markdown؟

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

نظرة عامة على المكتبات الشائعة

• marked — أسرع وأبسط محلل. تكوين بسيط، أداء ممتاز.
• unified / remark — نظام بيئي للتحليل النحوي. يسمح بإنشاء سلاسل تحويل معقدة (AST -> HTML -> React).
• showdown — بديل خفيف مع دعم للإضافات، موثق جيدًا.

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

مكتبة marked مثالية للبدء السريع. قم بتثبيتها عبر npm:

npm install marked

يتم تضمين أنواع TypeScript مع الحزمة. مثال على الاستخدام:

import { marked } from 'marked';

const markdownContent = `# مرحبًا، TypeScript!هذا **نص غامق** و`كود`.- عنصر قائمة- عنصر آخر`;

const html = marked.parse(markdownContent);console.log(html);// الإخراج: <h1>مرحبًا، TypeScript!</h1>// <p>هذا <strong>نص غامق</strong> و <code>كود</code>.</p>// <ul><li>عنصر قائمة</li><li>عنصر آخر</li></ul>

للعمل غير المتزامن، استخدم marked.parseAsync(). هذا مفيد عند تحميل الملفات من الشبكة.

مثال 2: عارض مخصص مع كتابة الأنواع

أحيانًا تحتاج إلى تغيير السلوك الافتراضي. على سبيل المثال، إضافة فئات إلى الروابط أو معالجة الصور. لننشئ عارضًا مخصصًا باستخدام TypeScript:

import { marked, Renderer } from 'marked';

interface CustomRenderer extends Renderer {  link(href: string, title: string | null, text: string): string;}

const renderer: Partial<CustomRenderer> = {  link({ href, title, text }) {    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="external-link">${text}</a>`;  }};

marked.use({ renderer });

const markdown = 'قم بزيارة [PythonLib](https://pythonlib.ru)';const result = marked.parse(markdown);// <a href="https://pythonlib.ru" target="_blank" class="external-link">PythonLib</a>

يضمن النوع Partial<CustomRenderer> أننا نعيد تعريف الطرق المطلوبة فقط.

مثال 3: العمل مع AST باستخدام unified و remark

إذا كنت بحاجة إلى تحكم كامل في بنية المستند، استخدم unified و remark. التثبيت:

npm install unified remark-parse remark-stringify remark-html

مثال على التحليل إلى شجرة نحوية (AST) والعودة:

import { unified } from 'unified';import remarkParse from 'remark-parse';import remarkStringify from 'remark-stringify';import remarkHtml from 'remark-html';

const markdown = '# عنوانهذا **مهم**.';

const file = await unified()  .use(remarkParse)      // تحليل إلى AST  .use(remarkStringify)  // العودة إلى Markdown (للتحقق)  .process(markdown);

console.log(String(file)); // Markdown الأصلي

const htmlFile = await unified()  .use(remarkParse)  .use(remarkHtml)       // تحويل