Web Development

How to use Markdown in Web Development?

As a web developer, we often write lots of text into the HTML code, which is really tiring. How about I tell you that there is a better way in which you can only focus on the content but not the code?

Markdown file can be directly exported into HTML file.

Below are the magic


Heading

Markdown Input:

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

HTML Output:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs:

Markdown Input:

Master in Tech is fantastic!
This tutorial is very helpful.

HTML Output:

<p>Master in Tech is fantastic</p>
<p>This tutorial is very helpful.</p>

Mark emphasis:

Markdown Input:

*Italic Text*
**Bold Text**

HTML Output:

<em>Italic Text</em>
<strong>Bold Text</strong>

Horizontal rules

Markdown Input:

Learning something new is always a lot of fun.

---

It sure is!

HTML Output:

<p>Learning something new is always a lot fun.</p>
<hr>
<p>It sure is!</p>

Add images and links

Markdown Input:

![Alt Text](/path/to/image.jpg "Optional Title")
[Link Text](http://example.com "Optional Title")

HTML Output:

<img src="/path/to/image.jpg" alt="Alt Text" title="Optional Title"/>
<a href="http://example.com" title="Optional Title">Link Text</a>

Lists

Markdown Input:

1. Item 1
2. Item 2
* First Item
* Second Item
- First Item
- Second Item

HTML Output:

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>

Inline code and code blocks

Markdown Input:

The `numberOfPoints` variable holds the player's score.
if player.wins {
numberOfPoints += 1
}

HTML Output:

The <code>numberOfPoints</code> variable holds the player's score.
<pre><code>
if player.wins {
numberOfPoints += 1
}
</pre></code>

1 thought on “Web Development

Leave a Reply

Your email address will not be published. Required fields are marked *