web markDown - boostcamp-2020/IssueTracker-13 GitHub Wiki

react-markdown

React-markdoun์€ Markdown ๋งˆํฌ์—…์„ ๋ Œ๋”๋งํ•˜๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

1. react-markdown ์„ค์น˜

npm install react-markdown
  • ์ทจ์†Œ ์„ , ํ…Œ์ด๋ธ”, ์ž‘์—… ๋ชฉ๋ก ๋ฐ URL์— ๋Œ€ํ•œ ์ง€์›์„ ์ง์ ‘ ์ถ”๊ฐ€ํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ

    npm install remark-gfm

2. Markdown ๋ Œ๋”๋ง

2.1 ์˜ˆ์ œ

import React from "react";
import "./styles.css";

import ReactMarkdown from "react-markdown";

export default function App() {
  const markdown = `
  # Header 1
  ## Header 2

  _ italic _

  ** bold **

  <b> bold Html </b>
  `;

  return (
    <div className="App">
      <ReactMarkdown source={markdown} />
    </div>
  );
}

image

2.2 ํ๋ฆ„๋„

return (
    <div className="App">
      <ReactMarkdown source={markdown} />
    </div>
  );

ReactMarkDown ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ ธ์™€ source ์†์„ฑ์— ๋ณ€์ˆ˜ ์ž…๋ ฅ ํ›„ (์œ„์˜ ์˜ˆ์ œ์—์„  markdown) ๋ Œ๋”๋ง

childeren ์†์„ฑ์—๋„ ๋ณ€์ˆ˜ ์ž…๋ ฅ ๊ฐ€๋Šฅ source์™€ ๋˜‘๊ฐ™์ด ๊ธฐ๋Šฅํ•ด์ฃผ๋‚˜ ์ฐจ์ด์ ์„ ๋ชจ๋ฅด๊ฒ ์Œ, ์ฐจํ›„ ์ฐพ์•„๋ณผ ์˜ˆ์ •

3. ๋งˆํฌ๋‹ค์šด ์‹ฌํ™”

์œ„์™€๊ฐ™์€ ๋ฐฉ์‹์€ ๋น„์ฃผ์–ผ์ ์ธ ์š”์†Œ๋“ค์€ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋ฐ ์ด๋Ÿฐ ๋ถ€๋ถ„๋“ค์€ ์ง์ ‘ ๋ Œ๋”๋ง ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์–ด์•ผํ•จ

๋งˆํฌ๋‹ค์šด ํƒœ๊ทธ๋ณ„ Node type

image

ex1) ๊ฐ•์กฐ(grave)

function App() {
	return <ReactMarkdown source={source}
						  renderers={{
						  	inlineCode: InlineCodeBlock
						  }}
}

function InlineCodeBlock(props) {
	return (
		<span style={{background: '##ff0'}}>
			{props.value}
		</span>
	)
}

4. HTML ํŒŒ์‹ฑ

ReactMarkdown์˜ default๊ฐ’์œผ๋ก  html์„ skipํ•˜๋„๋ก ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์„ธ๋ถ€์„ค์ • ํ•„์š” (skipHtml, escapeHtml)

const parseHtml = htmlParser ({
   isValidNode : ( node ) => node . type ! == ' script ' ,

      processingInstructions : [
     / * ... * / 
  ]
})

< ReactMarkdown  astPlugins = { [ parseHtml ] }  allowDangerousHtml  children = { markdown } />

function App() {
	return <ReactMarkdown source={markdown}
						  skipHtml={false}
                          escapeHtml={false}
                          astPlugins={[parseHtml]}
                          renderers={{}}/>
}
โš ๏ธ **GitHub.com Fallback** โš ๏ธ