Today’s new knowledge #8(Markdown)

Today’s Overview:

Hello again everyone ❤❤❤! Hope you're all doing well. I've been super busy these past two days with an assignment for my advanced web development course, which left me with little time to write a blog post. As part of the assignment, i have to deep dive into markdown language. so i decided to write a blog post about what i learned about markdown language. I hope you find it useful and hope you guys like it.

Table of contents

• What is Markdown?
• why developers use markdown?
• Table of contents
  • Few things to note for TOC in markdown
• Headings
• Bold
• Italic
• Links
• Images
• Code
  • Escaping Backticks
  • Code Blocks
• ordered list
• unordered list
• Checkbox
• Table
• Horizontal line
• Emoji
• Html
• Methamatical expression

What is Markdown?

Markdown is a text-to-HTML conversion tool for web writers. It allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to well-formatted HTML. For more details, check out the Markdownguide website.

Why developers use markdown?

It allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to well-formatted HTML.

• It is easy to read and write
• It is easy to convert to HTML
• It is easy to share
• It is easy to search
• It is easy to edit
• It is easy to learn

Table of contents in markdown

For every proper documentation, we need a table of contents. It is easy to create a table of contents in markdown. Here is an example:

- [Today’s Overview](#todays-overview)

• Today’s Overview

If you click this link, you will be redirected to the top of the page. This is a very useful feature for users who want to quickly navigate through the documentation.

Few things to note for Table of contents in markdown:

1. Follow Anchor ID Generation Rules

Markdown parsers automatically generate anchor IDs from headings. To ensure links in your ToC work, follow these rules:

• Convert text to lowercase.
• Replace spaces with hyphens (-)
• Anchor IDs should be hyphenated
• Remove special characters (like ?, !, #, etc.).

[what is markdown](#what-is-markdown)

## What is Markdown?

2. Avoid Duplicate Section Names

If multiple headings have the same name, Markdown parsers usually append a unique number (e.g., -1, -2) to their IDs. Avoid this by making your section titles unique.

toc:
[installation](#installation)
[installation](#installation-1)

## Installation

## Installation

3. Use a Logical Structure

Arrange the ToC to match the document's hierarchy, using indentation for subsections:

• Top-level sections are unindented.
  • Subsections are indented.

## Table of Contents

- [Introduction](#introduction)
- [Getting Started](#getting-started)
  - [Installation](#installation)
  - [Setup](#setup)
- [Conclusion](#conclusion)

4. Use a Logical Structure

Ensure the order of links in your ToC matches the order of sections in your document to avoid confusion.

5. Optional: Number the Sections

If your document is lengthy, numbering sections in the ToC can help with navigation.

## Table of Contents

1. [Introduction](#introduction)
2. [Getting Started](#getting-started)
   2.1. [Installation](#installation)
   2.2. [Setup](#setup)
3. [Usage](#usage)
4. [Conclusion](#conclusion)

Headings in markdown

Headings are important in markdown because they allow you to create sections in your document.

- # Heading 1
- ## Heading 2
- ### Heading 3
- #### Heading 4
- ##### Heading 5
- ###### Heading 6

output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Bold text in markdown

Headings are important in markdown because they allow you to create sections in your document.

**bold text 1**

output:

bold text 1

Italic text in markdown

_italic text 1_

output:

italic text 1

Link in markdown

For various perpose we need to add link in markdown.

[kishor github](https://github.com/SDKishor)

output:

kishor github

Link with Title (Tooltip)

[kishor github](https://github.com/SDKishor "kishor github profile")

output:

if you hover over the link, you will see the tooltip

kishor github

Image in markdown

To add an image in markdown, you can use the following syntax:

#syntax
![Alt Text](url)

#example
![markdown](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsTfXwY_1HFsyuMhX0ajaCCv_ZsKlUb9k0kA&s)

output:

Image with hyperlink

[![markdown](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsTfXwY_1HFsyuMhX0ajaCCv_ZsKlUb9k0kA&s)](https://en.wikipedia.org/wiki/Markdown)

output:

if you click on the image, you will be redirected to the link

Code in markdown

To indicate code, surround it with backticks ( ` ).

#syntax
`code`

output:

code

Escaping Backticks

If you want to use backticks inside a code block, you can escape them by doubling them.

#syntax
`` `code` ``

output:

`code`

Code blocks

To add a code block in markdown, you can use the following syntax:

#syntax
`javascript
      console.log("hello world");
      `

output:

console.log("hello world");

Tips: In order to highlight the code, you can add language name at the start of the backticks

ordered list in markdown

To add an ordered list in markdown, you can use the following syntax:

#syntax

1. item 1
2. item 2
3. item 3

output:

1. item 1
2. item 2
3. item 3

unordered list in markdown

To add an unordered list in markdown, you can use the following syntax:

#syntax

- item 1
- item 2
- item 3

output:

• item 1
• item 2
• item 3

Checklist in markdown

To add a checklist in markdown, you can use the following syntax:

#syntax

- [x] item 1
- [ ] item 2
- [ ] item 3

output:

• [x] item 1
• [ ] item 2
• [ ] item 3

Table in markdown

To add a table in markdown, you can use the following syntax:

#syntax

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Row 1    | Row 2    | Row 3    |
| Row 4    | Row 5    | Row 6    |

output:

Column 1	Column 2	Column 3
Row 1	Row 2	Row 3
Row 4	Row 5	Row 6

Table with alignment

To add a table with alignment you have to a column with : at the 2nd column.

#syntax

| Column 1 | Column 2 | Column 3 |
| :------- | :------: | -------: |
| Row 1    |  Row 2   |    Row 3 |
| Row 4    |  Row 5   |    Row 6 |

output:

left aligned, center aligned and right aligned
| Column 1 | Column 2 | Column 3 |
| :-------- | :--------: | --------: |
| Row 1 | Row 2 | Row 3 |

| Row 4 | Row 5 | Row 6 |

Horizontal line in markdown

To add a horizontal line in markdown, you can use the following syntax:

#syntax

---

output:

Horizontal line

---

_Note: You can also use *** or ___ instead of --- & add space at the start and end of the line._

Emoji in markdown

To add an emoji in markdown, you can use the following syntax:

#syntax

:smile:

output:

😄

HTML in markdown

Yes, you can add HTML in the markdown. But, it is not recommended. It is better to use the HTML tags in your HTML file.

#syntax

<p>hello world</p>

output:

hello world

Audio and Video in markdown

Markdown itself doesn’t natively support embedding audio and videos, but you can use HTML or platform-specific extensions to add audio and videos in Markdown.

Embedding Audio and Videos with HTML

#syntax

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="audio-file-url.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

output:

Your browser does not support the audio element.

Methamatical expression in markdown

To add a methamatical expression in markdown, you can use the following syntax:

#syntax

**inline**
$ x^2 + y^2 = z^2 $

**block**

$$
x^2 + y^2 = z^2
$$

output:

inline

$ x^2 + y^2 = z^2 $

block

$$
x^2 + y^2 = z^2
$$

Conclusion

That's it. I hope this article has been helpful to you. If you have any questions or suggestions, please leave a comment below.