web markDown

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>
  );
}

2.2 흐름도

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

ReactMarkDown 컴포넌트를 가져와 source 속성에 변수 입력 후 (위의 예제에선 markdown) 렌더링

childeren 속성에도 변수 입력 가능 source와 똑같이 기능해주나 차이점을 모르겠음, 차후 찾아볼 예정

3. 마크다운 심화

위와같은 방식은 비주얼적인 요소들은 동작하지 않는데 이런 부분들은 직접 렌더링 코드를 만들어 주어야함

마크다운 태그별 Node type

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={{}}/>
}