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

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

 

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

در این روش کدهایی که چند خط هستند را درون تگ 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 خروجی اون بصورت زیر است:

<pre>
<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']
      }
    }
  }
};
</code>
</pre>

 

قرار دادن جدول یا 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 آن هم بصورت زیر است:

<table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
            <td>path to supply the data templates.</td>
        </tr>
        <tr>
            <td>engine</td>
            <td>engine the default.</td>
        </tr>
        <tr>
            <td>ext</td>
            <td>extension to be used for dest files.</td>
        </tr>
    </tbody>
</table>

همانطور که دیدید ردیف اول درون تگ 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

 

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

جلسات دوره

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

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

نیاز به لاگین

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