Markdown

Table of Contents

25 Jul 2022

Started to learn about the Markdown format and migrating all my note-taking to Markdown files.
This will allow me to leverage app-independent files which can be used for AI and other programmatic tasks.

GitHub Pages Markdown Reference
https://www.markdownguide.org/tools/github-pages/

12 Mar 2023

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>

Markdown Symbols

Headers

  • # (Header level 1, can use multiple # for levels 2-6)

Emphasis

  • * or _ (italic: *text* or _text_)
  • ** or __ (bold: **text** or __text__)
  • *** or ___ (bold and italic: ***text*** or ___text___)

Lists

  • - or * (unordered list)
  • 1. (ordered list)
  • [ ] (link text, e.g., [link text])
  • ( ) (URL, e.g., [link text](URL))
  • ![ ] (image text, e.g., ![alt text](URL))

Blockquotes

  • > (block quote)

Code

  • ` (inline code: `code`)
  • ``` (code block: ```code block```)

Horizontal Rule

  • --- or *** or ___ (horizontal line)

Tables

  • | (table columns, e.g., | column1 | column2 |)
  • - (divider in table headers: | --- | --- |)

Escaping Characters

  • \ (escape special characters, e.g., \*not italic\*)

Now using \# for headers within my Markdown notes, where I don't want the header to be rendered as a header.

Strikethrough

  • ~~ (e.g., ~~text~~)

Task Lists

  • - [ ] (unchecked item)
  • - [x] (checked item)

Footnotes

  • [^1] (footnote marker)
  • [1]: URL (reference for the marker)

Definition Lists (GFM)

  • : (e.g., Term : Definition)
  • <URL> (e.g., <https://example.com>)

HTML Tags

  • <tag> (e.g., <b>bold</b>)

Special Syntax Extensions (depending on implementation)

  • ~~ (strikethrough)
  • ^ (superscript, e.g., H^2^O)
  • ~ (subscript, e.g., X~2~)

links

social