react markdown preview 다운로드 -Rect react markdown preview 소스 코드 다운로드

마크 다운 미리보기를 반응합니다

웹 브라우저에서 구성 요소 미리보기 텍스트를 반응합니다. Github Markdown 스타일을 복제하기위한 최소 CSS. 현재 문서 웹 사이트는이 React 구성 요소를 사용하여 변환됩니다.

특징

? 다크 모드/야간 모드를 지원합니다. @v4
?? ub담️ Github 스타일 : Markdown 컨텐츠는 가능한 한 Github에서 렌더링되는 방식에 가깝게 렌더링됩니다.
?? f담추 지원 GFM (Autolink Literals, 각주, Strikethrough, 테이블, 작업 목록).
? 자동 코드 블록 하이라이트를 지원합니다.
? 주석을 통해 스타일 정의에 대한 지원.
GFM 각주 지원
github 경보에 대한 ⛳️ 지원

빠른 시작

$ npm install @uiw/react-markdown-preview --save

사용 예제

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

const source = `
## MarkdownPreview

> todo: React component preview markdown text.
` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview source = { source } style = { { padding : 16 } } />
  )
}

헤더 링크를 비활성화합니다

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

const source = `
## MarkdownPreview

## Header 2

### Header 3
` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview
      source = { source }
      style = { { padding : 16 } }
      rehypeRewrite = { ( node , index , parent ) => {
        if ( node . tagName === "a" && parent && / ^h(1|2|3|4|5|6) / . test ( parent . tagName ) ) {
          parent . children = parent . children . slice ( 1 )
        }
      } }
    />
  ) ;
}

하이라이트 라인

구문 : ```jsx {1,4-5}

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

const source = `
```js {2}
function () {
  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
```
```js {2}
function () {
  console.log('hello ')
}
```
` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview
      source = { source }
      style = { { padding : 16 } }
      rehypeRewrite = { ( node , index , parent ) => {
        if ( node . tagName === "a" && parent && / ^h(1|2|3|4|5|6) / . test ( parent . tagName ) ) {
          parent . children = parent . children . slice ( 1 )
        }
      } }
    />
  ) ;
}

줄 번호 표시

구문 : ```jsx showLineNumbers {1,4-5}

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

const source = `
```js showLineNumbers
function () {
  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
```
```js showLineNumbers {2}
function () {
  console.log('hello ')
}
```
` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview
      source = { source }
      style = { { padding : 16 } }
      rehypeRewrite = { ( node , index , parent ) => {
        if ( node . tagName === "a" && parent && / ^h(1|2|3|4|5|6) / . test ( parent . tagName ) ) {
          parent . children = parent . children . slice ( 1 )
        }
      } }
    />
  ) ;
}

코드 하이라이트

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

const source = `
```js
function () {
  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
```
```js
function () {
  console.log('hello ')
}
```
` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview source = { source } style = { { padding : 16 } } />
  ) ;
}

코드 하이라이트를 제거하십시오

다음 예제는 번들에 포함되지 않도록 코드 강조 코드를 제외하는 데 도움이 될 수 있습니다. @uiw/react-markdown-preview/nohighlight 구성 요소에는 rehype-prism-plus code Highlighting Package, showLineNumbers 및 highlight line 기능이 더 이상 작동하지 않습니다. (#586)

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

const source = `
```js
function () {
  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
```
```js
function () {
  console.log('hello ')
}
```
` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview
      source = { source }
      style = { { padding : 16 } }
      rehypeRewrite = { ( node , index , parent ) => {
        if ( node . tagName === "a" && parent && / ^h(1|2|3|4|5|6) / . test ( parent . tagName ) ) {
          parent . children = parent . children . slice ( 1 )
        }
      } }
    />
  ) ;
}

무시하다

HTML에 제외 된 GitHub ReadMe에 표시된 HTML 주석을 통해 컨텐츠 표시를 무시하십시오.

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

const source = `
<!--rehype:ignore:start-->
Content ignored
<!--rehype:ignore:end-->
Some content is ignored, please check the source code
` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview
      source = { source }
      style = { { padding : 16 } }
      rehypeRewrite = { ( node , index , parent ) => {
        if ( node . tagName === "a" && parent && / ^h(1|2|3|4|5|6) / . test ( parent . tagName ) ) {
          parent . children = parent . children . slice ( 1 )
        }
      } }
    />
  ) ;
}

 <!-- rehype:ignore:start --> Ignored content <!-- rehype:ignore:end -->

