DEV Community


How to make Markdown post box with HTML,SCSS,JS like (Tutorial Practice)

Nikhil Chandra Roy
Front-End Web Developer with JavaScript, ReactJs and Backend Python(Django)
・3 min read

Alt Text

Hi Friends,
In this tutorial we are going to make the exciting thing is Markdown post box by html,scss,javascript.

When I was new in this site( I was not able to post due to Markdown system and it was terrible for me. Now, I
understand how the markdown system works with plain text like there is no separate box for title, description, tags,cover_image but only 1 box would be done to write the post everything.**


  • Your Favorite code editor (Recommended VS Code)
  • Git Bash (Extra) Open git bash and type code . index.html style.scss script.js then, we are ready to write the code.

First we have to ready the design of html,scss


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <div class="wrapper">
        <div class="title">
            <button onclick="selectView(this, 'edit')" class="btn btnView active">Edit</button>
            <button onclick="selectView(this, 'preview')" class="btn btnView ">Preview</button>
        <div class="post_wrapper">
            <div class="post_markdown" >
                <textarea  class="markdown_area"></textarea>
                <button class="btn btn-save">Save Changes</button>
            <div class="post_preview" style="display: none;">


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

Enter fullscreen mode Exit fullscreen mode


@mixin global($sizing,$family,$mp_0: false,$font_16: false){
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    @if $mp_0{
        margin: 0;
    @if $font_16{
        font-size: 16px;
    @include global(border-box,sans-serif);
@mixin bor{
    border: none;
    outline: none;
$active: #3B49DF;
$white: white;
$black: black; 
@mixin area{
    all: initial;
    width: 100%;
    height: 500px;
    padding: 1rem;
    box-shadow: 5px 5px 15px rgba($color: $black, $alpha: .3);
    margin: 1rem 0;
    overflow: auto;
    display: block;
    max-width: 600px;
    min-height: 500px;
    margin: 1rem auto;
        display: flex;
        justify-content: flex-end;
            background: transparent;
            @include bor;
            padding: .5rem;
            color: #555;
            cursor: pointer;
            border-radius: 2px;
                color: $black;
                border-bottom: 2px solid $active;
                background: #DCDFF0;

                @include area;
                @include bor;
                background: $active;
                color: $white;
                padding: .4rem 1rem;
                cursor: pointer;
                border-radius: 5px;
       @include area;

Enter fullscreen mode Exit fullscreen mode

after the design ready we are going to hand on javascript.


let post_preview = document.querySelector('.post_preview');
let post_markdown = document.querySelector('.post_markdown');

function selectView(val, element) {
  let btnView = document.querySelectorAll('.btnView')
  if (val.classList.contains('active')) {

  } else {
    btnView.forEach(v => v.classList.remove('active'))
  if (element === 'edit') { = 'none'; = '';
  else if (element === 'preview') { = 'none'; = ''
    PreviewPage(val, element)


// for markdown js code

let markdown_area = document.querySelector('textarea.markdown_area');
markdown_area.value =
title: I am title
published: false
description: I am description
tags: I am tags

Hello World
// Global for markdown start
let markdown_head;
markdown_head = markdown_area.value.replace(/[^-]/gi, "")

// Global for markdown end

function PreviewPage(val, element) {

function Separate() {

  // title separate 
  let titleStart, titleEnd, titleGet;
  titleStart = markdown_area.value.indexOf('title:');
  titleEnd = markdown_area.value.indexOf('published:');
  titleGet = markdown_area.value.slice(titleStart, titleEnd).replace('title:', '');

  // published separate
  let publishedStart, publishedEnd, publishedGet;
  publishedStart = markdown_area.value.indexOf('published:')
  publishedEnd = markdown_area.value.indexOf('description:')
  publishedGet = markdown_area.value.slice(publishedStart, publishedEnd).replace('published:', '');

  // description separate
  let descriptionStart, descriptionEnd, descriptionGet;
  descriptionStart = markdown_area.value.indexOf('description:')
  descriptionEnd = markdown_area.value.indexOf('tags:')
  descriptionGet = markdown_area.value.slice(descriptionStart, descriptionEnd).replace('description:', '');

  // tags seprate
  let tagsStart, tagsEnd, tagsGet

  tagsStart = markdown_area.value.indexOf('tags:')
  tagsEnd = markdown_area.value.indexOf('cover_image:')
  tagsGet = markdown_area.value.slice(tagsStart, tagsEnd).replace('tags:', '');

  // cover_image seprate

  let cover_imageStart, cover_imageEnd, cover_imageGet;
  cover_imageStart = markdown_area.value.indexOf('cover_image:')
  cover_imageEnd = markdown_area.value.lastIndexOf("---");
  cover_imageGet = markdown_area.value.slice(cover_imageStart, cover_imageEnd).replace('cover_image:', '')

  post_preview.innerHTML =
<h1> ${titleGet} </h1>
<img style="width: 100%" src="${cover_imageGet.replace(' ','')}"/>

<strong> ${tagsGet} </strong>

Enter fullscreen mode Exit fullscreen mode

Alt Text

Output we received

Alt Text

This is a simple code for practice how the system works here, after learning more, hope I can do a better performance of it.
If you like this short tutorial please like, comment, and share.
Thanks a lot.

Discussion (0)

Forem Open with the Forem app