Estoy usando el paquete markdown-to-jsx npm para mostrar el descuento dentro de una aplicación ReactJS y quiero resaltar bloques de código con PrismJS. Así que creé un componente personalizado para anular los bloques de código:

 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/dark'; type RichArticleCodeBlockProps = { language: string; children: string; }; export const RichArticleCodeBlock: React.FC<RichArticleCodeBlockProps> = ({ language, children }) => { return ( <SyntaxHighlighter language={language} style={dark} wrapLines={true} showLineNumbers> {children} </SyntaxHighlighter> ); };

Y lo anulo declarándolo como una opción:

 import React from "react"; import MarkdownToJsx from "markdown-to-jsx"; import { RichArticleCodeBlock } from "./components/RichArticleCodeBlock"; type MarkdownProps = { value: string; wrapper?: typeof React.Fragment; className?: string; }; export const Markdown = (props: MarkdownProps) => { const markDownToJsxOptions = { forceBlock: true, wrapper: props.wrapper, overrides: { code: RichArticleCodeBlock } }; return ( <div className="markdown"> <MarkdownToJsx className="rich-article" options={markDownToJsxOptions}> {props.value} </MarkdownToJsx> </div> ); };

Mientras esto funciona, el código en línea también se resaltará/el estilo de PrismJS. El descuento que uso se ve así:

 Simply run `npm run watch` to transpile the TS files to JS files and run `npm start` to start the Function. ## How to use it The function looks like this: ```jsx const handleAddData = () => { const newData = [ ...ListData, { id: ListData.length + 1, building: alpha.charAt(Math.floor(Math.random() * alpha.length)), dueDate: '12/12/12' } ] setListData(newData) } /```

Entonces, tres acentos graves para un bloque de código y un solo acento grave para el código en línea. markdown-to-jsx representa el código en línea como elemento '<código>' y un bloque de código como '<pre>' '<código>'.

Pero parece que no puedo encontrar una forma o documentación sobre cómo anular un elemento de código con un pre como su antecesor directo.

(si solo anulo <código> como en el ejemplo anterior, también resaltará el código en línea.