사용자 정의 Katex 미리보기를 지원합니다

Katex는 웹에서 Tex 수학 렌더링을위한 빠르고 사용하기 쉬운 JavaScript 라이브러리이며 KaTeX 통해 수학 렌더링을 수행합니다.

npm install katex

 import React from 'react' ;
import MarkdownPreview from '@uiw/react-markdown-preview' ;
import { getCodeString } from 'rehype-rewrite' ;
import katex from 'katex' ;
import 'katex/dist/katex.css' ;

const source = `This is to display the 
`$$c = \pm\sqrt{a^2 + b^2}$$`
 in one line

```KaTeX
c = \pm\sqrt{a^2 + b^2}
```
` ;

export default function Demo ( ) {
  const [ value , setValue ] = React . useState ( source ) ;
  return (
    < MarkdownPreview
      source = { source }
      style = { { padding : 16 } }
      components = { {
        code : ( { children = [ ] , className , ... props } ) => {
          if ( typeof children === 'string' && / ^$$(.*)$$ / . test ( children ) ) {
            const html = katex . renderToString ( children . replace ( / ^$$(.*)$$ / , '$1' ) , {
              throwOnError : false ,
            } ) ;
            return < code dangerouslySetInnerHTML = { { __html : html } } style = { { background : 'transparent' } } /> ;
          }
          const code = props . node && props . node . children ? getCodeString ( props . node . children ) : children ;
          if (
            typeof code === 'string' &&
            typeof className === 'string' &&
            / ^language-katex / . test ( className . toLocaleLowerCase ( ) )
          ) {
            const html = katex . renderToString ( code , {
              throwOnError : false ,
            } ) ;
            return < code style = { { fontSize : '150%' } } dangerouslySetInnerHTML = { { __html : html } } /> ;
          }
          return < code className = { String ( className ) } > { children } </ code > ;
        } ,
      } }
    />
  ) ;
}

사용자 정의 인어 미리보기를 지원합니다

Mermaid 사용 마크 다운과 유사한 방식으로 텍스트에서 다이어그램 및 유량 차트 생성까지

 import React , { useState , useRef , useEffect , Fragment , useCallback } from "react" ;
import MarkdownPreview from '@uiw/react-markdown-preview' ;
import { getCodeString } from 'rehype-rewrite' ;
import mermaid from "mermaid" ;

const randomid = ( ) => parseInt ( String ( Math . random ( ) * 1e15 ) , 10 ) . toString ( 36 ) ;
const Code = ( { inline , children = [ ] , className , ... props } ) => {
  const demoid = useRef ( `dome ${ randomid ( ) } ` ) ;
  const [ container , setContainer ] = useState ( null ) ;
  const isMermaid = className && / ^language-mermaid / . test ( className . toLocaleLowerCase ( ) ) ;
  const code = props . node && props . node . children ? getCodeString ( props . node . children ) : children [ 0 ] || '' ;

  const reRender = async ( ) => {
    if ( container && isMermaid ) {
      try {
        const str = await mermaid . render ( demoid . current , code ) ;
        container . innerHTML = str . svg ;
      } catch ( error ) {
        container . innerHTML = error ;
      }
    }
  }

  useEffect ( ( ) => {
    reRender ( )
  } , [ container , isMermaid , code , demoid ] ) ;

  const refElement = useCallback ( ( node ) => {
    if ( node !== null ) {
      setContainer ( node ) ;
    }
  } , [ ] ) ;

  if ( isMermaid ) {
    return (
      < Fragment >
        < code id = { demoid . current } style = { { display : "none" } } />
        < code ref = { refElement } data-name = "mermaid" />
      </ Fragment >
    ) ;
  }
  return < code > { children } </ code > ;
} ;
const source = `The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. 

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
` ;
// const source = `
// ```mermaid
// graph TD;
//     A-->B;
//     A-->C;
//     B-->D;
//     C-->D;
// ```
// `;

export default function Demo ( ) {
  return (
    < MarkdownPreview
      source = { source }
      style = { { padding : 16 } }
      components = { {
        code : Code
      } }
    />
  ) ;
}

보안

저자를 완전히 신뢰하지 않으면 Markdown을 소독해야합니다. 그렇지 않으면 앱이 XSS에 취약합니다. 이는 Rehype-Sanitize를 플러그인으로 추가하여 달성 할 수 있습니다.

 import React from 'react' ;
