diff --git a/website/package-lock.json b/website/package-lock.json
index af557da4f..3c89ec8a8 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -16,6 +16,7 @@
"@types/node": "18.11.9",
"@types/react": "18.0.25",
"@types/react-dom": "18.0.8",
+ "acorn": "^8.8.1",
"browser-monads": "^1.0.0",
"classnames": "^2.3.2",
"eslint": "8.27.0",
@@ -25,6 +26,7 @@
"md-attr-parser": "^1.3.0",
"next": "13.0.2",
"next-mdx-remote": "^4.2.0",
+ "parse-numeric-range": "^1.3.0",
"prettier": "^2.7.1",
"prop-types": "^15.8.1",
"react": "18.2.0",
@@ -4303,6 +4305,11 @@
"url": "https://github.com/sponsors/wooorm"
}
},
+ "node_modules/parse-numeric-range": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+ "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+ },
"node_modules/path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -8765,6 +8772,11 @@
"is-hexadecimal": "^2.0.0"
}
},
+ "parse-numeric-range": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+ "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+ },
"path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
diff --git a/website/package.json b/website/package.json
index 92fac38c6..94678bda1 100644
--- a/website/package.json
+++ b/website/package.json
@@ -21,6 +21,7 @@
"@types/node": "18.11.9",
"@types/react": "18.0.25",
"@types/react-dom": "18.0.8",
+ "acorn": "^8.8.1",
"browser-monads": "^1.0.0",
"classnames": "^2.3.2",
"eslint": "8.27.0",
@@ -30,6 +31,7 @@
"md-attr-parser": "^1.3.0",
"next": "13.0.2",
"next-mdx-remote": "^4.2.0",
+ "parse-numeric-range": "^1.3.0",
"prettier": "^2.7.1",
"prop-types": "^15.8.1",
"react": "18.2.0",
diff --git a/website/plugins/getProps.mjs b/website/plugins/getProps.mjs
index 1b9508ac0..6eb2fdc5c 100644
--- a/website/plugins/getProps.mjs
+++ b/website/plugins/getProps.mjs
@@ -17,7 +17,8 @@ const getProps = (estree) => {
return {}
}
- const estreeBodyFirstNode = estree.body[0]
+ const estreeBodyFirstNode =
+ estree.body[0].type === 'BlockStatement' ? estree.body[0].body[0] : estree.body[0]
if (estreeBodyFirstNode.type !== 'ExpressionStatement' || !estreeBodyFirstNode.expression) {
return {}
diff --git a/website/plugins/remarkCodeBlocks.mjs b/website/plugins/remarkCodeBlocks.mjs
index bbf2fcd2c..9956f6767 100644
--- a/website/plugins/remarkCodeBlocks.mjs
+++ b/website/plugins/remarkCodeBlocks.mjs
@@ -1,10 +1,12 @@
/**
* Support titles, line highlights and more for code blocks
*/
-
+import { Parser } from 'acorn'
import { visit } from 'unist-util-visit'
import parseAttr from 'md-attr-parser'
+import getProps from './getProps.mjs'
+
const defaultOptions = {
defaultPrefix: '###',
prefixMap: {
@@ -48,7 +50,13 @@ function remarkCodeBlocks(userOptions = {}) {
const data = node.data || (node.data = {})
const hProps = data.hProperties || (data.hProperties = {})
- node.data.hProperties = Object.assign({}, hProps, attrs)
+
+ node.data.hProperties = Object.assign(
+ {},
+ hProps,
+ attrs,
+ getProps(Parser.parse(node.meta, { ecmaVersion: 'latest' }))
+ )
}
})
diff --git a/website/src/components/code.js b/website/src/components/code.js
index b1f134501..6f5e437c6 100644
--- a/website/src/components/code.js
+++ b/website/src/components/code.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+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'
@@ -94,12 +94,48 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
)
}
-function replacePrompt(line, prompt, isFirst = false) {
- let result = line
- const hasPrompt = result.startsWith(`${prompt} `)
- const showPrompt = hasPrompt || isFirst
- if (hasPrompt) result = result.slice(2)
- return result && showPrompt ? `${result}` : result
+const splitLines = (children) => {
+ const listChildrenPerLine = []
+
+ if (typeof children === 'string') {
+ listChildrenPerLine.push(...children.split('\n'))
+ } else {
+ listChildrenPerLine.push([])
+ let indexLine = 0
+ if (Array.isArray(children)) {
+ children.forEach((child) => {
+ if (typeof child === 'string' && child.includes('\n')) {
+ const listString = child.split('\n')
+ listString.forEach((string, index) => {
+ listChildrenPerLine[indexLine].push(string)
+
+ if (index !== listString.length - 1) {
+ indexLine += 1
+ listChildrenPerLine[indexLine] = []
+ }
+ })
+ } else {
+ listChildrenPerLine[indexLine].push(child)
+ }
+ })
+ } else {
+ listChildrenPerLine[indexLine].push(children)
+ indexLine += 1
+ listChildrenPerLine[indexLine] = []
+ }
+ }
+
+ const listLine = listChildrenPerLine[listChildrenPerLine.length - 1]
+ if (listLine === '' || (listLine.length === 1 && listLine[0] === '')) {
+ listChildrenPerLine.pop()
+ }
+
+ return listChildrenPerLine.map((childrenPerLine, index) => (
+ <>
+ {childrenPerLine}
+ {index !== listChildrenPerLine.length - 1 && '\n'}
+
+ ))
}
function parseArgs(raw) {
@@ -123,82 +159,128 @@ function parseArgs(raw) {
return result
}
-function convertLine(line, i) {
- const cliRegex = /^(\$ )?python -m spacy/
- if (cliRegex.test(line)) {
- const text = line.replace(cliRegex, '')
- const args = parseArgs(text)
- const cmd = Object.keys(args).map((key, i) => {
- const value = args[key]
- return value === null || value === true || i === 0 ? key : `${key} ${value}`
- })
- return (
-
-
- python -m
- {' '}
- spacy{' '}
- {cmd.map((item, j) => {
- const isCmd = j === 0
- const url = isCmd ? `/api/cli#${item.replace(' ', '-')}` : null
- const isAbstract = isString(item) && /^\[(.+)\]$/.test(item)
- const itemClassNames = classNames(classes['cli-arg'], {
- [classes['cli-arg-highlight']]: isCmd,
- [classes['cli-arg-emphasis']]: isAbstract,
- })
- const text = isAbstract ? item.slice(1, -1) : item
- return (
-
- {j !== 0 && ' '}
-
-
- {text}
-
-
-
- )
- })}
-
- )
+const flattenReact = (children) => {
+ if (children === null || children === undefined || children === false) {
+ return []
}
- const htmlLine = replacePrompt(highlightCode('bash', line), '$')
- return htmlToReact(htmlLine)
+
+ if (typeof children === 'string') {
+ return [children]
+ }
+
+ if (children.props) {
+ return flattenReact(children.props.children)
+ }
+
+ return children.flatMap(flattenReact)
}
-function formatCode(html, lang, prompt) {
- if (lang === 'cli') {
- const lines = html
- .trim()
- .split('\n')
- .map((line) =>
- line
- .split(' | ')
- .map((l, i) => convertLine(l, i))
- .map((l, j) => (
-
- {j !== 0 && | }
- {l}
-
- ))
- )
- return lines.map((line, i) => (
-
- {i !== 0 &&
}
- {line}
-
- ))
+const checkoutForComment = (line) => {
+ const lineParts = line.split(' # ')
+
+ if (lineParts.length !== 2) {
+ return line
}
- const result = html
- .split('\n')
- .map((line, i) => {
- let newLine = prompt ? replacePrompt(line, prompt, i === 0) : line
- if (lang === 'diff' && !line.startsWith('<')) {
- newLine = highlightCode('python', line)
- }
- return newLine
- })
- .join('\n')
- return htmlToReact(result)
+
+ return (
+ <>
+ {lineParts[0]}
+ {` `}
+
+
+ )
+}
+
+const convertLine = (line, prompt) => {
+ const lineFlat = flattenReact(line).join('')
+ if (!lineFlat.startsWith(`${prompt} `)) {
+ return line
+ }
+
+ const lineWithoutPrompt = lineFlat.slice(prompt.length + 1)
+
+ const cliRegex = /^python -m spacy/
+
+ if (!cliRegex.test(lineWithoutPrompt)) {
+ return {checkoutForComment(lineWithoutPrompt)}
+ }
+
+ const text = lineWithoutPrompt.replace(cliRegex, '')
+ const args = parseArgs(text)
+ const cmd = Object.keys(args).map((key, i) => {
+ const value = args[key]
+ return value === null || value === true || i === 0 ? key : `${key} ${value}`
+ })
+ return (
+
+ python -m spacy{' '}
+ {cmd.map((item, j) => {
+ const isCmd = j === 0
+ const url = isCmd ? `/api/cli#${item.replace(' ', '-')}` : null
+ const isAbstract = isString(item) && /^\[(.+)\]$/.test(item)
+ const itemClassNames = classNames(classes['cli-arg'], {
+ [classes['cli-arg-highlight']]: isCmd,
+ [classes['cli-arg-emphasis']]: isAbstract,
+ })
+ const text = isAbstract ? item.slice(1, -1) : item
+ return (
+
+ {j !== 0 && ' '}
+
+
+ {text}
+
+
+
+ )
+ })}
+
+ )
+}
+
+const addLineHighlight = (children, highlight) => {
+ if (!highlight) {
+ return children
+ }
+ const listHighlight = rangeParser(highlight)
+
+ if (listHighlight.length === 0) {
+ return children
+ }
+
+ return children.map((child, index) => {
+ const isHighlight = listHighlight.includes(index + 1)
+ return (
+
+ {child}
+
+ )
+ })
+}
+
+const CodeHighlighted = ({ children, highlight }) => {
+ const [html, setHtml] = useState()
+
+ useEffect(
+ () =>
+ setHtml(
+ addLineHighlight(
+ splitLines(children).map((line) => convertLine(line, '$')),
+ highlight
+ )
+ ),
+ [children, highlight]
+ )
+
+ return <>{html}
}
export class Code extends React.Component {
@@ -255,16 +337,12 @@ export class Code extends React.Component {
)
}
- const codeText = Array.isArray(children) ? children.join('') : children || ''
- const highlightRange = highlight ? rangeParser.parse(highlight).filter((n) => n > 0) : []
- const rawHtml = ['none', 'cli'].includes(lang)
- ? codeText
- : highlightCode(lang, codeText, highlightRange)
- const html = formatCode(rawHtml, lang, prompt)
return (
<>
{title && {title}
}
- {html}
+
+ {children}
+
)
}