Fix TypeAnnotation

website/next.config.mjs

@@ -1,11 +1,13 @@
 import MDX from '@next/mdx'
 
 import remarkPlugins from './plugins/index.mjs'
+import rehypePlugins from './plugins/rehypePlugins.mjs'
 
 const withMDX = MDX({
     extension: /\.mdx?$/,
     options: {
         remarkPlugins,
+        rehypePlugins,
         providerImportSource: '@mdx-js/react',
     },
     experimental: {

website/package.json

@@ -14,6 +14,7 @@
         "prettier": "prettier . --write"
     },
     "dependencies": {
+        "@mapbox/rehype-prism": "^0.8.0",
         "@mdx-js/loader": "^2.1.5",
         "@mdx-js/react": "^2.1.5",
         "@next/mdx": "^13.0.2",
@@ -33,6 +34,7 @@
         "next-mdx-remote": "^4.2.0",
         "parse-numeric-range": "^1.3.0",
         "prettier": "^2.7.1",
+        "prismjs": "^1.29.0",
         "prop-types": "^15.8.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",

website/pages/[...listPathPage].tsx

@@ -5,6 +5,7 @@ import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 import path from 'path'
 import Layout from '../src/templates'
 import remarkPlugins from '../plugins/index.mjs'
+import rehypePlugins from '../plugins/rehypePlugins.mjs'
 
 import recordSection from '../meta/recordSections'
 
@@ -94,6 +95,7 @@ export const getStaticProps: GetStaticProps<PropsPage, ParsedUrlQuery> = async (
         parseFrontmatter: true,
         mdxOptions: {
             remarkPlugins,
+            rehypePlugins,
         },
     })
 

website/plugins/rehypePlugins.mjs

@@ -0,0 +1,5 @@
+import rehypePrism from '@mapbox/rehype-prism'
+
+const rehypePlugins = [rehypePrism]
+
+export default rehypePlugins

website/src/components/code.js

@@ -1,10 +1,11 @@
 import React, { Fragment, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import highlightCode from 'gatsby-remark-prismjs/highlight-code.js'
-import 'prismjs-bibtex'
 import rangeParser from 'parse-numeric-range'
 import { window } from 'browser-monads'
+import Prism from 'prismjs'
+
+import 'prismjs/components/prism-python.min.js'
 
 import CUSTOM_TYPES from '../../meta/type-annotations.json'
 import { isString, htmlToReact } from './util'
@@ -71,7 +72,8 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
     const code = Array.isArray(children) ? children.join('') : children || ''
     const [rawText, meta] = code.split(/(?= \(.+\)$)/)
     const rawStr = rawText.replace(/\./g, TMP_DOT)
-    const rawHtml = lang === 'none' || !code ? code : highlightCode(lang, rawStr)
+    const rawHtml =
+        lang === 'none' || !code ? code : Prism.highlight(rawStr, Prism.languages[lang], lang)
     const html = rawHtml.replace(new RegExp(TMP_DOT, 'g'), '.').replace(/\n/g, ' ')
     const result = htmlToReact(html)
     const elements = Array.isArray(result) ? result : [result]