# <center>A MarkDown to Html engine</center>
----

**Last edited at** {{datetime}}  
## 1.Overview

**Markdown** is a great tool for easily making formatted text files that display across a variety of platforms.
 It’s popular with technical writers for its ease of use and relatively short learning curve.  

Below is a tutorial video for **Learning Markdown in 30 minutes!**

[![Less Than Jake — Scott Farcas Takes It On The Chin](https://img.youtube.com/vi/bTVIMt3XllM/0.jpg)](https://www.youtube.com/watch?v=bTVIMt3XllMI)

**The MD2Html engine** which I wrapped with <font size=5 color=red>❤</font> B4x is based on the [commonMark](https://commonmark.org/), 
**Two features** are extended, one is Emoji Shortcode support, another is tables simple implementation.



## 2.Features

* __Emoji Shortcode__

 Emoji shortcodes are which begin and end with a colon and include the name of an emoji.
<font size=6>
| Short code      | Emoji |
| ----------- | ----------- |
| \:sunny:     |<font color=yellow> :sunny:  </font>  |
| \:heart:   |  <font color=red>:heart:  </font>   |
</font>

You can find all of them from [Github](https://github.com/markdown-templates/markdown-emojis)



* __Tables__

To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column.  
\| Syntax      \| Description \|  
\| ---- \| --- \|  
\| Header      \| Title   \|  
\| Paragraph   \| Text  \|  


| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |


**Note**: Alignment feature doesn't be supported  

## 3.How to use it

**Markdown Basic Syntax** to see below :

 [![Image](https://commonmark.org/help/images/favicon.png)](https://www.markdownguide.org/basic-syntax/)  

It is very simple to use it in B4J server.

I have attached the md2html library  and an example which adapted from Erel's BBCodeDesigner.  

---
<details>
  <summary><font size=5><strong>Click me to see example</strong></font></summary>   

---
<center><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.2N-_aSJ3zwr_2Xy48bYvkAHaDi?pid=ImgDet&rs=1" height=200 style="border-radius: 5px;object-fit:cover"></center>  

 
---  

# Tailwind CSS

Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

![Tailwind CSS Tutorial](https://media.geeksforgeeks.org/wp-content/cdn-uploads/20211110050115/Tailwind-CSS-Tutorial.png)

## Why Tailwind CSS ?

As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. Tailwind has come with inbuilt a lot of features and styles for users to choose from and is also used to reduce the tendency of writing CSS code and create a beautiful custom UI. It will help you to overcome the complicated task. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

### Installation of Tailwind CSS:

Basically Tailwind is available on npm and you can install it using following command:

>npm install tailwindcss

After that create ad Tailwind configuration file using the following command:

>npm tailwind init {name of file}

or

You can install tailwind by using the yarn command:

>yarn add tailwindcss

After that create ad Tailwind configuration file using the following command:

>yarn tailwind init {name of file}

**Example**: It is a basic example of Tailwind CSS that describe how to change background color on mouse hover.

```html
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body>
    <div class="h-full border-2 border-gray-200
                border-opacity-60 rounded-lg
                overflow-hidden">
 
        <div class="p-6 hover:bg-green-600
                    hover:text-white transition
                    duration-300 ease-in">
 
            <h1 class="text-2xl font-semibold mb-3">
                Hover
            </h1>
        </div>
    </div>
</body>
 
</html>
```
**Output:**

![](https://media.geeksforgeeks.org/wp-content/cdn-uploads/20211115175042/20211115_174951.gif)

### Advantages:

* Highly Customizable.
* Enables building complex responsive layout.
* Responsive and development is easy.
* Components creation is easy.

### Disadvantages:

* There is missing headers, navigation components.
* It take time to learn how to implement inbuilt classes.

</details>  

---

## Hope you enjoy it!