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

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

@@ -354,6 +354,16 @@ declare module '@theme/CodeBlock' {
   export default function CodeBlock(props: Props): JSX.Element;
 }
 
+declare module '@theme/CodeInline' {
+  export interface Props {
+    readonly children: string;
+    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,44 @@
+/**
+ * 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) {
+  const {
+    prism: {defaultLanguage},
+  } = useThemeConfig();
+  const language = languageProp ?? defaultLanguage ?? 'text';
+  const prismTheme = usePrismTheme();
+
+  return (
+    <code className={clsx(className, `language-${language}`)}>
+      <Highlight
+        {...defaultProps}
+        theme={prismTheme}
+        code={children}
+        language={language as Language}>
+        {({tokens, 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 tokens[0]!.map((token, key) => (
+            <span key={key} {...getTokenProps({token, key})} />
+          ));
+        }}
+      </Highlight>
+    </code>
+  );
+}

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.