如何使用Slate.js实现动态代码突出显示？

如何解决如何使用Slate.js实现动态代码突出显示？

我正在尝试构建具有代码突出显示支持的即时Markdown编辑器。

我正在使用https://www.slatejs.org/。

这个想法是当你这样写的时候：

import Head from "next/head";
import { useRouter } from "next/router";

export default function Result({ scoreValue }) () {

let encodedURL = encodeURIComponent(scoreValue);

  return (
    <>
      <Head>
        <Meta property="og:url" content="https://myapp.com" />
        <Meta property="og:type" content="website" />
        <Meta property="og:title" content="app title" />
        <Meta property="og:image:width" content="1200" />
        <Meta property="og:image:height" content="627" />
        <Meta
          property="og:image"
          content={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${encodedURL},ots-150,otc-FFFFFF`}
        />
      </Head>
      <div>
        <img
          src={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${encodedURL},otc-FFFFFF`}
          alt=""
        />
      </div>
    </>
  );
}

Result.getinitialProps = async function ({ query }) {
  const { score } = query;
  return { scoreValue: score };
};

我希望这段代码能够自动突出显示语法。我什至不确定是否有可能。有什么建议吗？