برنامه نویسی

ShowdownCSS: سبک HTML ایجاد شده توسط ShowdownJS

ek3nk4r 2024-04-14

16 خواندن این مطلب 3 دقیقه زمان میبرد

ShowdownCSS: سبک HTML ایجاد شده توسط ShowdownJS

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

🎨 ShowdownCSS: روشی شیک برای نمایش محتوای Markdown شما! 🚀

هی انجمن توسعه دهندگان! 👋

به دنبال راهی یکپارچه برای استایل دادن به محتوای Markdown خود با CSS زیبا هستید؟ جلوترش رو نگاه نکن! 🌟

فهرست مطالب

سلام! به ShowdownCSS خوش آمدید، کتابخانه CSS که برای طراحی محتوای Markdown که توسط Showdown تجزیه شده است، ساخته شده است! 🚀

مجوز
ستاره های GitHub
مشکلات GitHub
بازدید کنندگان

سلام! به ShowdownCSS خوش آمدید، کتابخانه CSS که برای طراحی محتوای Markdown که توسط Showdown تجزیه شده است، ساخته شده است! 🚀

محتوای Markdown خود را ادویه کنید! 🔥

امکانات

یک ظاهر طراحی برای عناصر Markdown مانند سرصفحه ها، پاراگراف ها، لیست ها، بلوک های کد، نقل قول ها، جداول، پیوندها و قوانین افقی.
تم های مختلف در دسترس، با یکی از پیش فرض ارائه شده است.

نصب و راه اندازی

می توانید ShowdownCSS را با استفاده از CDN در پروژه خود بگنجانید:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">

استفاده 🤓

ابتدا مطمئن شوید که یک فایل Markdown آماده دارید! 📄
ShowdownCSS را در فایل HTML خود قرار دهید:
```
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
</head>
```
محتوای Markdown خود را در یک div با کلاس قرار دهید .showdowncontainer:
```
<div class="showdowncontainer">
  
</div>
```
خودشه! 🎉 محتوای Markdown شما در داخل .showdowncontainer اکنون سبک خواهد شد…

ShowdownCSS چیست؟

ShowdownCSS یک کتابخانه CSS سبک وزن است که به طور خاص برای استایل دادن به محتوای Markdown که توسط Showdown تجزیه شده است طراحی شده است. با ShowdownCSS، می‌توانید بدون زحمت فایل‌های Markdown خود را با تم‌های شیک و طرح‌های زیبا ارتقا دهید و محتوای خود را واقعاً برجسته کنید. 🔥

امکانات:

ادغام آسان: به سادگی ShowdownCSS را با استفاده از پیوند CDN در پروژه خود قرار دهید.
چند تم: از میان انواع تم ها انتخاب کنید یا تم های خود را برای مطابقت با سبک خود ایجاد کنید.
قابل تنظیم: سبک ها را به گونه ای تنظیم کنید که با زیبایی شناسی منحصر به فرد پروژه شما مطابقت داشته باشد.
پاسخگو: طراحی شده تا در همه دستگاه ها، از دسکتاپ گرفته تا صفحه نمایش موبایل، عالی به نظر برسد.

شروع شدن:

ShowdownCSS را در فایل HTML خود قرار دهید:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">

محتوای Markdown خود را در یک div با کلاس قرار دهید .showdowncontainer:

   <div class="showdowncontainer">
     <!-- Your Markdown content goes here! -->
   </div>

خودشه! 🎉 محتوای Markdown شما در داخل .showdowncontainer اکنون توسط ShowdownCSS به زیبایی طراحی خواهد شد!

مثال:

در اینجا یک مثال سریع از نحوه استفاده از ShowdownCSS آورده شده است:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ShowdownCSS Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
</head>
<body>

<div class="showdowncontainer">
  <h1>Hello, Markdown! 👋</h1>

  <p>This is **bold** and this is *italic*.</p>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <blockquote>This is a blockquote. 🗣️</blockquote>

  <pre><code class="language-javascript">function hello() {
    console.log("Hello, World!");
  }</code></pre>

  <p>That's it! Your Markdown is now styled! 🎉</p>
</div>

</body>
</html>

موضوعات:

ShowdownCSS طیفی از تم ها را برای انتخاب ارائه می دهد، از جمله یک تم پیش فرض و یک تم تیره. شما به راحتی می توانید تم ها را با قرار دادن فایل CSS مربوطه تغییر دهید.

طرح زمینه پیش‌فرض: به‌طور خودکار در صورت اضافه کردن آن اعمال می‌شود showdown.css.
تم تیره: شامل فایل CSS با تم تیره:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/themes/dark-theme.css">

امروز شروع کنید!

برای درخشش محتوای Markdown خود آماده اید؟ امروز با ShowdownCSS شروع کنید! از مخزن GitHub ما دیدن کنید تا بیشتر بیاموزید، تم ها را بررسی کنید و ایده های خود را به اشتراک بگذارید. 🌈