web markDown - boostcamp-2020/IssueTracker-13 GitHub Wiki
React-markdoun์ Markdown ๋งํฌ์ ์ ๋ ๋๋งํ๋ React ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
npm install react-markdown
-
์ทจ์ ์ , ํ ์ด๋ธ, ์์ ๋ชฉ๋ก ๋ฐ URL์ ๋ํ ์ง์์ ์ง์ ์ถ๊ฐํ๋ ํ๋ฌ๊ทธ์ธ
npm install remark-gfm
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>
);
}
return (
<div className="App">
<ReactMarkdown source={markdown} />
</div>
);
ReactMarkDown ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ธ์ source ์์ฑ์ ๋ณ์ ์ ๋ ฅ ํ (์์ ์์ ์์ markdown) ๋ ๋๋ง
childeren ์์ฑ์๋ ๋ณ์ ์ ๋ ฅ ๊ฐ๋ฅ source์ ๋๊ฐ์ด ๊ธฐ๋ฅํด์ฃผ๋ ์ฐจ์ด์ ์ ๋ชจ๋ฅด๊ฒ ์, ์ฐจํ ์ฐพ์๋ณผ ์์
์์๊ฐ์ ๋ฐฉ์์ ๋น์ฃผ์ผ์ ์ธ ์์๋ค์ ๋์ํ์ง ์๋๋ฐ ์ด๋ฐ ๋ถ๋ถ๋ค์ ์ง์ ๋ ๋๋ง ์ฝ๋๋ฅผ ๋ง๋ค์ด ์ฃผ์ด์ผํจ
function App() {
return <ReactMarkdown source={source}
renderers={{
inlineCode: InlineCodeBlock
}}
}
function InlineCodeBlock(props) {
return (
<span style={{background: '##ff0'}}>
{props.value}
</span>
)
}
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={{}}/>
}