/markdown-by-react

put a markdown on the web by react

Primary LanguageJavaScript

markdown-by-react

Usage

  • yarn add markdown-to-jsx
  • 사용할 파일 상단에 import Markdown from 'markdown-to-jsx'; 추가

How to use

  • markdown 문자열 -> web browser

    case 1 : Markdown태그에 바로 문자열 삽입

    <Markdown># Hello world!</Markdown>

    case 2 : 문자열 상수를 지정해 놓은 뒤 Markdown태그에 삽입

    const mdfile = `# Hello world!`

const multiline_mdfile = `
	# Hello world!
	## Hello world?
	### Hello world.
`

<Markdown>{mdfile}</Markdown>

    template literals : ES6에서 지원하는 여러 String 형식 참고

    case 3 : 문자열 상수를 Markdown의 children으로 부여

    const mdfile = `
	# Hello world!
	## Hello world?
	### Hello world.
`

<Markdown children={mdfile}/>

변수를 삽입하고 싶을 경우 : ${변수명} 형식사용

<Markdown>{`- ${value}`}</Markdown>

  • HTML Tag의 표현을 Override하기

    case 1 : options.overrides prop를 전달

    const MyParagraph = ({ children, ...props }) => (
    <div {...props}>{children}</div>
);
 
function Test() {
    return(
        <Markdown
        options={{
            overrides: {
                h1: {
                    component: MyParagraph,
                    props: {
                        className: 'foo',
                    },
                },
            },
        }}
    >
        # Hello world!
    </Markdown>
    );
}

/*
    renders:
   
    <div class="foo">
        Hello World
    </div>
 */

case 2 : 임의의 React Component 렌더링

Issue

  • InfoAgreement.js

    • html tag를 multiple string에 넣으면 layout이 깨짐

      css 적용

      react component로 대체

  • MedicalConfirmation.js

    • Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

      div로 감싸서 해결

    • 기본 markdown은 cell merge 지원을 안함

      최대한 cell merge를 줄이게끔 flexibility 주기

    • 기본 table layout은 markdown 형식으로 잡아놓고 그 안의 값들을 react component로 대체