رندرکنندهٔ مارک‌داون (MarkdownRenderer)

رندر سبک و بدون وابستگی مارک‌داون برای روایت‌های هوش مصنوعی، بخش‌های گزارش و متن بولتن — امن به‌صورت پیش‌فرض

معرفی

MarkdownRenderer یک رندرکنندهٔ سبک و بدون وابستگیِ مارک‌داون است، برای روایت‌های تولیدشده با هوش مصنوعی، بخش‌های گزارش و بدنهٔ بولتن. به‌صورت پیش‌فرض امن است: HTML خام در منبع به‌جای تزریق، به‌صورت متن رندر می‌شود و لینک‌های javascript: حذف می‌شوند.

پشتیبانی می‌کند از: تیترهای ATX (#..######)، پاراگراف، پررنگ، ایتالیک، ~~خط‌خورده~~، کد درون‌خطی، بلوک کد سه‌بک‌تیکی، نقل‌قول، فهرست مرتب و نامرتب (تخت)، [لینک](url)، خط افقی و شکست خط سخت.

چه زمانی استفاده کنیم:

برای نمایش خروجی متنی مارک‌داونِ مدل‌های زبانی (خلاصه‌ها، روایت‌ها)
برای بدنهٔ بخش‌های گزارش و بولتن که به‌صورت مارک‌داون ذخیره شده‌اند
وقتی به یک رندر امن و سبک بدون آوردن یک کتابخانهٔ سنگین نیاز دارید

چه زمانی استفاده نکنیم:

وقتی به جدول، فهرست تودرتو، فوت‌نوت یا تصویر نیاز دارید — این‌ها عمداً پشتیبانی نمی‌شوند؛ به یک رندرکنندهٔ سنگین‌تر (TipTap / react-markdown) ارتقا دهید
برای محتوای ثابت و کوتاه که مارک‌داون نیست — از JSX معمولی استفاده کنید
برای ویرایش تعاملی متن — از یک ویرایشگر (TipTap) استفاده کنید

خلاصهٔ تحلیل کمپین

کمپین تخفیف فصلی در بازهٔ انتخاب‌شده رشد پایداری داشت. نرخ تعامل نسبت به دورهٔ قبل بهبود یافت.

بیشترین بازخورد دربارهٔ بسته‌بندی جدید بود
گفت‌وگوها بیشتر در اینستاگرام شکل گرفت
پیشنهاد: ادامهٔ همکاری با اینفلوئنسرهای micro

برای جزئیات به گزارش کامل مراجعه کنید.

استفاده

import { MarkdownRenderer } from '@partodata/ui'

export default function ReportBody({ source }: { source: string }) {
  return <MarkdownRenderer>{source}</MarkdownRenderer>
}

محتوای مارک‌داون به‌صورت یک رشته (children) پاس داده می‌شود.

حالت‌ها و انواع

تراکم فشرده برای خلاصه‌های درون‌خطی

density="compact" ریتم عمودی را فشرده‌تر می‌کند — مناسب خلاصه‌های AI کوتاه در یک کارت یا نوار کناری.

<MarkdownRenderer density="compact">{aiSummary}</MarkdownRenderer>

کنترل schemeهای مجاز لینک

به‌صورت پیش‌فرض فقط http، https و mailto نگه داشته می‌شوند و بقیه (از جمله javascript:) حذف می‌شوند. با allowedLinkSchemes می‌توانید فهرست را گسترش دهید.

<MarkdownRenderer allowedLinkSchemes={['http', 'https', 'mailto', 'tel']}>{source}</MarkdownRenderer>

امنیت به‌صورت پیش‌فرض

HTML خام داخل منبع رندر نمی‌شود بلکه به‌صورت متن نمایش داده می‌شود؛ لینک‌های با scheme غیرمجاز به متن ساده تبدیل می‌شوند.

// <script>alert(1)</script> به‌صورت متن نمایش داده می‌شود، نه اجرا
// [x](javascript:alert(1)) لینک نمی‌شود
<MarkdownRenderer>{untrustedMarkdown}</MarkdownRenderer>

راهنمای استفاده

بکنید

برای خروجی مدل‌های زبانی از این رندرکننده استفاده کنید تا مارک‌داون امن و سبک رندر شود - برای خلاصه‌های کوتاه درون کارت/نوار کناری از density="compact" استفاده کنید - محتوا را به‌صورت رشتهٔ مارک‌داون بدهید، نه JSX یا HTML خام

نکنید

برای جدول/فهرست تودرتو/تصویر روی این رندرکننده حساب نکنید — پشتیبانی نمی‌شوند؛ به رندرکنندهٔ سنگین‌تر ارتقا دهید - allowedLinkSchemes را بی‌دلیل باز نکنید؛ حذف javascript: عمدی و برای امنیت است - HTML خام را انتظار نداشته باشید اجرا شود — به‌صورت متن نمایش داده می‌شود (که رفتار امن و درست است)

جدول ویژگی‌ها

MarkdownRenderer

Prop

Type

دسترسی‌پذیری

خروجی از عناصر معنایی واقعی استفاده می‌کند (تیترهای h1–h6، ul/ol، blockquote، pre/code)، پس ساختار برای صفحه‌خوان درست است
بلوک‌های کد و کد درون‌خطی با dir="ltr" رندر می‌شوند تا کد در صفحات RTL درست خوانده شود
لینک‌های خارجی target="_blank" و rel="noopener noreferrer" می‌گیرند و حلقهٔ focus مرئی دارند
HTML خام هرگز تزریق نمی‌شود؛ این هم امنیت و هم پایداری ساختار معنایی را تضمین می‌کند

کامپوننت‌های مرتبط

ReportSections — برای ساختاردهی بخش‌های یک گزارش، از ReportSections استفاده کنید و بدنهٔ هر بخش را با MarkdownRenderer رندر کنید
Callout — برای بلوک‌های تأکید ساخت‌یافته (به‌جای نقل‌قول مارک‌داون)، از Callout استفاده کنید
Card — برای قاب‌بندی یک روایت مارک‌داون در یک کارت، از Card استفاده کنید