What this is about

I take my notes in the markdown language because it's hard to write your thoughts directly in html and css. To publish my markdown notes on the web requires converting them to HTML. For this, I extended the python-markdown library with my own custom extensions and later post-processed it with lxml. This conversion gives me an HTML document tree derived from my markdown notes, which then needs CSS to prettify its appearance. The elements you are seeing below are actually my notes written in markdown, converted to HTML, and styled with CSS using the popular Tailwind CSS library.

Following is the way markdown components are being displayed on this blog,

Heading 1

# Heading 1, this is the text which is used to produce above H1 (Heading 1).

Heading 2

## Heading 2, this is the text which is used to produce above H2 (Heading 2).

Heading 3

### Heading 3, this is the text which is used to produce above H3 (Heading 3).

--- syntax to produce a horizontal line in html (shown above).

The followings are examples of paragraphs,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod aliquam dolor in feugiat. Donec efficitur a eros non maximus. Ut non tristique massa. Vestibulum at risus ut ante varius sollicitudin. Maecenas faucibus nibh sem, vulputate vulputate enim blandit vitae.

Sed magna massa, sagittis ac malesuada eu, ullamcorper sit amet leo. Nunc bibendum mi non risus placerat, id pharetra enim eleifend. Mauris ut diam vitae mauris pellentesque rutrum. After this paragraph 2 lines are left blank on purpose to check how they are being rendered in html.

Vestibulum eleifend, tellus vitae eleifend tristique, turpis tellus convallis leo, vel porttitor ante nunc blandit dolor.br tag coming <br>
In rhoncus nisl lacus, br tag coming <br>
vestibulum luctus metus bibendum quis. Mauris interdum diam ac eros sagittis, sed efficitur arcu dictum. Curabitur faucibus ligula eget quam consequat rutrum

<br> syntax to produce a line break in html.

<hr> syntax to produce a horizontal line in html.

Code Blocks (H3)

An example of Python code,

class Person:
    def __init__(self, *args, **kwargs):
        pass

if __name__ == "__main__":
    p = Person()
    print(p)

An example of JavaScript code,

const list = ["apple", "banana", "cherry"];

for (let i = 0; i < list.length; i++) {  
    console.log(list[i]);  
}

Mermaid Chart Example

An Example of Ordered List

This is how order list looks like

1. Element 1
2. Element 2
3. Element 3
   1. Element 3.1
   2. Element 3.2
      1. Element 3.2.1
      2. Element 3.2.2 (Pyyogi) An External Link
   3. Element 3.3
4. Element 4
5. Element 5 (An obsidian way to link to internal post)

An Example of Refrences

This is an example of footnote¹.

An Example of Unordered List

Here how an unordered list looks like

• Element 1
• Element 2 (Bold)
• Element 3
  • Element 3.1 (Italic)
  • Element 3.2
• Element 4 (Highlight)
• Element 5
  • Element 5.1
    • Element 5.1.1 (Code Element)
    • Element 5.1.2
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra tincidunt porttitor. Etiam eget sem sit amet erat blandit sagittis.
• Element 6
• Element 7 (#Hashtag)

This is how a blockquote looks like

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra tincidunt porttitor. Etiam eget sem sit amet erat blandit sagittis. Vestibulum non luctus risus, ut aliquet nibh. Duis vulputate magna id augue pulvinar, a scelerisque neque porta. Duis vitae pretium ipsum.

Hello, this is an extended multiline blockquote using > syntax on empty line.

Other elements inside a blockquote

The quarterly results look great!

• Revenue was off the chart.
• Profits were higher than ever.

Everything is going according to plan.

This Is How Table a Looks Like

This is the table containing basic markdown syntax.