diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index d3006865e8e7..d3d0e8d37f32 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/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;
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx
new file mode 100644
index 000000000000..304ae721d84e
--- /dev/null
+++ b/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 {children}
;
+ }
+
+ return (
+
+ {({
+ 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 (
+
+ {tokens[0]!.map((token, key) => (
+
+ ))}
+
+ );
+ }}
+
+ );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
index 6bf8f730eb86..75c8cd6e845e 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
+++ b/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 ? (
-
+ )} />
) : (
)} />
);
diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
index fd6d65f7e522..34d92aecbd46 100644
--- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -57,6 +57,20 @@ console.log('Every repo must come with a mascot.');
+To use syntax-highlighting for inline code, you have to use the `code` tag:
+
+```md
+Some text with const i = 0 // inline JS
.
+```
+
+The same language strings have to be used for inline code as for code blocks.
+
+
+
+Some text with const i = 0 // inline JS
.
+
+
+
### 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.