در این مطلب با ادامه آموزش Markdown در خدمتتون هستیم.
Blockquote یا نقل قول
شما با استفاده از تگ blockquote در html میتونین یک نقل قول در سایتتون قرار بدین و حرف یا سخن کسی دیگه رو درون سایتتون بزارید. برای اینکه درون Markdown یک نقل قول بزارید، کافیه که قبل از متن مورد نظرتون یک علامت < قرار بدین. برای نمونه یک متن رو در زیر بصورت نقل قول قرار میدم:
>**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 عبارت بالا رو قرار بدیم، خروجی بصورت زیر هست:
همونطور که دیدید متن مورد نظر در خروجی به زیبایی در نقل قول قرار گرفته. کد 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.
همونطور که میبینید در بالا نقل اصلی بعد از < هست و نقل قولی که قصد داریم داخل نقل قول اولی قرار بگیره رو بعد از << قرار دادیم. خروجی بصورت زیر هست:
همچنین خروجی کد HTML بصورت زیر میشه:
1
2
3
4
5
6
7
8
9
<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 لیستهایی بسازید که درون اون مرتبه و order مهم نیس و هر آیتمی میتونه هر جای لیست باشه. در 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
خروجی هر دو کد بالا به یک شکل هست:
برای اینکه زیر منو برای یکی از آیتمها بزارید، میتونین زیر منوها رو با یک تب یا space مشخص کنید. برای مثال کد زیر رو در نظر بگیرید:
1
2
3
4
5
6
7
8
9
10
11
12
+ 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 کردیم. خروجی بصورت زیر میشه:
خروجی HTML هم بصورت زیر میشه:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
بهمین راحتی تونستیم منو و زیر منو درون Markdown قرار بدیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید
برچسب : نویسنده : استخدام کار 7learn بازدید : 354 تاريخ : دوشنبه 5 مهر 1395 ساعت: 16:58