리액트 - 깃허브 마크다운 스타일 적용하기 (Github Markdown Style)

깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)

 

리액트 전체 링크

 

참고

- 깃허브 RESTful API로 파일 편집기 만들기

- 깃허브 RESTful API 한글 깨짐 현상 해결하기

- 마크다운을 HTML로 변환하기

- Toast UI 에디터로 깃허브 마크다운 저장하기

- https://github.com/remarkjs/react-markdown#plugins

- https://uiwjs.github.io/react-markdown-preview/

 

위 링크에서 아래 마크다운 테이블을 만들어보자.

정상적으로 만들어지지 않는다.

 

이 경우 플러그인을 여러 개 설치해야 하는데 너무 번거롭다.

아래 링크가 github style대로 마크다운을 잘 적용해준다.

https://uiwjs.github.io/react-markdown-preview/

npm install @uiw/react-markdown-preview

 

이제 MarkdownPreview를 import 하자.

import MarkdownPreview from '@uiw/react-markdown-preview';

 

그리고 ReactMarkdown 대신 아래 MarkdownPreview를 적용하자.

  <Stack sx={{ m: 2 }}>
    {/* <ReactMarkdown>{contents}</ReactMarkdown>
      */}
    <MarkdownPreview source={contents} />
  </Stack>

 

테이블이 정상적으로 생성되었다.

 

다른 마크다운 문법도 깃허브 스타일대로 잘 적용된다.

 

전체 코드는 다음과 같다.

import React, { useState } from "react";

import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { TextField } from "@mui/material";
import { Textarea } from "@mui/joy";
import { Octokit } from "@octokit/rest";

import MarkdownPreview from '@uiw/react-markdown-preview';

let myKey = "...";

const App = () => {
  const [repo, setRepo] = useState("auto-test");
  const [path, setPath] = useState("README.md");
  const [contents, setContents] = useState("");

  const getSHA = async (octokit) => {
    const result = await octokit.request(
      `GET /repos/bloodstrawberry/${repo}/contents/${path}`,
      {
        owner: "bloodstrawberry",
        repo: `${repo}`,
        path: `${path}`,
      }
    );

    return result.data.sha;
  };

  const fileWrite = async () => {
    const octokit = new Octokit({
      auth: myKey,
    });

    const currentSHA = await getSHA(octokit);
    const result = await octokit.request(
      `PUT /repos/bloodstrawberry/${repo}/contents/${path}`,
      {
        owner: "bloodstrawberry",
        repo: `${repo}`,
        path: `${path}`,
        message: "commit message!",
        sha: currentSHA,
        committer: {
          name: "bloodstrawberry",
          email: "bloodstrawberry@github.com",
        },
        content: `${btoa(unescape(encodeURIComponent(`${contents}`)))}`,
        headers: {
          "X-GitHub-Api-Version": "2022-11-28",
        },
      }
    );

    console.log(result.status);
  };

  const fileRead = async () => {
    const octokit = new Octokit({
      auth: myKey,
    });

    const result = await octokit.request(
      `GET /repos/bloodstrawberry/${repo}/contents/${path}`,
      {
        owner: "bloodstrawberry",
        repo: `${repo}`,
        path: `${path}`,
        encoding: "utf-8",
        decoding: "utf-8",
      }
    );

    setContents(decodeURIComponent(escape(window.atob(result.data.content))));
  };

  return (
    <div>
      <h1>깃허브 파일 편집기</h1>
      <Stack sx={{ m: 5 }} spacing={2} direction="row">
        <Button variant="outlined" color="primary" onClick={fileRead}>
          불러오기
        </Button>
        <Button variant="outlined" color="secondary" onClick={fileWrite}>
          저장하기
        </Button>
      </Stack>
      <Stack sx={{ m: 5 }} spacing={2} direction="row">
        <TextField
          id="outlined-required"
          label="repository"
          value={repo}
          onChange={(e) => setRepo(e.target.value)}
        />
        <TextField
          id="outlined-required"
          label="filePath"
          value={path}
          onChange={(e) => setPath(e.target.value)}
        />
      </Stack>
      <Stack sx={{ m: 5 }}>
        <Textarea
          name="Primary"
          placeholder="Type in here…"
          variant="outlined"
          color="primary"
          value={contents}
          onChange={(e) => setContents(e.target.value)}
        />
      </Stack>

      <Stack sx={{ m: 2 }}>
        {/* <ReactMarkdown>{contents}</ReactMarkdown>
         */}
        <MarkdownPreview source={contents} />
      </Stack>
      
    </div>
  );
};

export default App;