آموزش استفاده از Markdown برای نوشتن محتوا (جلسه ۸) – قرار دادن کد و table

 

روشی دیگر برای قرار دادن کد

در این روش کدهایی که چند خط هستند را درون تگ code قرار را در نظر بگیرید:

```
grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};
```

اگر این کد ا درون ابزار آنلاین stackedit قرار دهیم، خروجی بصورت زیر خواهد شد:markdown code multuple line

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

grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};

 

قرار دادن جدول یا table

در HTML جداول را با استفاده از تگ html بوجود می‌آوریم که هر جدول دارای تعدادی ردیف و هر ردیف دارای تعدادی سلول است. در Markdown ردیف‌ها را با استفاده از خط جدید بوجود می‌آوریم و سلول‌ها را با استفاده از Pipe یا | از هم جدا می‌کنیم. برای قرار دادن علامت pipe می‌توانید به راحتی کلیدهای ترکیبی Shift و را با هم فشار دهید. مثلا کد زیر را در نظر بگیرید:

| Option | Description |
| ------ | ----------- |
| data   | path to supply the data templates. |
| engine | engine the default. |
| ext    | extension to be used for dest files. |

میبینید که درون | عبارت‌های مختلفی قرار گرفته است. برای اینکه کاراکترهایی که در خط اول قرار گرفتند به عنوان Heading یا عنوان جدول تلقی شده و Bold شوند، تعدادی خط تیره (—-) قرار میدهیم. تعداد خط تیره‌ها مهم نیست. هر خط در کد بالا نقش یک ردیف در جدول را دارد. خروجی این کد در ابزار Stackedit بصورت زیر است:markdown table

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

Option Description
data path to supply the data templates.
engine engine the default.
ext extension to be used for dest files.

همانطور که دیدید ردیف اول درون تگ thead قرار گرفت که مخفف Table header است و نقش عنوان جدول رو ایفا میکند. همچنین می‌توانید به راحتی با اضافه کردن علامت دونقطه(:) به انتهای —-، آن ستون را بصورت راست چین شده در بیارید. برای مثال کد زیر را در نظر بگیرید:

| Option | Description |
| ------: | -----------: |
| data   | path to supply the data templates. |
| engine | engine the default. |
| ext    | extension to be used for dest files. |

خروجی این کد بصورت زیر خواهد بود:markdown table 2

 

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

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

تگ ها:

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0