fix: Fix the code highlight issue.

Author: jaywcjlove

package.json

@@ -45,8 +45,7 @@
   },
   "dependencies": {
     "@babel/runtime": "7.13.10",
-    "@types/prismjs": "1.16.4",
-    "prismjs": "1.23.0",
+    "@mapbox/rehype-prism": "0.6.0",
     "rehype-raw": "5.1.0",
     "remark-gfm": "1.0.0",
     "react-markdown": "6.0.1"

src/index.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useImperativeHandle } from 'react';
+import React, { useImperativeHandle } from 'react';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
-import Prism from 'prismjs';
-import 'prismjs/components/prism-markup';
-import { loadLang } from './langs';
+import rehypePrism from '@mapbox/rehype-prism';
 import './styles/markdown.less';
 import './styles/markdowncolor.less';
 
@@ -19,48 +17,22 @@ export type MarkdownPreviewProps = {
 
 export type MarkdownPreviewRef = {
   mdp: React.RefObject<HTMLDivElement>;
-  lang: string[],
 } & MarkdownPreviewProps;
 
 export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props, ref) => {
   const { className, source, style, onScroll, onMouseOver, warpperElement = {}, ...other  } = props || {};
   const mdp = React.createRef<HTMLDivElement>();
-  const loadedLang = React.useRef<string[]>(['markup']);
-  useEffect(() => {
-    highlight();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [source]);
-
-  async function highlight() {
-    if (!mdp.current) return;
-    const codes = mdp.current.getElementsByTagName('code') as unknown as HTMLElement[];
-    for (const val of codes) {
-      const tag = val.parentNode as HTMLElement;
-      if (tag && tag.tagName === 'PRE' && /^language-/.test(val.className.trim())) {
-        const lang = val.className.trim().replace(/^language-/, '');
-        try {
-          if (!loadedLang.current.includes(lang as never)) {
-            loadedLang.current.push(lang);
-            await loadLang(lang);
-          }
-          await Prism.highlightElement(val);
-        } catch (error) { }
-      }
-    }
-  }
-
-  useImperativeHandle(ref, () => ({ ...props, lang: loadedLang.current, mdp }), [mdp, props]);
+  useImperativeHandle(ref, () => ({ ...props, mdp }), [mdp, props]);
 
   const cls = `wmde-markdown wmde-markdown-color ${className || ''}`;
   return (
     <div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} {...warpperElement} className={cls} style={style}>
       <ReactMarkdown
         {...other}
         plugins={[gfm,  ...(other.plugins || [])]}
-        rehypePlugins={[rehypeRaw, ...(other.rehypePlugins || [])]}
-      >
-        {source || ''}
-      </ReactMarkdown>
+        rehypePlugins={[rehypePrism, rehypeRaw, ...(other.rehypePlugins || [])]}
+        children={source || ''}
+      />
     </div>
   );
 });

src/langs.ts

@@ -1 +1,6 @@
 /// <reference types="react-scripts" />
+
+declare module '@mapbox/rehype-prism' {
+  const src: any;
+  export default src;
+}