1. Tutorials
  2. JavaScript Tutorial
  3. How to Create a Markdown Previewer Application using HTML, CSS, and JS?

How to Create a Markdown Previewer Application using HTML, CSS, and JS?

Submitted by oretnom23 on Saturday, November 30, 2024 - 14:50.

In this detailed step-by-step tutorial, I will guide you through the process of creating a simple yet powerful Markdown Previewer Application using HTML, CSS, and JavaScript. This web application will allow users to write and preview Markdown content in real-time. Throughout the tutorial, we'll integrate popular JavaScript libraries, including Marked for parsing and converting Markdown syntax into HTML and CodeMirror for providing an enhanced code editor experience with syntax highlighting and live preview functionality. By the end of this guide, you’ll have a fully functional Markdown Previewer that you can customize and deploy for your personal or professional projects. Whether you're a beginner looking to enhance your front-end development skills or an experienced developer seeking a quick solution, this tutorial will provide you with a solid foundation for building web applications using HTML, CSS, and JavaScript.

About the Markdown Previewer Application

The Markdown Previewer Application is a straightforward yet highly functional web application that enables end-users to easily input Markdown content into a designated textarea or code editor on the page. As users type, the application instantly converts the Markdown syntax into clean, formatted HTML, which is then displayed in real-time on another section of the page. This seamless and interactive process allows users to see immediate results, making it an invaluable tool for developers, writers, and anyone working with Markdown. The live preview feature ensures that users can quickly check how their content will look when rendered, saving time and enhancing the overall user experience. Whether you're creating documentation, writing blog posts, or preparing content for web pages, this Markdown Previewer simplifies the task of visualizing Markdown content effortlessly.

Additionally, the source code for the Markdown Previewer Application that I will provide in this tutorial makes use of Bootstrap and jQuery libraries to enhance the user interface and functionality. These libraries are seamlessly integrated into the application through CDNs (Content Delivery Networks), ensuring that they load quickly and efficiently without the need for local hosting.

Let's Begin

First, let's create a new stylesheet file for the Markdown Previewer Application. In this tutorial, I have named the file styles.css, and it will be located in the assets/css directory of your project. This stylesheet will handle the design and layout of various elements in the application, ensuring that it has a clean, modern, and user-friendly interface.

  1.     @import url('https://fonts.googleapis.com/css2?family=Revalia&display=swap');
  2.  
  3.     * {
  4.     box-sizing: border-box;
  5.     }
  6.  
  7.     html,
  8.     body {
  9.     width: 100%;
  10.     height: 100%;
  11.     max-height: 100%;
  12.     font-family: "Revalia", sans-serif;
  13.     font-weight: 400;
  14.     font-style: normal;
  15.     }
  16.  
  17.     body {
  18.     background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  19.     }
  20.     div#main-wrapper {
  21.     display: flex;
  22.     flex-flow: column;
  23.     overflow: auto;
  24.     }
  25.     #page-title {
  26.     width: 100%;
  27.     display: flex;
  28.     justify-content: center;
  29.     padding: 20px 15px;
  30.     color: #fff;
  31.     }
  32.     iframe#md-output {
  33.     background: #eaeaea;
  34.     width: 100%;
  35.     height: 100%;
  36.     }
  37.     .CodeMirror, iframe#md-output
  38.     {
  39.     min-height: 300px;
  40.     }

Next, let’s create the HTML file for the application, which in this case will be named index.html. This file will contain all the necessary HTML elements, including a textarea for the user to input Markdown content, and a separate output container where the converted Markdown will be displayed in real-time as HTML.

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Markdown Previewer Application</title>
  8.         <!-- Bootstrap CSS CDN -->
  9.         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  10.            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  11.         <!-- Codemirror CSS -->
  12.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css"
  13.            integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
  14.            crossorigin="anonymous" referrerpolicy="no-referrer" />
  15.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/dracula.min.css"
  16.            integrity="sha512-gFMl3u9d0xt3WR8ZeW05MWm3yZ+ZfgsBVXLSOiFz2xeVrZ8Neg0+V1kkRIo9LikyA/T9HuS91kDfc2XWse0K0A=="
  17.            crossorigin="anonymous" referrerpolicy="no-referrer" />
  18.         <!-- Custom CSS -->
  19.         <link rel="stylesheet" href="asssets/css/styles.css">
  20.  
  21.         <!-- jQuery -->
  22.         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"
  23.            referrerpolicy="no-referrer"></script>
  24.  
  25.         <!-- Bootstrap JS CDN's -->
  26.         <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
  27.            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
  28.            crossorigin="anonymous"></script>
  29.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
  30.            integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
  31.            crossorigin="anonymous"></script>
  32.         <!-- Codemirror JS -->
  33.         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"
  34.            integrity="sha512-6cPYokihlrofMNApz7OXVQNObWjLiKGIBBb7+UB+AuMiRCLKmFKgrwms21sHq3bdFFZWpfHYRJBJvMFMPj1S9g=="
  35.            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  36.         <!-- Markdown Compiler CDN -->
  37.         <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.3/marked.min.js"
  38.            integrity="sha512-7aRjMGJX+VgTMGWgWLpQxavdTKRc2LwCTAS4LmB7OLwGTpH84ehHQoAY/y1fUfprr2yMFC6toDLHpbGaDth9VQ=="
  39.            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  40.         <!-- Custom JS -->
  41.         <script src="asssets/js/script.js"></script>
  42.     </head>
  43.  
  44.     <body>
  45.         <div id="main-wrapper" class="container-fluid h-100 py-3">
  46.             <h2 id="page-title">Markdown Previewer App</h2>
  47.             <div class="row flex-grow-1">
  48.                 <div class="col-lg-6 col-md-6 col-sm-12 col-12 d-flex flex-column">
  49.                     <h3 class="col-title text-light">Editor</h3>
  50.                     <div class="flex-grow-1">
  51.                         <div class="h-100">
  52.                             <textarea id="md-editor"></textarea>
  53.                         </div>
  54.                     </div>
  55.                 </div>
  56.                 <div class="col-lg-6 col-md-6 col-sm-12 col-12 d-flex flex-column">
  57.                     <h3 class="col-title text-light">Output</h3>
  58.                     <div class="flex-grow-1">
  59.                         <iframe id="md-output"></iframe>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.     </body>
  65.  
  66.     </html>

