در این مطلب با ادامه آموزش Markdown در خدمتتون هستیم.
شما با استفاده از تگ 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> |
بهمین راحتی.
همونطور که میدونین شما میتونین در 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 بازدید : 361