To prepare

What you need

Markdown “interpreter” : Easy to handle text input and live preview

Bootstrap Template: The proposed H5 interface doesn’t look pretty, so use this framework to spruce it up.

Sublime Text: Can also be notepad or any other Text editor, this is the tool we use to write the processing logic.

Simple version of

We can create a folder on the desktop for easy management.

Then extract the markdown-JS/Releases file and place it in this folder.

Create an HTML file as follows:



  
    Type **Markdown** here.
    
        
 
        

    
    
  
Copy the code

Beautify the version

This interface is really ugly, so add some beautification effect. Bootstrap is used here.






  
    Type **Markdown** here.
    
        
 
        

    
    
  
Copy the code

Enhanced version

That didn’t look good enough for the layout or anything, so I added elements.

Markdown local practice
        


  
         Hey, enter the Markdown statement on the left and preview in real time on the right
        



        




    
    
    

Copy the code

The effect is as follows:

Review images

conclusion

I believe you can see that although it has been enhanced, but this is not the limit of this small program. We can use JavaScript and Bootstrap to make the page look better.