import rehypeSanitize from "rehype-sanitize" ;
import MarkdownPreview from '@uiw/react-markdown-preview' ;

const source = `
## MarkdownPreview

**Hello world!!!** <IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>

<!-- test --> 123

<!-- test --> 456 <!-- test -->
` ;

const rehypePlugins = [ rehypeSanitize ] ;
export default function Demo ( ) {
  return (
    < MarkdownPreview source = { source } rehypePlugins = { rehypePlugins } style = { { padding : 16 } } />
  )
}

옵션 소품

 import { ReactMarkdownProps } from 'react-markdown' ;
import { RehypeRewriteOptions } from 'rehype-rewrite' ;

type MarkdownPreviewProps = {
  prefixCls ?: string ;
  className ?: string ;
  source ?: string ;
  disableCopy ?: boolean ;
  style ?: React . CSSProperties ;
  pluginsFilter ?: ( type : 'rehype' | 'remark' , plugin : PluggableList ) => PluggableList ;
  wrapperElement ?: React . DetailedHTMLProps < React . HTMLAttributes < HTMLDivElement > , HTMLDivElement > & {
    'data-color-mode' ?: 'light' | 'dark' ;
  } ;
  onScroll ?: ( e : React . UIEvent < HTMLDivElement > ) => void ;
  onMouseOver ?: ( e : React . MouseEvent < HTMLDivElement > ) => void ;
  rehypeRewrite ?: RehypeRewriteOptions [ 'rewrite' ] ;
} & ReactMarkdownProps ;

source ( string , 기본값 : '' )
마크 다운
className ( string? )
이 클래스 이름으로 마크 다운을 div 로 랩핑하십시오.

이 ReactMarkdownProps 세부 사항. react-markdown V9 업그레이드

children ( string , 기본값 : '' )
마크 다운
className ( string? )
이 클래스 이름으로 마크 다운을 div 로 랩핑하십시오.
skipHtml ( boolean , 기본값 : ~~false~~ -> true )
Markdown에서 HTML을 완전히 무시하십시오
allowElement ( (element, index, parent) => boolean? , 선택 사항)
요소가 허용되는지 확인하기 위해 호출 된 기능 (진실한 경우). allowedElements / disallowedElements 먼저 사용됩니다!
remarkPlugins ( Array.<Plugin> , 기본값 : [] )
사용할 비고 플러그인 목록. 전달 옵션에 대한 예제는 다음 섹션을 참조하십시오.
rehypePlugins ( Array.<Plugin> , 기본값 : [] )
사용할 Rehype 플러그인 목록. 전달 옵션에 대한 예제는 다음 섹션을 참조하십시오.

메모

react-markdown 업그레이드 v8 V9에

`urlTransform` 추가하십시오

transformImageUri 및 transformLinkUri 제거되었습니다. 두 가지 기능을 갖는 것은 약간 큰 일입니다. 특히 URL이 더 많아서 변경하려는 URL이 많기 때문에 (또는 안전하지 않아 안전하게 만들 수 있음) 두 가지가 많기 때문입니다. 그리고 그들의 이름과 API는 약간 이상했습니다. 대신 새 urlTransform Prop를 사용하여 모든 URL을 변경할 수 있습니다.

`linkTarget` 제거하십시오

linkTarget 옵션이 제거되었습니다. 대상을 설정해서는 안됩니다. 원하는 경우 rehype-external-links 사용하십시오.

`includeElementIndex` 제거합니다

includeElementIndex 옵션이 제거되었으므로 index 구성 요소로 전달되지 않습니다. index 통과 할 플러그인을 작성하십시오.

플러그인의 예를 보여줍니다

 import { visit } from 'unist-util-visit'

function rehypePluginAddingIndex ( ) {
  /**
   * @param {import('hast').Root} tree
   * @returns {undefined}
   */
  return function ( tree ) {
    visit ( tree , function ( node , index ) {
      if ( node . type === 'element' && typeof index === 'number' ) {
        node . properties . index = index
      }
    } )
  }
}

`rawSourcePos` 제거하십시오

rawSourcePos 옵션이 제거되었으므로 sourcePos 구성 요소로 전달되지 않습니다. 모든 구성 요소는 전달 된 node 이므로 node.position 에서 얻을 수 있습니다.

`sourcePos` 제거하십시오

sourcePos 옵션이 제거되었으므로 data-sourcepos 요소로 전달되지 않습니다. index 통과 할 플러그인을 작성하십시오.

