kramdown

طی هفته‌های گذشته مشغول راه‌اندازی این وبسایت بودم. مثل هر پروژه دیگری کلی مطلب در طول انجام اینکار یاد گرفتم، فرآیندی که همچنان ادامه داره. یکی از این موارد آشنایی با kramdown بود.

#یک پارسِر دیگر مارک‌داون kramdown در ساده‌ترین حالت یک پارسِر مارک‌داون محسوب می‌شه اما ویژگی‌هایی هم داره که در مارک‌داون وجود نداره. من به طور خاص از ویژگی Inline Attribute Lists صحبت می‌کنم.

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

markdown: kramdown

این باعث می‌شه که جکیل کد صفحات من را با پارسِر درست ترجمه کنه و بنابراین من می‌تونم از سینتکس اون استفاده کنم.

مشکل از کجا شروع شد

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

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

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

![image](URL)

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

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

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

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

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

.center{
    text-align: center;
}

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

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 لازم نوشته بشه.