dev.to와 같은 HTML,SCSS,JS로 마크다운 우체통 만드는 방법 (튜토리얼 실습)

7790 단어 devscssmarkdownjavascript


안녕 친구들,
이 튜토리얼에서 우리는 html,scss,javascript로 dev.to Markdown post box라는 흥미로운 것을 만들 것입니다.
내가 이 사이트(dev.to)에 처음 왔을 때 나는 Markdown 시스템 때문에 게시할 수 없었고 그것은 나에게 끔찍했습니다. 지금
마크다운 시스템이 제목, 설명, 태그, 표지 이미지를 위한 별도의 상자가 없지만 게시물을 작성하기 위해 1개의 상자만 수행되는 것과 같이 일반 텍스트로 작동하는 방식을 이해합니다.**

도구


  • 즐겨찾는 코드 편집기(권장 VS 코드)
  • Git Bash(추가)
    git bash를 열고 입력합니다code . index.html style.scss script.js.
    그러면 코드를 작성할 준비가 된 것입니다.

    • 먼저 html,scss의 디자인을 준비해야 합니다.



    HTML

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

    <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>
        <div class="post_wrapper">
            <div class="post_markdown" >
                <textarea  class="markdown_area"></textarea>
                <button class="btn btn-save">Save Changes</button>
            </div>
            <div class="post_preview" style="display: none;">

            </div>
        </div>
    </div>

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


    SCSS

    @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;
        padding: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;
}
.wrapper{
    max-width: 600px;
    min-height: 500px;
    margin: 1rem auto;
    .title{
        display: flex;
        justify-content: flex-end;
        .btn{
            background: transparent;
            @include bor;
            padding: .5rem;
            color: #555;
            cursor: pointer;
            border-radius: 2px;
            &.active{
                color: $black;
                border-bottom: 2px solid $active;
            }
            &:hover{
                background: #DCDFF0;
                color:$active;
            }

        }
    }
    .post_wrapper{
        .post_markdown{
            textarea.markdown_area{
                @include area;
            }
            .btn-save{
                @include bor;
                background: $active;
                color: $white;
                padding: .4rem 1rem;
                cursor: pointer;
                border-radius: 5px;
            }
        }
    }
    .post_preview{
       @include area;
    }
}


    디자인 준비가 끝나면 우리는 자바스크립트를 다룰 것입니다.

    자바스크립트

    


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')) {
    //
    val.classList.remove('active')

  } else {
    btnView.forEach(v => v.classList.remove('active'))
    val.classList.add('active')
  }
  if (element === 'edit') {
    post_preview.style.display = 'none';
    post_markdown.style.display = '';
  }
  else if (element === 'preview') {
    post_markdown.style.display = 'none';
    post_preview.style.display = ''
    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
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f2k5yab09q9vjb9oggfq.png
--------

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

// Global for markdown end

function PreviewPage(val, element) {
  Separate()
}



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:', '');
  console.log(titleGet)

  // 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:', '');
  console.log(publishedGet);

  // 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:', '');
  console.log(descriptionGet)

  // 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:', '');
  console.log(tagsGet)

  // 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:', '')
  console.log(cover_imageGet)


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

<strong> ${tagsGet} </strong>
<br>





`
}


    테스트


    우리가 받은 출력



    이것은 여기에서 시스템이 어떻게 작동하는지 연습하기 위한 간단한 코드입니다. 더 많이 배운 후에 더 나은 성능을 낼 수 있기를 바랍니다.
    이 짧은 튜토리얼이 마음에 드셨다면 좋아요, 댓글, 공유를 부탁드립니다.
    정말 감사합니다.
    rsync error: protocol incompatibility/mismatch
    Node.js 조작 MongoDB 데이터베이스 실례 분석

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage