تخفیف ویژه

آموزش استفاده از Markdown برای نوشتن محتوا (جلسه 6) - نقل قول و لیست نامرتب

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

Blockquote یا نقل قول

شما با استفاده از تگ blockquote در html میتوتنید یک نقل قول در سایت قرار دهید. کافی است که قبل از متن مورد نظر یک علامت < قرار دهید. برای نمونه یک متن را در زیر بصورت نقل قول قرار میدهیم:

> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

همونطور که دیدید ابتدا متن با علامت < شروع شده و هر متنی که بعد از آن بیاید، بعنوان نقل قول در نظر گرفته میشود. عبارت Fusion Drive هم در ** قرار گرفته که باعث میشود این قسمت از متن بصورت bold باشد و در تگ strong قرار بگیرد. اگر درون ابزار stackedit عبارت بالا را قرار دهیم، خروجی بصورت زیر است:markdown blockquotes

کد HTML این کد Markdown بصورت زیر است:

<blockquote>
  <p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
</blockquote>

دیدید که متن مورد نظر ابتدا درون تگ p و بعد ازآن درون تگ blockquote قرار گرفته است. حتی شما می‌توانید به راحتی نقل قول‌ها را درون نقل قول‌های دیگر قرار دهید. برای اینکار می‌تونید برای نقل قول فرزند بجای < از  سمبل<< استفاده کنید. بصورت زیر:

> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

همونطور که میبینید در بالا نقل اصلی بعد از < است و نقل قولی که قصد داریم داخل نقل قول اولی قرار بگیرد را بعد از << قرار دادیم. خروجی بصورت زیر است:markdown blockquotes 2

همچنین خروجی کد HTML بصورت زیر میشود:

<blockquote>
  <p>Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. <br>
  Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.</p>
  
  <blockquote>
    <p>Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor <br>
    odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.</p>
  </blockquote>
</blockquote>

Unordered list یا لیست نامرتب

شما میتوانید در html لیست هایی بسازید که درون آن ترتیب مهم نیست و هر آیتمی میتواند هر جای لیست باشد. در html این کار را با استفاده از تگ ul انجام میدهیم. درون Markdown میتوانید به راحتی با قرار دادن یکی از علامت‌های + یا * یا - قبل از آیتم‌های مورد نظر، لیستی از آیتم‌ها را بسازید. هیچ فرقی بین این علامت‌ها نیست و میتوانید از یکی یا همه آن‌ها با همدیگر استفاده کنید. برای مثال دو کد Markdown زیر به یک صورت هستند:

+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa

و

+ Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
- Integer molestie lorem at massa

خروجی هر دو کد بالا به یک شکل است:markdown blockquotes 3

برای اینکه زیر بخش برای یکی از آیتم‌ها بگذارید، میتوانید زیر منوها را با یک تب یا space مشخص کنید. برای مثال کد زیر را در نظر بگیرید:

+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
	+ Phasellus iaculis neque
	+ Purus sodales ultricies
	+ Vestibulum laoreet porttitor sem
	+ Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem

همونطور که در بالا دیدید یکی از آیتم ها، تعدادی زیرمنو دارد و آن‌ها را با استفاده از تب، indent کردیم. خروجی بصورت زیر میشود:markdown blockquotes 4

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

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

 

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

جلسات دوره

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

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

نیاز به لاگین

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