feat(theme-classic): syntax-highlighting for inline code

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -354,6 +354,18 @@ declare module '@theme/CodeBlock' {
   export default function CodeBlock(props: Props): JSX.Element;
 }
 
+declare module '@theme/CodeInline' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly language?: string;
+  }
+
+  export default function CodeInline(props: Props): JSX.Element;
+}
+
 declare module '@theme/CodeBlock/CopyButton' {
   export interface Props {
     readonly code: string;

packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {usePrismTheme, useThemeConfig} from '@docusaurus/theme-common';
+import Highlight, {defaultProps, type Language} from 'prism-react-renderer';
+import type {Props} from '@theme/CodeInline';
+
+export default function CodeInline({
+  language: languageProp,
+  className = '',
+  children,
+}: Props): JSX.Element {
+  const {
+    prism: {defaultLanguage},
+  } = useThemeConfig();
+  const language = languageProp ?? defaultLanguage ?? 'text';
+  const prismTheme = usePrismTheme();
+
+  if (!children || typeof children !== 'string') {
+    return <code className={className}>{children}</code>;
+  }
+
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={prismTheme}
+      code={children}
+      language={language as Language}>
+      {({
+        className: highlightClassName,
+        tokens,
+        getLineProps,
+        getTokenProps,
+      }) => {
+        if (tokens.length !== 1) {
+          // This is actually multi-line (or empty) code.
+          // Multi-line _should_ never happen.
+          // Just return the code without highlighting I guess?
+          return children;
+        }
+        return (
+          <code
+            {...getLineProps({
+              line: tokens[0]!,
+              className: clsx(
+                className,
+                `language-${language}`,
+                highlightClassName,
+              ),
+            })}>
+            {tokens[0]!.map((token, key) => (
+              <span key={key} {...getTokenProps({token})} />
+            ))}
+          </code>
+        );
+      }}
+    </Highlight>
+  );
+}

packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx

@@ -9,6 +9,7 @@ import type {ComponentProps} from 'react';
 import React, {isValidElement} from 'react';
 import CodeBlock from '@theme/CodeBlock';
 import type {Props} from '@theme/MDXComponents/Code';
+import CodeInline from '@theme/CodeInline';
 
 export default function MDXCode(props: Props): JSX.Element {
   const inlineElements: (string | undefined)[] = [
@@ -53,7 +54,7 @@ export default function MDXCode(props: Props): JSX.Element {
   );
 
   return shouldBeInline ? (
-    <code {...props} />
+    <CodeInline {...(props as ComponentProps<typeof CodeInline>)} />
   ) : (
     <CodeBlock {...(props as ComponentProps<typeof CodeBlock>)} />
   );

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -57,6 +57,20 @@ console.log('Every repo must come with a mascot.');
 
 </BrowserWindow>
 
+To use syntax-highlighting for inline code, you have to use the `code` tag:
+
+```md
+Some text with <code language="js">const i = 0 // inline JS</code>.
+```
+
+The same language strings have to be used for inline code as for code blocks.
+
+<BrowserWindow>
+
+Some text with <code language="js">const i = 0 // inline JS</code>.
+
+</BrowserWindow>
+
 ### Theming {#theming}
 
 By default, the Prism [syntax highlighting theme](https://github.com/FormidableLabs/prism-react-renderer#theming) we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js). You can change this to another theme by passing `theme` field in `prism` as `themeConfig` in your docusaurus.config.js.