diff --git a/website/src/components/embed.js b/website/src/components/embed.js
index 14d333e97..a6050443c 100644
--- a/website/src/components/embed.js
+++ b/website/src/components/embed.js
@@ -5,7 +5,7 @@ import classNames from 'classnames'
import Link from './link'
import Button from './button'
import { InlineCode } from './code'
-import { markdownToReact } from './util'
+import { MarkdownToReact } from './util'
import classes from '../styles/embed.module.sass'
@@ -98,7 +98,7 @@ const Image = ({ src, alt, title, ...props }) => {
{title && (
- {markdownToReact(title, markdownComponents)}
+
)}
diff --git a/website/src/components/util.js b/website/src/components/util.js
index e3d5aef65..9640477b8 100644
--- a/website/src/components/util.js
+++ b/website/src/components/util.js
@@ -1,9 +1,10 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
import { Parser as HtmlToReactParser } from 'html-to-react'
-import remark from 'remark'
-import remark2react from 'remark-react'
import siteMetadata from '../../meta/site.json'
import { domain } from '../../meta/dynamicMeta'
+import remarkPlugins from '../../plugins/index.mjs'
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemote } from 'next-mdx-remote'
const htmlToReactParser = new HtmlToReactParser()
@@ -85,8 +86,25 @@ export function htmlToReact(html) {
* for HTML elements.
* @returns {Node} - The converted React elements.
*/
-export function markdownToReact(markdown, remarkReactComponents = {}) {
- return remark().use(remark2react, { remarkReactComponents }).processSync(markdown).contents
+export function MarkdownToReact({ markdown }) {
+ const [mdx, setMdx] = useState(null)
+
+ useEffect(() => {
+ const getMdx = async () => {
+ setMdx(
+ await serialize(markdown, {
+ parseFrontmatter: false,
+ mdxOptions: {
+ remarkPlugins,
+ },
+ })
+ )
+ }
+
+ getMdx()
+ }, [markdown])
+
+ return mdx ? : <>>
}
/**
diff --git a/website/src/templates/models.js b/website/src/templates/models.js
index 81f7a38da..10c50fcb3 100644
--- a/website/src/templates/models.js
+++ b/website/src/templates/models.js
@@ -13,7 +13,14 @@ import Icon from '../components/icon'
import Link, { OptionalLink } from '../components/link'
import Infobox from '../components/infobox'
import Accordion from '../components/accordion'
-import { isString, isEmptyObj, join, arrayToObj, abbrNum, markdownToReact } from '../components/util'
+import {
+ isString,
+ isEmptyObj,
+ join,
+ arrayToObj,
+ abbrNum,
+ MarkdownToReact,
+} from '../components/util'
import siteMetadata from '../../meta/site.json'
import languages from '../../meta/languages.json'
@@ -295,7 +302,7 @@ const Model = ({
python -m spacy download {name}
- {meta.description && markdownToReact(meta.description, MARKDOWN_COMPONENTS)}
+ {meta.description && }
{isError && error}
@@ -317,7 +324,7 @@ const Model = ({
)}
- {meta.notes && markdownToReact(meta.notes, MARKDOWN_COMPONENTS)}
+ {meta.notes && }
{hasInteractiveCode && (
{[
diff --git a/website/src/templates/universe.js b/website/src/templates/universe.js
index 80f3d25df..36bc224d5 100644
--- a/website/src/templates/universe.js
+++ b/website/src/templates/universe.js
@@ -16,7 +16,7 @@ import Main from '../components/main'
import Footer from '../components/footer'
import { H3, H5, Label, InlineList } from '../components/typography'
import { YouTube, SoundCloud, Iframe } from '../components/embed'
-import { github, markdownToReact } from '../components/util'
+import { github, MarkdownToReact } from '../components/util'
import { nightly, legacy } from '../../meta/dynamicMeta'
import universe from '../../meta/universe.json'
@@ -258,7 +258,11 @@ const Project = ({ data, components }) => (
/>
)}
- {data.description && {markdownToReact(data.description, components)}}
+ {data.description && (
+
+ )}
{data.code_example && (