Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

RehypeMermaid plugin not working

Abierto
  • ¿Algo no está bien?
#238 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend, web-dev

Línea de trabajo

Reproduce the supplied TypeScript/React example with the Mermaid fenced block and inspect how rehypePlugins is passed to MarkdownPreview. Compare the output with the expected Mermaid diagram; done means the block is processed as a diagram rather than rendered as plain code.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

This is the code I'm rendering with:-

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

export default function MyMarkdownPreview({ data, setData }: { data: string; setData: (data: string) => void }) {
	return (
		<MarkdownPreview
			source={data}
			wrapperElement={{
				'data-color-mode': 'light',
			}}
			rehypePlugins={[rehypeMermaid]}
			rehypeRewrite={(node, index, parent) => {
				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
				// @ts-ignore
				if (node.tagName === 'a' && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName as string)) {
					parent.children = parent.children.slice(1);
				}
			}}
		/>
	);
}

The md text I'm rendering with:-

```mermaid
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
```

It just renders it like this:-
image

Lenguaje dominante
TypeScript
Estrellas
350
Forks
54
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de uiwjs/react-markdown-preview

Todos los issues de uiwjs/react-markdown-preview

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.