Let's create a Markdown editor just like dev.to
Tags: php, webdev, programming, javascript
Published: 2022-03-25 08:21:24

### Hey Guys, Let's create a Markdown like dev.to website and process the markdown data to html

So In this post We are going to make a editor with a textarea and when you click process the processed html content will appear... !

If you are more of a listening, following along person you can watch the video, where I have done the live demonstration of this web app

And As Always you can always find the whole code in the end section of my posts 

{% embed https://www.youtube.com/watch?v=ncgrmnJuAcY&ab_channel=VAcoder%5BTech%5D %}

So Let's Dive


# 1) Creating the frontend part

Here we will create a simple `index.php` file for frontend with a simple form with a textarea and a button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx3m14xfz4l9ozeifwtr.png)

Here we have given `textarea` name as textArea and `button` name as submitData so we can process the data in backend part

This is it for the frontend part.... !


# 2) Let's write our backend

So for parsing the data we will use [parsedown] (https://parsedown.org/) It is written in PHP which is actually 6x faster than normal parsers... So I think this is best for parsing our data


so first will write the following in our terminal or cmd to install packages using composer ( Composer is a dependency management tool for PHP )

`$ composer init`

And then you can just do enter enter enter enter for whatever it asks....


Next...

`$ composer require erusev/parsedown`

This command will download all the dependencies we need for our web app.

So now let's write the code open up the php tags at the top of your website and import the Parsdown package


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omi50q4sfrpt1hzr99ao.png)

Next we need to get the post data submitted by the user

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9kygxywcnjucehfdl93.png)


at line 5 - We are checking whether the user has clicked the process data button or not

if the condition turns out to be true we instantiate our `Parsedown` class

and then we get the user submitted data into our `$textToParse` variable and the show the output using 
`echo $Parsedown->text($_POST["textArea"]);`

Yeahhhhh !! now your web app is ready to test

Open up your terminal and start the server:

`$ php -S localhost:8000`

INPUT

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aucdl2u5wgy8g2bwiuno.png)

OUTPUT

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3zinjel2dyte2tms7k6.png)
  
Thank you for reading this... !


```

<?php

require "./vendor/erusev/parsedown/Parsedown.php";

if(isset($_POST["submitData"])) {
    $Parsedown = new Parsedown();
    $textToParse = $_POST["textArea"];
    echo $Parsedown->text($_POST["textArea"]);
}

?>
<div>
    <form action="" method="POST">
        <textarea name="textArea" id="textArea" cols="80" rows="40"></textarea>
        <button name="submitData">Process Markdown</button>
    </form>
</div>


```


Hope you like, share it with your friends too !