react markdown preview Téléchargement - react markdown preview du code source Télécharger

React Markdown Aperçu

React Composant Aperçu du texte Markdown dans le navigateur Web. La quantité minimale de CSS pour reproduire le style de marque GitHub. Le site Web de document actuel est converti à l'aide de ce composant React.

Caractéristiques

? Soutenez le mode noir / mode nocturne. @v4
?
?? ‍️ Soutenez le GFM (littéraux autolinques, notes de bas de page, strikethrough, tables, tasses).
? Prise en charge du bloc de code Automatic Highlight.
? Prise en charge des styles de définition via des commentaires.
⛳️ Prise en charge des notes de bas de page GFM
⛳️ Prise en charge de l'alerte GitHub

Démarrage rapide

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

Exemple d'utilisation

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

Désactiver les liens d'en-tête

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

ligne de mise en évidence

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

Afficher les numéros de ligne

Syntaxe: ```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 survient

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

Supprimer le code survient

L'exemple suivant peut vous aider à exclure le code de la mise en évidence du code par le fait d'être inclus dans le bundle. @uiw/react-markdown-preview/nohighlight Le composant ne contient pas le package de mise en évidence, les fonctions de ligne de mise en évidence de Code rehype-prism-plus , showLineNumbers et les fonctions highlight line ne fonctionneront plus. (# 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 )
        }
      } }
    />
  ) ;
}

Ignorer

Ignorez l'affichage du contenu via des commentaires HTML, illustré dans GitHub Readme, exclu dans 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 -->

Prise en charge de l'aperçu de Katex personnalisé

Katex est une bibliothèque JavaScript rapide et facile à utiliser pour le rendu de mathématiques TEX sur le Web, nous effectuons le rendu de mathématiques via 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 > ;
        } ,
      } }
    />
  ) ;
}

Prise en charge de l'aperçu de la sirène personnalisée

Utilisation de la sirène à la génération de diagramme et d'organigramme à partir de texte d'une manière similaire à celle de 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
      } }
    />
  ) ;
}

Sécurité

Veuillez noter que Markdown doit être désinfecté si vous ne faites pas entièrement confiance à vos auteurs. Sinon, votre application est vulnérable à XSS. Cela peut être réalisé en ajoutant du réhypyme-désanitize en tant que plugin.

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

Options d'accessoires

 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 , par défaut: '' )
Markdown pour analyser
className ( string? )
Enveloppez la marque dans une div avec ce nom de classe

Ces détails ReactMarkdownProps . Mise à niveau react-markdown V9

children ( string , par défaut: '' )
Markdown pour analyser
className ( string? )
Enveloppez la marque dans une div avec ce nom de classe
skipHtml ( boolean , par défaut: ~~false~~ -> true )
Ignorez complètement HTML dans Markdown
allowElement ( (element, index, parent) => boolean? , Facultatif)
Fonction appelée pour vérifier si un élément est autorisé (lorsque la vérité) ou non. allowedElements / disallowedElements est utilisé en premier!
remarkPlugins ( Array.<Plugin> , par défaut: [] )
Liste des plugins de remarques à utiliser. Voir la section suivante pour des exemples sur la façon de passer les options
rehypePlugins ( Array.<Plugin> , par défaut: [] )
Liste des plugins de réhype à utiliser. Voir la section suivante pour des exemples sur la façon de passer les options

Note

Mettre à niveau react-markdown V8 à V9

Ajouter `urlTransform`

Les transformImageUri et transformLinkUri ont été supprimés. Avoir deux fonctions est un peu trop, en particulier parce qu'il y a plus d'URL que vous voudrez peut-être changer (ou qui pourraient être dangereux, nous les faisons donc sécuriser). Et leur nom et leurs API étaient un peu bizarres. Vous pouvez plutôt utiliser le nouvel accessoire urlTransform pour modifier toutes vos URL.

Supprimer `linkTarget`

L'option linkTarget a été supprimée; Vous ne devriez probablement pas fixer des cibles. Si vous le souhaitez, utilisez rehype-external-links .

Retirer `includeElementIndex`

L'option includeElementIndex a été supprimée, donc index n'est jamais transmis aux composants. Écrivez un plugin pour passer index :

Afficher l'exemple de 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
      }
    } )
  }
}

Retirer `rawSourcePos`

L'option rawSourcePos a été supprimée, donc sourcePos n'est jamais transmis aux composants. Tous les composants sont passés node , vous pouvez donc obtenir node.position à partir d'eux.

Supprimer `sourcePos`

L'option sourcePos a été supprimée, de sorte que data-sourcepos n'est jamais transmise aux éléments. Écrivez un plugin pour passer index :

Afficher l'exemple de 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 )
      }
    } )
  }
}

Supprimer des accessoires supplémentaires passés à certains composants

Lors de l'écrasement des composants, ces accessoires ne sont plus passés:

inline sur code - Créez un plugin ou utilisez pre pour le bloc
level sur h1 , h2 , h3 , h4 , h5 , h6 - Vérifiez à la place node.tagName
checked li - Vérifiez la classe task-list-item ou vérifie props.children
index sur li - Créer un plugin
ordered sur li - Créez un plugin ou vérifiez le parent
depth sur ol , ul - Créez un plugin
ordered sur ol , ul - Vérifiez node.tagName à la place
isHeader sur td , th - Vérifiez node.tagName à la place
isHeader sur tr - Créez un plugin ou vérifiez les enfants

Caractéristiques de Markdown

Prise en charge du style CSS

Utilisez des commentaires HTML  Pour laisser la personnalisation du style de support de marque.

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

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

Prise en charge des notes de bas de page GFM

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

[ ^ 1 ] : My reference.

Ignorer l'affichage du contenu

 # Hello World

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

Good!

Sortir:

 < h1 > Hello World </ h1 >

< p > Good! </ p >

Prise en charge des alertes 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 } } />
  )
}

Prise en charge du mode noir / en mode nocturne

Par défaut, le dark-mode est automatiquement commuté en fonction du système. Si vous devez changer manuellement, définissez simplement le paramètre data-color-mode="dark" pour le corps.

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

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

Hériter des variables de couleur personnalisées en ajoutant .wmde-markdown-var sélecteur.

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

Définissez le thème light .

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

Développement

Exécute le projet en mode développement.

 # 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

Créez l'application pour la production dans le dossier de construction.

npm run build

La construction est minifiée et les noms de fichiers incluent les hachages. Votre application est prête à être déployée!

Alternatives

Si vous avez besoin de plus d'éditeur de Markdown riche en fonctionnalités, vous pouvez utiliser @ uiwjs / react-markdown-éditeur

@ UIW / React-Markdown-Editor: un éditeur de Markdown avec prévisualisation, implémenté avec react.js et typescript.
@ uiw / react-md-editor: un simple éditeur Markdown avec aperçu, implémenté avec react.js et dactylographe.
@ uiw / react-textarea-code-editor: un éditeur de code simple avec la syntaxe qui met en évidence.
@ UIW / React-CodeMirror: CodeMirror Composant pour React. @codemirror
@ uiw / react-monacoeditor: composant de l'éditeur Monaco pour React.

Contributeurs

Comme toujours, grâce à nos incroyables contributeurs!

Fait avec des contributeurs d'action.

Licence

Licencié sous la licence du MIT.

Développer

react markdown preview