An example of markdown text with kramdown attribute lists.

Add kramdown Attributes with Jekyll or Bridgetown

  • Adam Douglas

Markdown is great file format to help simplify the process of creating, and focusing on the content itself. However, at times we need to set attributes on the text, lists, images, etc. that we end up writing for a website. Static site generators such as Jekyll or Bridgetown use a Markdown parser, and converter called kramdown. Using kramdown provides a way to set attributes without having to use HTML code.

What is kramdown?

A software parser, and converter that written in the Ruby language. Text is read by kramdown, and if formatted with the correct syntax will convert Markdown to another file format such as HTML.

The Basics

To assign attributes to an element when converted to HTML, the syntax must start with {: and end with }.

{: }

To add a CSS class (table-hover), and then a CSS identifier (custom), one would do it like so.

{:.table-hover #custom}

Specific attributes can be added by the attribute name, equal sign, and then enclosing the value within double quotes.

{:title="View source"}

Add multiple attributes at once.

{: .table-striped .table-hover .mb-4 #custom }

Block Attributes

On a new line directly following a block-level element place the desired attribute list. Here is an example where the CSS class attribute will bet set with three class styles onto a table in Markdown, and then what it will look like converted to HTML.

1
2
3
4

Model | SDSQUA4-128GB-CCCMB
Capacity | 128GB
Dimensions (L x W x H) | 0.04" x 0.59" x 0.43"
{: .table-striped .table-hover .mb-4 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table class="table-striped table-hover mb-4">
  <tbody>
    <tr>
      <td>Model</td>
      <td>SDSQUA4-128GB-CCCMB</td>
    </tr>
    <tr>
      <td>Capacity</td>
      <td>128GB</td>
    </tr>
    <tr>
      <td>Dimensions (L x W x H)</td>
      <td>0.04” x 0.59” x 0.43”</td>
    </tr>
  </tbody>
</table>

Inline Attributes

Similar to block-level attributes, the attribute list must follow directly after a span-level element. Here are a few examples of an image, paragraph, and link in Markdown, and then the output converted to HTML.

Image

1

![Select device in GParted.]](/assets/img/website-logo.webp){:width="795" height="125" loading="lazy" .img-fluid}

1

<img src="/assets/img/posts/gparted-select-device.webp" alt="Select device in GParted." class="img-fluid" loading="lazy" width="795" height="125">

Paragraph

1

I’m publishing this as part of *100 Days To Offload*{:.text-decoration-underline}.

1

<p>I’m publishing this as part of <em class="text-decoration-underline">100 Days To Offload</em>.</p>

1

[100DaysToOffload.com](https://100daystooffload.com){:title="View website"}

1

<a href="https://100daystooffload.com" title="View website">100DaysToOffload.com</a>

This is post 71 of 100, and is round 2 of the 100 Days To Offload challenge.

    • Refactor post title
    • Fix broken link
    • change topic
    • change 100DaysToOffload message

Comments

Reply via email