diff --git a/website/next.config.mjs b/website/next.config.mjs index 6fb03e307..df3b1d01d 100644 --- a/website/next.config.mjs +++ b/website/next.config.mjs @@ -2,13 +2,11 @@ import MDX from '@next/mdx' import PWA from 'next-pwa' 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: { diff --git a/website/pages/[...listPathPage].tsx b/website/pages/[...listPathPage].tsx index 2cc9eb3e4..b65073f55 100644 --- a/website/pages/[...listPathPage].tsx +++ b/website/pages/[...listPathPage].tsx @@ -5,7 +5,6 @@ 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' import { sidebarUsageFlat } from '../meta/sidebarFlat' @@ -94,10 +93,7 @@ export const getStaticProps: GetStaticProps = async ( const mdx = await serialize(fs.readFileSync(pathFileWithIndexAndExtension, 'utf-8'), { parseFrontmatter: true, - mdxOptions: { - remarkPlugins, - rehypePlugins, - }, + mdxOptions: { remarkPlugins }, }) if (!mdx.frontmatter) { diff --git a/website/plugins/rehypePlugins.mjs b/website/plugins/rehypePlugins.mjs deleted file mode 100644 index 6cd1c339d..000000000 --- a/website/plugins/rehypePlugins.mjs +++ /dev/null @@ -1,5 +0,0 @@ -import rehypePrism from '@mapbox/rehype-prism' - -const rehypePlugins = [rehypePrism] - -export default rehypePlugins diff --git a/website/plugins/remarkCodeBlocks.mjs b/website/plugins/remarkCodeBlocks.mjs index da969910f..f553a5523 100644 --- a/website/plugins/remarkCodeBlocks.mjs +++ b/website/plugins/remarkCodeBlocks.mjs @@ -54,32 +54,6 @@ function remarkCodeBlocks(userOptions = {}) { const meta = getProps(Parser.parse(node.meta, { ecmaVersion: 'latest' })) node.data.hProperties = Object.assign({}, hProps, attrs, meta) - - if (meta.executable) { - node.type = 'mdxJsxFlowElement' - node.name = 'CodeBlock' - node.attributes = [ - { - type: 'mdxJsxAttribute', - name: 'lang', - value: 'python', - }, - { - type: 'mdxJsxAttribute', - name: 'executable', - value: true, - }, - - // Adding the children like this makes sure - // they don't get further formatted by Remark - { - type: 'mdxJsxAttribute', - name: 'children', - value: node.value, - }, - ] - node.data['_mdxExplicitJsx'] = true - } } }) diff --git a/website/src/components/code.js b/website/src/components/code.js index d5dc79931..51067115b 100644 --- a/website/src/components/code.js +++ b/website/src/components/code.js @@ -2,10 +2,17 @@ import React, { Fragment, useEffect, useState } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' import rangeParser from 'parse-numeric-range' -import { window } from 'browser-monads' import Prism from 'prismjs' +// We manually load all the languages that are needed, which are currently only those: +import 'prismjs/components/prism-diff.min.js' +import 'prismjs/components/prism-bash.min.js' +import 'prismjs/components/prism-ini.min.js' +import 'prismjs/components/prism-jsx.min.js' +import 'prismjs/components/prism-json.min.js' +import 'prismjs/components/prism-markdown.min.js' import 'prismjs/components/prism-python.min.js' +import 'prismjs/components/prism-yaml.min.js' import CUSTOM_TYPES from '../../meta/type-annotations.json' import { isString, htmlToReact } from './util' @@ -197,12 +204,7 @@ const checkoutForComment = (line) => { ) } -const convertLine = (line, prompt) => { - const lineFlat = flattenReact(line).join('') - if (!lineFlat.startsWith(`${prompt} `)) { - return line - } - +const handlePromot = ({ lineFlat, prompt }) => { const lineWithoutPrompt = lineFlat.slice(prompt.length + 1) const cliRegex = /^python -m spacy/ @@ -244,6 +246,23 @@ const convertLine = (line, prompt) => { ) } +const convertLine = ({ line, prompt, lang }) => { + const lineFlat = flattenReact(line).join('') + if (lineFlat.startsWith(`${prompt} `)) { + return handlePromot({ lineFlat, prompt }) + } + + return lang === 'none' || !lineFlat ? ( + lineFlat + ) : ( + + ) +} + const addLineHighlight = (children, highlight) => { if (!highlight) { return children @@ -269,18 +288,18 @@ const addLineHighlight = (children, highlight) => { }) } -const CodeHighlighted = ({ children, highlight }) => { +export const CodeHighlighted = ({ children, highlight, lang }) => { const [html, setHtml] = useState() useEffect( () => setHtml( addLineHighlight( - splitLines(children).map((line) => convertLine(line, '$')), + splitLines(children).map((line) => convertLine({ line, prompt: '$', lang })), highlight ) ), - [children, highlight] + [children, highlight, lang] ) return <>{html} @@ -304,8 +323,7 @@ export class Code extends React.Component { } render() { - const { lang, title, executable, github, prompt, wrap, highlight, className, children } = - this.props + const { lang, title, executable, github, wrap, highlight, className, children } = this.props const codeClassNames = classNames(classes['code'], className, `language-${lang}`, { [classes['wrap']]: !!highlight || !!wrap || lang === 'cli', [classes['cli']]: lang === 'cli', @@ -327,7 +345,9 @@ export class Code extends React.Component { <> {title &&

{title}

} - {children} + + {children} + ) diff --git a/website/src/components/github.js b/website/src/components/github.js index a825b4d55..f39942673 100644 --- a/website/src/components/github.js +++ b/website/src/components/github.js @@ -1,17 +1,11 @@ import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' -import Prism from 'prismjs' - -// We manually load all the languages that are needed, which are currently only those: -import 'prismjs/components/prism-json.min.js' -import 'prismjs/components/prism-python.min.js' -import 'prismjs/components/prism-yaml.min.js' -import 'prismjs/components/prism-ini.min.js' import Icon from './icon' import Link from './link' import classes from '../styles/code.module.sass' +import { Code } from './code' const defaultErrorMsg = `Can't fetch code example from GitHub :( @@ -45,9 +39,6 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => { } }, [initialized, rawUrl, errorMsg]) - const highlighted = - lang === 'none' || !code ? code : Prism.highlight(code, Prism.languages[lang], lang) - return ( <>
@@ -60,7 +51,11 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
- + {code && ( + + {code} + + )} ) } diff --git a/website/src/templates/models.js b/website/src/templates/models.js index 10c50fcb3..38f6f4b3d 100644 --- a/website/src/templates/models.js +++ b/website/src/templates/models.js @@ -298,8 +298,8 @@ const Model = ({ {name} {meta.description && }