플러그인의 예를 보여줍니다

 import { stringifyPosition } from 'unist-util-stringify-position'
import { visit } from 'unist-util-visit'

function rehypePluginAddingIndex ( ) {
  /**
   * @param {import('hast').Root} tree
   * @returns {undefined}
   */
  return function ( tree ) {
    visit ( tree , function ( node ) {
      if ( node . type === 'element' ) {
        node . properties . dataSourcepos = stringifyPosition ( node . position )
      }
    } )
  }
}

특정 구성 요소에 전달 된 추가 소품을 제거하십시오

구성 요소를 덮어 쓰면이 소품은 더 이상 통과되지 않습니다.

code 의 inline - 플러그인을 만들거나 블록에 pre 사용
h1 , h2 , h3 , h4 , h5 , h6 의 level - node.tagName 확인하십시오.
li 에서 checked - task-list-item 수업을 확인하거나 props.children 확인합니다.
li 의 index - 플러그인을 만듭니다
li 에서 ordered - 플러그인을 만들거나 부모를 확인하십시오.
ol , ul 의 depth - 플러그인을 만듭니다
ol , ul 에서 ordered - node.tagName 대신 확인하십시오
td , th 에서 isHeader - node.tagName 대신 확인하십시오
isHeader ON tr - 플러그인 만들거나 어린이 확인

마크 다운 기능

CSS 스타일을 지원합니다

HTML 주석  사용하여 Markdown이 스타일 사용자 정의를 지원하도록하십시오.

 ## Title
<!-- rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px; -->

Markdown Supports ** Style ** <!-- rehype:style=color: red; -->

GFM 각주 지원

Here is a simple footnote [ ^ 1 ] . With some additional text after it.

[ ^ 1 ] : My reference.

컨텐츠 디스플레이를 무시하십시오

 # Hello World

<!-- rehype:ignore:start --> Hello World <!-- rehype:ignore:end -->

Good!

산출:

 < h1 > Hello World </ h1 >

< p > Good! </ p >

GitHub 경보 지원

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

const source = `> 
> 
> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.


` ;

export default function Demo ( ) {
  return (
    < MarkdownPreview source = { source } style = { { padding : 16 } } />
  )
}

다크 모드/야간 모드를 지원합니다

기본적으로 dark-mode 시스템에 따라 자동으로 전환됩니다. 수동으로 전환 해야하는 경우 본문의 data-color-mode="dark" 매개 변수를 설정하십시오.

 < html data-color-mode =" dark " >

 document . documentElement . setAttribute ( 'data-color-mode' , 'dark' )
document . documentElement . setAttribute ( 'data-color-mode' , 'light' )

.wmde-markdown-var selector를 추가하여 사용자 정의 색상 변수를 상속합니다.

 const Demo = ( ) => {
  return (
    < div >
      < div className = "wmde-markdown-var" > </ div >
      < MarkdownPreview source = "Hello World!" />
    </ div >
  )
}

light 테마를 설정하십시오.

<MarkdownPreview
  source="Hello World!"
  wrapperElement={{
+    "data-color-mode": "light"
  }}
/>

개발

개발 모드에서 프로젝트를 실행합니다.

 # Step 1, run first,
# listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
# listen to the component compile and output the .css file
npm run start
# Step 2, development mode, listen to compile preview website instance
npm run doc

빌드 폴더에 생산을위한 앱을 빌드합니다.

npm run build

빌드는 미니어지고 파일 이름에는 해시가 포함됩니다. 앱을 배포 할 준비가되었습니다!

대안

더 많은 기능이 풍부한 Markdown 편집기가 필요한 경우 @uiwjs/react-markdown-editor를 사용할 수 있습니다.

@uiw/react-markdown-editor : react.js 및 typeScript와 함께 구현 된 미리보기가있는 마크 다운 편집기.
@uiw/react-md-editor : react.js 및 typeScript와 함께 구현 된 미리보기가있는 간단한 마크 다운 편집기.
@uiw/react-textArea-code-editor : 구문 하이라이트가있는 간단한 코드 편집기.
@uiw/react-codemirror : React의 Codemirror 구성 요소. @codemirror
@uiw/react-monacoeditor : React의 모나코 편집기 구성 요소.

기고자

언제나 그렇듯이 놀라운 기고자 덕분에!

액션 컨덕터로 제작되었습니다.

특허

MIT 라이센스에 따라 라이센스.

확장하다

react markdown preview