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

- visibility ٠ mode_comment

در این مطلب با ادامه آموزش Markdown در خدمتتون هستیم.

Markdown

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

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

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

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

همونطور که میبینید همه لیستها با 1 شروع شدن. حالا اگر این کد رو در ابزار قرار بدیم، بصورت زیر میشه:markdown list 2

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

بهمین راحتی.

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

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

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

همونطور که دیدید قسمت مورد نظر بصورت کد در اومد. خروجی HTML بصورت زیر هست:

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

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

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

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

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

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

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