Блог

У меня есть приложение react amp; typescript. Это сообщение в блоге, и я получаю уценку из API. Я анализирую его с помощью showdown.

Проблема в том, что подсветка синтаксиса не работает с извлеченным кодом, но некоторые из моих собственных кодов работают нормально:

 export default function BlogDetail() {

    const mdContainerRef = useRef<null | HTMLDivElement>(null);

    useEffect(() => {
        (async () => {
            if (mdContainerRef.current) {
                const parser = new Converter();
                const html = parser.makeHtml(data.body_markdown);

                Prism.highlightAll();

                mdContainerRef.current.innerHTML = html
                    .replaceAll('<h3', '<h3 class="text-4xl mt-7 mb-2"')
                    .replaceAll('<h5', '<h5 class="text-xl mt-5"');
                // .replaceAll(
                //  '<pre><code class="js language-js"',
                //  '<pre class="javascript language-javascript"><code class="javascript language-javascript"'
                // ).replaceAll('<pre><code class="css language-css"', '<pre class="css // language-css"><code class="css language-css"');
            }

            setArticle(data);
        })();
    }, [slug, mdContainerRef]);

    return (
            <pre>
                <code className='language-javascript'>
                    {`onSubmit(e) {
                        e.preventDefault();
                        const job = {
                            title: 'Developer',
                            company: 'Facebook' 
                        };
                    }`}
                </code>
            </pre>

            <div ref={mdContainerRef}></div>
    );
}
 

Элементы pre amp; code , которые я визуализирую, имеют идеальную подсветку синтаксиса(я также импортировал prism.css). Однако извлеченная разметка не показывает никаких признаков подсветки синтаксиса. Вот изображение элементов в консоли

Как вы можете видеть, есть некоторое форматирование, например, изменен шрифт и цвет текста.

Теперь вот картинка с некоторым css-кодом:

Как вы можете видеть, у обоих из них нет подсветки синтаксиса. Однако позвольте мне обратить ваше внимание на элементы pre и code :

Игнорируйте отступ, но подсветка, похоже, работает нормально.

Если вы заметили, выше есть несколько прокомментированных кодов. Когда я раскомментирую это, это выглядит так:

Фон изменился, но подсветка синтаксиса по-прежнему отсутствует.

Любая помощь будет признательна! Заранее спасибо!

PS: Я открыт для использования других вариантов подсветки, пожалуйста, предоставьте демонстрационный/пример кода или дайте ссылку на документы