여러분, dev.to 웹사이트와 같은 마크다운을 만들고 마크다운 데이터를 html로 처리해 봅시다.

그래서 이 게시물에서는 텍스트 영역이 있는 편집기를 만들고 프로세스를 클릭하면 처리된 html 콘텐츠가 나타납니다...!

듣고 따라하는 사람이라면 내가 이 웹 앱의 라이브 데모를 수행한 비디오를 볼 수 있습니다.

그리고 항상 그렇듯이 내 게시물의 마지막 섹션에서 전체 코드를 항상 찾을 수 있습니다.



그래서 잠수하자

1) 프론트엔드 파트 생성

여기에서는 텍스트 영역과 버튼이 있는 간단한 양식으로 프런트엔드용으로 간단한index.php 파일을 생성합니다.



여기에서 textarea 이름을 textArea로, button 이름을 submitData로 지정하여 백엔드 부분에서 데이터를 처리할 수 있습니다.

이것은 프론트엔드 부분을 위한 것입니다....!

2) 백엔드를 작성합시다

따라서 우리가 사용할 데이터를 구문 분석하기 위해 parsedown 일반 구문 분석기보다 실제로 6배 더 빠른 PHP로 작성되었습니다... 따라서 이것이 데이터 구문 분석에 가장 적합하다고 생각합니다.

먼저 컴포저를 사용하여 패키지를 설치하기 위해 터미널이나 cmd에 다음을 작성합니다(컴포저는 PHP용 종속성 관리 도구입니다).
$ composer init
그런 다음 엔터 엔터 엔터를 입력하면 무엇이든 요청할 수 있습니다 ....

다음...
$ composer require erusev/parsedown
이 명령은 웹 앱에 필요한 모든 종속성을 다운로드합니다.

이제 웹사이트 상단의 php 태그를 열고 Parsdown 패키지를 가져오는 코드를 작성해 보겠습니다.



다음으로 사용자가 제출한 게시물 데이터를 가져와야 합니다.



at line 5 - 사용자가 프로세스 데이터 버튼을 클릭했는지 여부를 확인합니다.

조건이 참으로 판명되면 Parsedown 클래스를 인스턴스화합니다.

그런 다음 사용자가 제출한 데이터를 $textToParse 변수에 가져오고 다음을 사용하여 출력을 표시합니다.echo $Parsedown->text($_POST["textArea"]);
예에에에!! 이제 웹 앱을 테스트할 준비가 되었습니다.

터미널을 열고 서버를 시작하십시오.
$ php -S localhost:8000
입력



산출



읽어주셔서 감사합니다...!

<?php

require "./vendor/erusev/parsedown/Parsedown.php";

if(isset($_POST["submitData"])) {
    $Parsedown = new Parsedown();
    $textToParse = $_POST["textArea"];
    echo $Parsedown->text($_POST["textArea"]);
}

?>
<div>
    <form action="" method="POST">
        <textarea name="textArea" id="textArea" cols="80" rows="40"></textarea>
        <button name="submitData">Process Markdown</button>
    </form>
</div>

마음에 드셨으면 좋겠고 친구들과도 공유하세요!