diff --git a/website/src/components/code.js b/website/src/components/code.js
index 120c94364..680cf8674 100644
--- a/website/src/components/code.js
+++ b/website/src/components/code.js
@@ -14,8 +14,7 @@ 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'
+import { isString } from './util'
 import Link, { OptionalLink } from './link'
 import GitHubCode from './github'
 import Juniper from './juniper'
@@ -23,58 +22,8 @@ import classes from '../styles/code.module.sass'
 import siteMetadata from '../../meta/site.json'
 import { binderBranch } from '../../meta/dynamicMeta.mjs'
 
-const WRAP_THRESHOLD = 30
 const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']
 
-function linkType(el, showLink = true) {
-    if (!isString(el) || !el.length) return el
-    const elStr = el.trim()
-    if (!elStr) return el
-    const typeUrl = CUSTOM_TYPES[elStr]
-    const url = typeUrl == true ? DEFAULT_TYPE_URL : typeUrl
-    const ws = el[0] == ' '
-    return url && showLink ? (
-        <Fragment>
-            {ws && ' '}
-            <Link to={url} hideIcon>
-                {elStr}
-            </Link>
-        </Fragment>
-    ) : (
-        el
-    )
-}
-
-export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
-    // Hacky, but we're temporarily replacing a dot to prevent it from being split during highlighting
-    const TMP_DOT = '۔'
-    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 : 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]
-    const annotClassNames = classNames(
-        'type-annotation',
-        `language-${lang}`,
-        classes['inline-code'],
-        classes['type-annotation'],
-        {
-            [classes['wrap']]: code.length >= WRAP_THRESHOLD,
-        }
-    )
-    return (
-        <span className={annotClassNames} role="code" aria-label="Type annotation">
-            {elements.map((el, i) => (
-                <Fragment key={i}>{linkType(el, !!link)}</Fragment>
-            ))}
-            {meta && <span className={classes['type-annotation-meta']}>{meta}</span>}
-        </span>
-    )
-}
-
 const splitLines = (children) => {
     const listChildrenPerLine = []
 
diff --git a/website/src/components/typeAnnotation.js b/website/src/components/typeAnnotation.js
new file mode 100644
index 000000000..0a054b6e5
--- /dev/null
+++ b/website/src/components/typeAnnotation.js
@@ -0,0 +1,58 @@
+import React, { Fragment } from 'react'
+import classNames from 'classnames'
+import Prism from 'prismjs'
+import CUSTOM_TYPES from '../../meta/type-annotations.json'
+import { isString, htmlToReact } from './util'
+import Link from './link'
+import classes from '../styles/code.module.sass'
+
+export const WRAP_THRESHOLD = 30
+
+function linkType(el, showLink = true) {
+    if (!isString(el) || !el.length) return el
+    const elStr = el.trim()
+    if (!elStr) return el
+    const typeUrl = CUSTOM_TYPES[elStr]
+    const url = typeUrl == true ? DEFAULT_TYPE_URL : typeUrl
+    const ws = el[0] == ' '
+    return url && showLink ? (
+        <Fragment>
+            {ws && ' '}
+            <Link to={url} hideIcon>
+                {elStr}
+            </Link>
+        </Fragment>
+    ) : (
+        el
+    )
+}
+
+export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
+    // Hacky, but we're temporarily replacing a dot to prevent it from being split during highlighting
+    const TMP_DOT = '۔'
+    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 : 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]
+    const annotClassNames = classNames(
+        'type-annotation',
+        `language-${lang}`,
+        classes['inline-code'],
+        classes['type-annotation'],
+        {
+            [classes['wrap']]: code.length >= WRAP_THRESHOLD,
+        }
+    )
+    return (
+        <span className={annotClassNames} role="code" aria-label="Type annotation">
+            {elements.map((el, i) => (
+                <Fragment key={i}>{linkType(el, !!link)}</Fragment>
+            ))}
+            {meta && <span className={classes['type-annotation-meta']}>{meta}</span>}
+        </span>
+    )
+}
diff --git a/website/src/remark.js b/website/src/remark.js
index fe067a76f..a8f5c4e3a 100644
--- a/website/src/remark.js
+++ b/website/src/remark.js
@@ -1,7 +1,8 @@
 import Link from './components/link'
 import Section, { Hr } from './components/section'
 import { Table, Tr, Th, Tx, Td } from './components/table'
-import { Code, TypeAnnotation } from './components/code'
+import { Code } from './components/code'
+import { TypeAnnotation } from './components/typeAnnotation'
 import { InlineCode } from './components/inlineCode'
 import CodeBlock, { Pre } from './components/codeBlock'
 import { Ol, Ul, Li } from './components/list'