Vue 3의 렌더링 마크다운

소개

Markdown은 서식이 지정된 텍스트를 표시하고 저장하는 데 매우 유용할 수 있습니다. 예를 들어 저장소와 함께 제공되는 유명한 readme.md 파일이 있습니다.

구문은 간단하지만 효과적입니다. 예를 들어 기본적인 예는 테이블입니다.

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

결과는 다음과 같습니다.


통사론
설명


헤더
제목

절
텍스트


또는 목록:

- Bacon
- Ham
- Eggs

뚜셰:

베이컨

햄

달걀

그렇다면 포맷되지 않은 마크다운 텍스트를 보는 눈에 더 적합한 것으로 어떻게 바꿀 수 있을까요?

고맙게도 누군가 이미 markdown-it 이라는 도구를 만들었습니다.

Markdown-it

Markdown-it은 누군가가 원하는 대로 사용할 수 있는 순수한 HTML을 생성하는 함수로 내보낸 자바스크립트 마크다운 파서입니다. 또한 GitHub 페이지에 설명된 대로 다양한 플러그인과 기능이 있습니다.

그것으로 Vue 구성 요소를 만드는 것은 매우 쉽습니다. 유일한 요구 사항은 markdown-it 함수를 설치 및 가져오고 몇 가지 매개 변수를 설정한 후 render 메서드를 사용하는 것입니다.

요구 사항 및 플러그인

가장 먼저 해야 할 일 - 종속성 설치.

가장 중요한 것은 markdown-it 자체입니다.
npm i markdown-it
또는
yarn add markdown-it
일부 기능은 기본적으로 markdown-it에서 지원하지 않으므로 다른 더 유용한 플러그인을 권장합니다.

markdown-it-abbr - 약어

markdown-it-anchor - 페이지의 특정 부분을 북마크하는 데 유용한 앵커용 자동 ID입니다.

markdown-it-footnote

markdown-it-highlightjs - 구문 강조 표시에 매우 유용함

markdown-it-sub - 아래 첨자

markdown-it-sup - 윗첨자

markdown-it-task-lists - 형식이 지정된 확인란 목록

구성 요소 작성

markdown-it 패키지와 해당 플러그인을 가져온 후 render 메서드를 사용하여 출력을 생성할 수 있습니다.

import MarkdownIt from "markdown-it";

const markdown = new MarkdownIt();

markdown.render("# Header");

결과적으로 다음을 생성해야 합니다.

<h1>Header</h1>

이전에 언급한 플러그인을 추가할 수도 있습니다.

const markdown = new MarkdownIt()
  .use(MarkdownItAbbr)
  .use(MarkdownItAnchor)
  .use(MarkdownItFootnote)
  .use(MarkdownItHighlightjs)
  .use(MarkdownItSub)
  .use(MarkdownItSup)
  .use(MarkdownItTasklists);

나머지는 구성 요소가 원하는 텍스트를 표시하고 일반 Vue 구문을 사용하는 데 사용해야 하는 문자열 소품을 정의하는 것입니다.

<template>
  <div v-html="markdown.render(source)" />
</template>

<script setup lang="ts">
import MarkdownIt from "markdown-it";
import MarkdownItAbbr from "markdown-it-abbr";
import MarkdownItAnchor from "markdown-it-anchor";
import MarkdownItFootnote from "markdown-it-footnote";
import MarkdownItHighlightjs from "markdown-it-highlightjs";
import MarkdownItSub from "markdown-it-sub";
import MarkdownItSup from "markdown-it-sup";
import MarkdownItTasklists from "markdown-it-task-lists";
import MarkdownItTOC from "markdown-it-toc-done-right";

const markdown = new MarkdownIt()
  .use(MarkdownItAbbr)
  .use(MarkdownItAnchor)
  .use(MarkdownItFootnote)
  .use(MarkdownItHighlightjs)
  .use(MarkdownItSub)
  .use(MarkdownItSup)
  .use(MarkdownItTasklists)
  .use(MarkdownItTOC);

defineProps({
  source: {
    type: String,
    default: ""
  }
});
</script>

그리고 다음과 같이 사용하십시오.

<MarkdownRenderer :source="'# Hi!!'" />