react markdown preview

Vista previa de React Markdown

React Component Preview Markdown Text en el navegador web. La cantidad mínima de CSS para replicar el estilo de Markdown GitHub. El sitio web del documento actual se convierte utilizando este componente React.

Características

• ? Apoya el modo oscuro/en modo nocturno. @v4
• ?
• ?
• ? Admitir resaltado del bloque de código automático.
• ? Apoyo para definir estilos a través de comentarios.
• ⛳️ Soporte para las notas al pie de GFM
• ⛳️ Soporte para la alerta de GitHub

Comienzo rápido

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

Ejemplo de uso

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

Desactivar enlaces de encabezado

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

destacado

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

Mostrar números de línea

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

Resaltado del código

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

Eliminar el código destacado

El siguiente ejemplo puede ayudarlo a excluir el código de resaltado del código para que se incluya en el paquete. @uiw/react-markdown-preview/nohighlight Component no contiene el paquete de resaltado de código rehype-prism-plus , showLineNumbers y funciones highlight line ya no funcionarán. (#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 )
        }
      } }
    />
  ) ;
} 

Ignorar

Ignore la pantalla de contenido a través de comentarios HTML, que se muestran en GitHub ReadMe, excluidos en 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 --> 

Soporte de la vista previa personalizada de Katex

Katex es una biblioteca JavaScript rápida y fácil de usar para la representación de Tex Math en la web, realizamos una representación matemática a través de 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 > ;
        } ,
      } }
    />
  ) ;
} 

Soporte de la vista previa de sirena personalizada

Usar sirena a la generación de diagrama y diagrama de flujo del texto de manera similar al 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
      } }
    />
  ) ;
} 

Seguridad

Tenga en cuenta que Markdown debe desinfectarse si no confía completamente en sus autores. De lo contrario, su aplicación es vulnerable a XSS. Esto se puede lograr agregando Rehype-Sanitize como un complemento.

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

Propiedades de opciones

 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 , predeterminado: '' )
  Markdown para analizar
• className ( string? )
  Envuelva el Markdown en un div con este nombre de clase

Este ReactMarkdownProps detalla. Actualizar react-markdown v9

• children ( string , predeterminado: '' )
  Markdown para analizar
• className ( string? )
  Envuelva el Markdown en un div con este nombre de clase
• skipHtml ( boolean , predeterminado: false -> true )
  Ignore HTML en Markdown por completo
• allowElement ( (element, index, parent) => boolean? opcional)
  Función llamada para verificar si se permite un elemento (cuando es verdad) o no. ¡Se usa primero allowedElements / disallowedElements se usa primero!
• remarkPlugins ( Array.<Plugin> , predeterminado: [] )
  Lista de complementos de observación para usar. Consulte la siguiente sección para ver ejemplos sobre cómo aprobar opciones
• rehypePlugins ( Array.<Plugin> , predeterminado: [] )
  Lista de complementos de rehipo para usar. Consulte la siguiente sección para ver ejemplos sobre cómo aprobar opciones

Nota

Actualizar react-markdown V8 a v9

Agregar urlTransform

Se eliminaron transformImageUri y transformLinkUri . Tener dos funciones es un poco demasiado, particularmente porque hay más URL que es posible que desee cambiar (o que pueda ser inseguro, por lo que las hacemos seguros). Y su nombre y apis eran un poco raros. Puede usar el nuevo accesorio urlTransform en lugar de cambiar todas sus URL.

Eliminar linkTarget

Se eliminó la opción linkTarget ; Es probable que no establezca objetivos. Si lo desea, use rehype-external-links .

Eliminar includeElementIndex

Se eliminó la opción includeElementIndex , por lo que index nunca se pasa a los componentes. Escriba un complemento para pasar index :

Mostrar ejemplo de complemento

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

Eliminar rawSourcePos

Se eliminó la opción rawSourcePos , por lo que sourcePos nunca se pasa a los componentes. Todos los componentes se pasan por node , por lo que puede obtener node.position . Posición de ellos.

Eliminar sourcePos

Se eliminó la opción sourcePos , por lo que data-sourcepos nunca se pasa a los elementos. Escriba un complemento para pasar index :

Mostrar ejemplo de complemento

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

Eliminar accesorios adicionales pasados a ciertos componentes

Al sobrescribir los componentes, estos accesorios ya no se pasan:

• inline en code : cree un complemento o use pre para el bloque
• level en h1 , h2 , h3 , h4 , h5 , h6 - Compruebe node.tagName en su lugar
• checked li -Verifique la clase task-list-item o verifique props.children
• index en li : cree un complemento
• ordered en li : cree un complemento o verifique al padre
• depth en ol , ul - Crea un complemento
• ordered en ol , ul - Compruebe node.tagName en su lugar
• isHeader en td , th - verificar node.tagName en su lugar
• isHeader en tr - crea un complemento o verifica a los niños

Características de Markdown

Soporte para el estilo CSS

Use comentarios HTML <!--rehype:xxx--> para dejar que Markdown supera la personalización de estilo.

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

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

Soporte para las notas al pie de GFM

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

[ ^ 1 ] : My reference.

Ignorar la pantalla de contenido

 # Hello World

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

Good!

Producción:

 < h1 > Hello World </ h1 >

< p > Good! </ p >

Soporte para alertas de 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 } } />
  )
} 

Apoyar el modo oscuro/nocturno

Por defecto, el dark-mode se cambia automáticamente de acuerdo con el sistema. Si necesita cambiar manualmente, simplemente establezca el parámetro data-color-mode="dark" para el cuerpo.

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

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

Heredar variables de color personalizadas agregando .wmde-markdown-var selector.

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

Establezca el tema light .

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

Desarrollo

Ejecuta el proyecto en modo de desarrollo.

 # 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

Construye la aplicación para la producción a la carpeta de compilación.

npm run build

La construcción se minifica y los nombres de archivo incluyen los hashes. ¡Su aplicación está lista para ser implementada!

Alternativas

Si necesita más editor de markdown rico en funciones, puede usar @uiwjs/react-markdown-editor

• @UIW/React-Markdown-Editor: un editor de Markdown con View, implementado con React.js y TypeScript.
• @UIW/React-Md-Editor: un editor de marcado simple con View, implementado con React.js y TypeScript.
• @UIW/React-TextArea-Code-editor: un editor de código simple con resaltado de sintaxis.
• @UIW/React-Codemirror: componente CodeMirror para React. @codemirror
• @UIW/React-Monacoeditor: componente del editor de Monaco para React.

Colaboradores

Como siempre, ¡gracias a nuestros increíbles contribuyentes!

Hecho con contribuyentes de acción.

Licencia

Licenciado bajo la licencia del MIT.