react markdown preview -Download - react markdown preview Quellcode herunterladen

React Markdown Preview

React Component Vorschau -Markdown -Text im Webbrowser. Die minimale Menge an CSS, um den Github -Markdown -Stil zu replizieren. Die aktuelle Dokumentwebsite wird mit dieser React -Komponente konvertiert.

Merkmale

? Unterstützen Sie Dark-Mode/Night-Mode. @v4
GitHub Style: Der Markdown -Inhalt wird so nahe wie möglich auf Github gerendert.
?? ‍τrecht unterstützen GFM (Autolink -Literale, Fußnoten, Streik, Tabellen, Tasklisten).
? Unterstützen Sie den automatischen Codeblock -Highlight.
? Unterstützung für die Definition von Stilen per Kommentar.
⛳️ Unterstützung für GFM -Fußnoten
⛳️ Unterstützung für Github Alert

Schneller Start

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

Nutzungsbeispiel

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

Deaktivieren Sie Header -Links

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

Highlight Line

Syntax: ```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 )
        }
      } }
    />
  ) ;
}

Zeilenzahlen anzeigen

Syntax: ```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 )
        }
      } }
    />
  ) ;
}

Code -Highlight

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

Code -Highlight entfernen

Das folgende Beispiel kann Ihnen helfen , den Code -Hervorhebung von Code aus dem Bundle auszuschließen. @uiw/react-markdown-preview/nohighlight Komponente enthält nicht das rehype-prism-plus Code-Highlighting-Paket, showLineNumbers und highlight line werden nicht mehr funktionieren. (#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 )
        }
      } }
    />
  ) ;
}

Ignorieren

Ignorieren Sie die Inhaltsanzeige über HTML -Kommentare, die in Github Readme gezeigt und in HTML ausgeschlossen sind.

 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 -->

Unterstützen Sie die benutzerdefinierte Katex -Vorschau

Katex ist eine schnelle, benutzerfreundliche JavaScript-Bibliothek für Tex Math Rendering im Web. Wir führen Mathematik-Rendering über KaTeX durch.

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

Unterstützen Sie die benutzerdefinierte Meerjungfrau -Vorschau

Verwenden von Meerjungfrau bis zur Erzeugung von Diagramm und Flussdiagramm aus Text auf ähnliche Weise wie Markdown

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

Sicherheit

Bitte beachten Sie, dass Markdown saniert werden muss, wenn Sie Ihren Autoren nicht vollständig vertrauen. Andernfalls ist Ihre App für XSS anfällig. Dies kann durch Hinzufügen von Rehypen-Sanitize als Plugin erreicht werden.

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

Optionen Requisiten

 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 , Standard: '' )
Markdown zu analysieren
className ( string? )
Wickeln Sie den Markdown in einem div mit diesem Klassennamen ein

Dies Details von ReactMarkdownProps . Upgrade react-markdown V9

children ( string , Standard: '' )
Markdown zu analysieren
className ( string? )
Wickeln Sie den Markdown in einem div mit diesem Klassennamen ein
skipHtml ( boolean , Standard: ~~false~~ -> true )
Ignorieren Sie HTML im Markdown vollständig
allowElement ( (element, index, parent) => boolean? Optional)
Funktion aufgerufen, um zu überprüfen, ob ein Element zulässig ist (wenn es wahr ist) oder nicht. allowedElements / disallowedElements werden zuerst verwendet!
remarkPlugins ( Array.<Plugin> , Standard: [] )
Liste der zu verwendenden Bemering -Plugins. Beispiele zum Übergeben von Optionen finden Sie im nächsten Abschnitt
rehypePlugins ( Array.<Plugin> , Standard: [] )
Liste der zu verwendenden Rehypen -Plugins. Beispiele zum Übergeben von Optionen finden Sie im nächsten Abschnitt

Notiz

Upgrade react-markdown V8 zu v9

`urlTransform` hinzufügen

Die transformImageUri und transformLinkUri wurden entfernt. Zwei Funktionen zu haben, ist ein bisschen viel, insbesondere weil es mehr URLs gibt, die Sie vielleicht ändern möchten (oder die möglicherweise unsicher sein könnten, damit wir sie sicher machen). Und ihr Name und ihre APIs waren etwas komisch. Sie können stattdessen die neue urlTransform -Requisite verwenden, um alle Ihre URLs zu ändern.

