تخفیف ویژه

آموزش استفاده از Markdown برای نوشتن محتوا (جلسه 4) - خط افقی و پاراگراف

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۰۱ مهر ۱۳۹۵

قرار دادن خط افقی

همانطور که میدانید از تگ hr در html برای کشیدن خط افقی مابین متون و پاراگرافهای مختلف استفاده میشود تا بخش‌ها از هم جدا کند. در Markdown شما میتوانید خط افقی یا تگ hr را به سه روش بسازید:

1. سه Underline پست سر هم و بیشتر:markdown hr

همانطور که دیدید در سمت چپ ابزار آنلاین stackedit سه Underline پشت سر هم قرار دادیم و در سمت راست یک خط افقی به وجود آمد. اگر بیشتر از 3 عدد Underline هم قرار دهید، باز هم همین اتفاق خواهد افتاد.

2. سه dash یا خط فاصله پست سر هم و بیشتر:markdown hr 2

دیدید که خروجی مانند روش قبل هست.

3. سه ستاره یا * پست سر هم و بیشتر:markdown hr 3

کار کردن با پاراگراف

اگر شما متنی را درون Markdown قرار دهید و آن را به HTML تبدیل کنید، آن متن بصورت اتوماتیک در تگ P یا پاراگراف قرار میگیرد. برای مثال اگر متن زیر را در Markdown قرار دهیم:

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

چون همه متن در یک پاراگراف و پشت سر هم قرار داده شده و خط جدیدی ایجاد نشده، خروجی HTML آن بصورت زیر است:

<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

می بینید که همه متن در تگ p قرار داده شده است. حالا اگر فقط یک Enter در قسمتی از متن بزنیم تا به خط جدید برود، متن ورودی بصورت زیر میشود:

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum.
Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

خروجی HTML اون بصورت زیر است:

<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. <br>
Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

همانطور که دیدید به جای Enter، یک تگ br در html بوجود آمده است.

حالا اگر دو یا بیشتر Enter بزنیم، متن ورودی در Markdown بصورت زیر میشود:

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum.

Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

دو متن بصورت کامل از هم جدا شدند. خروجی HTML آن به صورت زیر است:

<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum.</p>

<p>Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

همانطور که دیدید دو پاراگراف مستقل به وجودآمده و متون مورد نظر را در خود جای داده است.

قرار دادن کد HTML در Markdown

اگر شما به تگ HTML خاصی نیاز دارید که همچنین class خاصی هم داشته باشد، می‌توانید به سادگی کد HTML خود را در Markdown قرار دهید. برای مثال کد زیر را در نظر بگیرید:

Paragraph in Markdown.

<div class="class">
</div>

Paragraph in Markdown.

خروجی HTML بصورت زیر میشود:

<p>Paragraph in Markdown.</p>

<div class="class">
</div>

<p>Paragraph in Markdown.</p>

 

 

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.