جشنواره فطر سون لرن

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

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

ordered list یا لیست مرتب

به سراغ لیست مرتب می‌رویم. شما میتوانید در html لیست هایی بسازید که درون آن مرتب است و آیتم‌های درون لیست دارای نوبت هستند. در html این کار را با استفاده از تگ ol انجام میدهیم. درون Markdown به راحتی با قرار دادن اعداد قبل از آیتم‌های مورد نظر، لیست مرتب یا ordered list بسازید. کد Markdown زیر را در نظر بگیرید:

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

خروجی در ابزار آنلاین بصورت زیر است:markdown list

حالا شما میتوانید بجای اینکه از اعداد پشت سر هم استفاده کنید، همه اعداا 1 قرار دهید. با اینکار Markdown متوجه می‌شود که منظور شما همان لیست مرتب است. کد زیر را ببینید:

1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem

خروجی کد:markdown list 2

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

<ol>
  <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</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

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

میتوان درون HTML با استفاده از تگ code، کدها را درون سایت به نمایش گذاشت. درون Markdown این کار را با استفاده از backtick یا ` انجام میدهیم. به راحتی کد مورد نظر را درون ` قرار داده و Markdown کارهای مورد نظر را برای ما انجام میدهد. برای قرار دادن `، کافی است که زبان کیبورد انگلیسی باشد و دکمه زیر Esc رو فشار دهید. با اینکار یک Backtick قرار داده میشود. برای مثال کد زیر را نظر بگیرید:

In this example, `<section></section>` should be wrapped as **code**.

میبینید که کد <section></section> درون ` قرار گرفت است. خروجی کد بصورت زیر می‌شود:markdown code

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

<p>In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be wrapped with <strong>code</strong>.</p>

میبینید که کاراکترهای خاص بصورت کدهای HTML در آمدند.

را دیگر این است که همه کدها را به اندازه حداقل 4 فضای خالی یا space از ابتدای خط فاصله دهید. با اینکار  خطوط بصورت کد در می‌آیند. کد زیر را در نظر بگیرید:

	line 1 of code
	line 2 of code
	line 3 of code

همه خطوط بالا به اندازه 1 تب یا 4 فضای خالی از ابتدای خط فاصله دارند. خروجی آن بصورت زیر میشود:markdown code 5

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

<pre>
  <code>
    line 1 of code
    line 2 of code
    line 3 of code
  </code>
</pre>

میبینید که کدهای مورد نظر ابتدا درون تگ code و بعد از آن درون تگ pre قرار میگیرند.

 

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

جلسات دوره

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

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

نیاز به لاگین

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