Skip to main content

Write Markdown Preview Codes From Scratch In JavaScript

Hello Friends,



Welcome Again To Blog. Friends, 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?

Ans.

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.


METHOD To Use:
 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">

  http://cdn.jsdelivr.net/gh/surajsinghbisht054/mdviewer/js/bitforestinfo_md_viewer.js
  <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
   bindkey();
   // Or Manually, Call
   preview();

  </script>


 [ --- 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

Related Post

Top Visited

Create Simple Packet Sniffer Using Python

how to install burp suite in Linux/Ubuntu 16.04

Big List Of Google Dorks For Sqli Injection

List of Keyboard Shortcuts Keys for GNOME Desktop (Kali linux / Linux / Ubuntu/*nix )

How to create Phishing Page Using Kali Linux | Webpage Page Cloning Using Kali Linux Social Engineering Toolkit

Latest Google Dorks List

Best 1000 User-agents List For Web Scraping

How To Install GDB Peda?

What is the use of Pseudo header in TCP/UDP packets?

How To Create Snake Game Using Python And Tkinter - Simple python games