Entfernen Sie `linkTarget`

Die linkTarget -Option wurde entfernt; Sie sollten wahrscheinlich keine Ziele festlegen. Wenn Sie möchten, verwenden Sie rehype-external-links .

Entfernen `includeElementIndex`

Die Option includeElementIndex wurde entfernt, sodass index niemals an Komponenten übergeben wird. Schreiben Sie ein Plugin, um index zu übergeben:

Beispiele für Plugin

 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` entfernen

Die Option rawSourcePos wurde entfernt, sodass sourcePos niemals an Komponenten übergeben wird. Alle Komponenten werden über node übergeben, sodass Sie von ihnen node.position erhalten können.

`sourcePos` entfernen

Die sourcePos -Option wurde entfernt, sodass data-sourcepos niemals an Elemente übergeben werden. Schreiben Sie ein Plugin, um index zu übergeben:

Beispiele für Plugin

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

Entfernen Sie zusätzliche Requisiten, die an bestimmte Komponenten übergeben wurden

Beim Überschreiben von Komponenten werden diese Requisiten nicht mehr übergeben:

inline auf code - Erstellen Sie ein Plugin oder verwenden Sie pre für den Block
level auf h1 , h2 , h3 , h4 , h5 , h6 - node.tagName stattdessen überprüfen
checked an li -Überprüfen Sie task-list-item -Klasse oder props.children
index auf li - Erstellen Sie ein Plugin
ordered auf li - Erstellen Sie ein Plugin oder überprüfen Sie den übergeordneten Übergang
depth auf ol , ul - Erstellen Sie ein Plugin
auf ol , ul , node.tagName stattdessen ordered
isHeader auf td , th - node.tagName stattdessen überprüfen
isHeader auf tr - Erstellen Sie ein Plugin oder überprüfen Sie Kinder

Markdown -Funktionen

Unterstützt den CSS -Stil

Verwenden Sie HTML-Kommentare  , um die Anpassung der Markdown-Style zu unterstützen.

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

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

Unterstützung für GFM -Fußnoten

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

[ ^ 1 ] : My reference.

Ignorieren Sie die Inhaltsanzeige

 # Hello World

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

Good!

Ausgabe:

 < h1 > Hello World </ h1 >

< p > Good! </ p >

Unterstützung für Github -Warnungen

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

Unterstützen Sie Dark-Mode/Night-Mode

Standardmäßig wird der dark-mode automatisch entsprechend dem System umgeschaltet. Wenn Sie manuell wechseln müssen, legen Sie einfach den Parameter data-color-mode="dark" für den Körper ein.

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

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

Erben Sie benutzerdefinierte Farbvariablen durch Hinzufügen von .wmde-markdown-var Selektor.

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

Stellen Sie das light ein.

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

Entwicklung

Führt das Projekt im Entwicklungsmodus aus.

 # 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

Build die App für die Produktion im Build -Ordner.

npm run build

Der Build wird abgebaut und die Dateinamen enthalten die Hashes. Ihre App ist bereit für die Bereitstellung!

Alternativen

Wenn Sie mehr Funktionen für Funktionen benötigen, können Sie @UIWJS/React-Markdown-Editor verwenden

@uiw/react-markdown-editor: Ein Markdown-Editor mit Vorschau, der mit React.js und TypeScript implementiert ist.
@UIW/React-MD-Editor: Ein einfacher Markdown-Editor mit Vorschau, der mit React.js und TypeScript implementiert ist.
@uiw/react-textarea-code-editor: Ein einfacher Code-Editor mit Syntax-Hervorhebung.
@UIW/React-Codemirror: Codemirror-Komponente für React. @Codemirror
@UIW/React-Monacoeditor: Monaco-Editor-Komponente für React.

Mitwirkende

Wie immer dank unserer erstaunlichen Mitwirkenden!

Mit Aktionskontributoren gemacht.

Lizenz

Lizenziert unter der MIT -Lizenz.

Expandieren

react markdown preview