---
title: kramdown
tags: markup kramdown markdown jekyll
uuid: 50418455-c289-4c3b-b40d-05c9e70b2a6f
category: جکیل
---

طی هفته‌های گذشته مشغول راه‌اندازی این وبسایت بودم. مثل هر پروژه دیگری کلی مطلب در طول انجام اینکار یاد گرفتم، فرآیندی که همچنان ادامه داره. یکی از این موارد آشنایی با [kramdown](http://kramdown.gettalong.org/) بود.

#یک پارسِر دیگر مارک‌داون
*kramdown* در ساده‌ترین حالت یک پارسِر مارک‌داون محسوب می‌شه اما ویژگی‌هایی هم داره که در مارک‌داون وجود نداره. من به طور خاص از ویژگی [Inline Attribute Lists](http://kramdown.gettalong.org/syntax.html#block-ials) صحبت می‌کنم.

اگر به تنظیمات جکیل من نگاه کنید من *kramdown* رو به عنوان پارسر انتخاب کردم:

~~~ yaml
markdown: kramdown
~~~

این باعث می‌شه که جکیل کد صفحات من را با پارسِر درست ترجمه کنه و بنابراین من می‌تونم از سینتکس اون استفاده کنم.
  
## مشکل از کجا شروع شد
من مشکلی داشتم در نمایش افقی و مرکزی عکس‌ها. جکیل به صورت پیشفرض تصاویر رو سمت چپ (و وقتی راست‌چین شده باشه سمت راست) قرار می‌داد و این چیزی نبود که من می‌خواستم. و اما کدی که ژنراتور جکیل برای یک بلاک عکس تولید می‌کرد حاوی یک تگ `p` و یک تگ `img` داخل اون بود. به این صورت:

~~~ html
<p>
<img href="" alt=""/>
</p>
~~~

که این کد خروجی سینتکس زیر در کد من بود:


~~~ markdown
![image](URL)
~~~


اشکال اینجا بود که تگ‌های تولید شده کلاس یا آی‌دی خاصی نداشتند که من بتونم میون انبوه کدهای تولید شده برای صفحه اونها رو پیدا کنم. اینجا بود که IAL به کمکم اومد. بعد از ثبت یک ایشو در جکیل و بعد یک ایشو در kramdown بالاخره به جواب رسیدم. به این صورت که من می‌تونم به فرمت زیر قبل از یک بلاک عکس (یا هر بلاک دیگری) یک کلاس دلخواه رو به تگ تولید شده نسبت بدم:

~~~ kramdown
{: .center}
![image](URL)
~~~

`center` در اینجا اسم دلخواهیه که من انتخاب کردم. بعد از این مرحله خروجی کد شد این:



~~~ html
<p class="center">
<img href="" alt=""/>
</p>
~~~

ناگفته پیداست که حالا من می‌تونم در کد `css` براحتی استایل دلخواهم رو به این کلاس نسبت بدم:

~~~ css
.center{
    text-align: center;
}
~~~

چند مثال هم از مستندات خودشون:

~~~ kramdown
A simple paragraph with an ID attribute.
{: #para-one}

> A blockquote with a title
{:title="The blockquote title"}
{: #myid}

{:.ruby}
    Some code here
~~~

## خلاصه
به کمک این روش می‌شه براحتی *attribute*هایی برای المان‌های مختلف الصاق کرد. فقط کافیه که *بلافاصله* قبل یا بعد از المان مربوطه کد IAL لازم نوشته بشه.