Write Markdown Preview Codes From Scratch In JavaScript

Posted by Suraj Singh on December 31, 2018 · 8 mins read
Hello readers,

Welcome Again To Blog. readers, Today I am going To Share Information About Another Under Development JavaScript Project Called, MDViewer.

So, Let's Start Our Q/A From Bottom To Top.

Q 1. What is Markdown?

Ans. According To Wikipedia .  Markdown is a lightweight markup language with plain text formatting syntax. ... Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor. Read More


Q 2. What is Markdown Preview concept?

Ans. In Simple words, Converting Markdown Text Into HTML Element Or Any Other Format To View. For More Info, Check Above Provided Wikipedia Link.

Q 3. Tell Me Something About MDViewer?

Ans. I Created This Project Just For Fun, Practice And May Be for Any Type Of Profit. In this project, my goal was to convert simple Markdown Text And Preview Those Codes As HTML Converted Preview. So, i wrote function, that takes markdown text as input and return HTML tag string output.
So, now after all of my hardwork, now You Can Use This Project JavaScript code Directly Anywhere To Convert Your Markdown Text Into HTML Elements.

Please Note: Project is Still Under Development, And Full of Bugs.

Link To Project. Click here

Q 4. How its Works?

Ans. Actually, I am little mad boy, That's Why I wrote these JavaScript Codes from completely scratch (Even not saw/study anyone else related project. So, here are complete chance that my code solution can blow your mind... hahaha). I Used Lots of Regular Expression Functions, Many JavaScript Other Built-In Functions To Achieve My Goals.

Actually, i am still a noob, so forgive me if i have used any wrong code here in this script. but please Please, don't forget to email me if you have anything good comment about my codes or Any type of suggestions about my codes.

Q 5. How We Can Use These JavaScript codes?


I Used HTML Element <textarea> as an Input Source, And <div> as Output Preview Tag. 
I used lots of own wrote regular expressions and functions to split,join,test,find,slice,format
and much More.

Use <textarea id="MDEditor"> as Input.
Use <div id="MDViewerPreview"> as Output.

Add Header:

http://cdn.jsdelivr.net/gh/surajsinghbisht054/mdviewer/css/mdviewer.css <== Not That Important
<link rel="stylesheet" type="text/css" href="./css/mdviewer.css">

<script src="./js/bitforestinfo_md_viewer.js"></script>

Add In Bottom:

<script type="text/javascript">
// Bind Keys To Automatically Trigger Preveiw Function, At Every Key press event
// Or Manually, Call


[ --- If You Want To Use Internal Functionality In Custom Way, Then ]

// Call Markdown To html Conversion function
var nodes = MDTOHTML(inptext, outtext);

// Parameters:
// inptext is a object = document.getElementById(<textarea>);
// outtext is a object = document.getElementById(<div>);
// nodes is return object, its a HTML tag string.
// if nodes
if (nodes) {
outtext.innerHTML = nodes;
// Simple~

Q 6. Currently, Supported Syntax?

 Supported Syntaxes 

  • :- ALL Headers (#, ##, ###...)        
  • :- Horizontal Lines (---,***, ___)        
  • :- Alt heading (##\n===)        
  • :- Code Blocks        
  • :- Bold, Italic, Strike        
  • :- Links        
  • :- Inline Codes        
  • :- Indent Codes        
  • :- Table        
  • :- order List        
  • :- UnOrder List 

Q 7. Live Demo? 

Here, I am try to show you Live Demo. If Your Browser Not Showing Things Correctly, Then I would suggest you to Go To MDViewer Repo, Download And Test it Locally.
Link To Project. Click here

Link To Project. Click here