To bring our application to life, we’ll need to write the JavaScript that handles the core functionality of the application, such as converting the Markdown content to HTML and displaying it in real time as the user types.

In this step, we’ll create the JavaScript file script.js, which will reside in the assets/js directory.

  1.     var md_code_editor;
  2.     var md_editor;
  3.     var md_output;
  4.     let default_md = `# About this Markdown\nThis markdown content is intended to be used as demo content for the
  5.     **Markdown Previewer Application** free source code published at
  6.     [sourcecodester.com](https://sourcecodester.com)\n\n## Sample\nLorem ipsum dolor sit amet, consectetur adipiscing
  7.     elit. In gravida lectus vitae cursus fringilla. In euismod, nisi ac ultricies laoreet, purus erat volutpat nibh, sed
  8.     tincidunt tellus lectus faucibus odio. Aliquam erat mi, efficitur in eros quis, semper elementum arcu.\n\n## Sample
  9.     List\n- Test 1\n- Test 2\n- Test 3\n- Test 4\n- Test 5\n\n\n## Blockquotes\n> Aenean erat felis, ultricies in
  10.     rhoncus ac, efficitur ac lacus.\n>> Nunc malesuada velit iaculis, viverra metus vitae, semper arcu.\n> Aenean nec
  11.     nibh non tortor tristique vulputate vitae vel diam.`;
  12.  
  13.     function runMarkdown(){
  14.     var md_value = md_editor.val();
  15.     md_value = marked.marked(md_value, {
  16.     breaks: true
  17.     });
  18.     md_output[0].contentDocument.body.innerHTML = md_value;
  19.     }
  20.  
  21.     $(document).ready(function(){
  22.     md_editor = $('#md-editor')
  23.     md_output = $('#md-output')
  24.  
  25.     md_editor.text(default_md);
  26.  
  27.     md_code_editor = CodeMirror.fromTextArea( md_editor[0], {
  28.     value: md_editor.val(),
  29.     mode:"text/markdown",
  30.     theme:"dracula",
  31.     lineNumbers: true,
  32.     matchBrackets: true,
  33.     styleActiveLine: true,
  34.     lineWrapping: true
  35.     } )
  36.  
  37.     md_code_editor.setSize(null, md_editor.parent().height()+"px")
  38.     runMarkdown();
  39.  
  40.     md_code_editor.on("change", function(){
  41.     md_code_editor.save();
  42.     runMarkdown();
  43.     })
  44.  
  45.     $(window).on("resize",function(){
  46.     md_code_editor.setSize(null, "0px")
  47.     md_code_editor.setSize(null, md_editor.parent().height()+"px")
  48.     })
  49.     })

Now that you've set up the HTML, CSS, and JavaScript files for the Markdown Previewer Application, it's time to test everything on your end and see if the application works as expected.

Snapshots

Here are the following screenshots of this Markdown Previewer Application:

Whole Page

Markdown Previewer Application Free Source Code | oretnom23 | sourcecodester.con

Text Editor Section

Markdown Previewer Application Free Source Code | oretnom23 | sourcecodester.con

Output Section

Markdown Previewer Application Free Source Code | oretnom23 | sourcecodester.con

DEMO Video

And there you have it. I hope that this Markdown Previewer Application step-by-step tutorial will help you with what you are looking and you;ll find something useful for your other web applications project in the future. Explore more on this website for more Free Source Code, Tutorials, and Articles that tackles about various programming languages.

Happy Coding :)

Tags
HTML
css
js
Javascript
Markdown
Markdown Previewer
Markdown Compiler
Bootstrap
jQuery
Marked Lirbrary
CodeMirror

Add new comment

About text formats
  • 313 views