Make your own Markdown Converter (with new Features) - Part 1
Tags: programming, python, markdown, regex
Published: 2021-05-25 20:44:59

Hello ;D
this a simple post about `how to make your own Markdown parser`, in part 2 we will make a awesome markdown Parser/Features

### how Markdown Conveter Works
##### we well know simple things in this part of our post (Just the basics, preparation for the second part)
***
1- Heading
2- Include images
3- Links
***

### Heading `#`
you can add Heading with Big font by one `#` after repeated, the line will be smaller by a count of `#`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xl4r38qefgjm2p3996e.png)


* Convert to HTML

First: get the first word in the line (`by space`) and count the `#` and add the count of `#` in `<h>` tag , for example
`### Hello` it's will converted to `<h3>Hello</h3>`



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbz5j8tc96dobia9o3ir.jpg)


* Code

```python

data = '### Hello'

def geth(txt):
    c = txt.split(' ')[0].count('#')
    if c == 0 or c > 6:
        return txt
    else:
        v = f'<h{c}>{"".join(txt.split(" ")[1:])}</h{c}>'
        return v


results = geth(data)
print(results)
```

### Include Images/Links
you can add images by `![ALT TEXT](IMAGE LINK)`

* Convert to HTML
Get The Content of `[]` and add it to `alt` variable in `<img>` tag , same thing with `()` but add it in `src` variable, same thins with links but you need to remove `!` before `[]`

`<a href=LINK>NAME</a>`

sadly, to parse this we need Regex :)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ex0xs1nk6vo6hzj5wru.png)

Regex it's scary thing for many programmers (like me) because we are too lazy to learn it (or we learn it when stuck with it in our code)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zel8tpwvdjpd4lxq4sx5.png)

---

here the regex we will use `!\[[^\]]*\](.*?)\s*("(?:.*[^"])")?\s*\)`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afw7wpjokpos2z3jhp05.png)


* Code

```python
import re
def getlnk(txt):
    sub = ''
    r = re.search(r'\[[^\]]*\](.*?)\s*("(?:.*[^"])")?\s*\)',txt)
    if r:
        c = r.group()
        # get the content of []
        name = re.findall(r'!\[(.*?)\](|. .)[(].*[)]',c)
        # get the content of ()
        link = re.findall(r'[(].*[)]',c)[0]
        link = link.replace(link[0],'').replace(link[-1],'')
        # add the link and name
        sub += f'<a href="{link}">{name}</a>'
    return sub

# like getlnk function but with ! and <img> Tag
def getimg(txt):
    sub = ''
    r = re.search(r'!\[[^\]]*\](.*?)\s*("(?:.*[^"])")?\s*\)',txt)
    if r:
        c = r.group()
        alt = re.findall(r'!\[(.*?)\](|. .)[(].*[)]',c)
        link = re.findall(r'[(].*[)]',c)[0]
        link = link.replace(link[0],'').replace(link[-1],'')
        sub += f"<img src='{link}' alt='{alt[0][0]}' />"
    return sub



print(getlnk('[Google](http://google.com)'))
print(getimg('![Google Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1280px-Google_2015_logo.svg.png)'))


# Results
# <a href="http://google.com">Google</a>
# <img src="https%3A//upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1280px-Google_2015_logo.svg.png" alt="Google Logo" />
```

***
## See you in part 2
### Bye :D