add attributes (class, id) in markdown

Applies to markdown library. Need to figure out how to leverage this in Pelican. Building a static site with Pelican

Example of how to use the attr_list extension to add attributes to HTML elements in Markdown:

# My Heading {#heading-id .custom-class}

This is a paragraph with some text.

Another paragraph.

- Item 1 {#item1 .done}
- Item 2 {#item2}

In this example, we have added attributes to the h1, li, and ol elements using the following syntax:

{#id}: Adds an id attribute to the element with the specified value.
{.class}: Adds one or more classes to the element with the specified values.

When we convert this Markdown to HTML using the markdown library with the attr_list extension, we get the following HTML:

<h1 id="heading-id" class="custom-class">My Heading</h1>

<p>This is a paragraph with some text.</p>

<p>Another paragraph.</p>

<ul>
<li id="item1" class="done">Item 1</li>
<li id="item2">Item 2</li>
</ul>

you can use the attr_list extension to add a class or other attributes to the table element in Markdown. Here's an example:

| Column 1 | Column 2 |
|----------|----------|
| Row 1    | Row 1    |
| Row 2    | Row 2    |
{:class="my-table-class"}

In this example, we define a table with two columns and two rows, and add the {:class="my-table-class"} attribute list at the end of the table definition. This adds the class="my-table-class" attribute to the resulting table element in the HTML output.

When this Markdown is converted to HTML using the markdown library with the attr_list extension, the resulting HTML will include the following table element:

<table class="my-table-class">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
</tr>
</tbody>
</table>

add attributes (class, id) in markdown

links

social