From b43adb67f376a9f51239ffd5b5dac064c08bc1ea Mon Sep 17 00:00:00 2001 From: Patrik Date: Mon, 27 Feb 2023 16:39:53 +0100 Subject: [PATCH 1/3] feat(theme-classic): syntax-highlighting for inline code --- .../src/theme-classic.d.ts | 10 +++++ .../src/theme/CodeInline/index.tsx | 44 +++++++++++++++++++ .../src/theme/MDXComponents/Code.tsx | 3 +- .../markdown-features-code-blocks.mdx | 14 ++++++ 4 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index d3006865e8e7..60188c9b31f2 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/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; 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..b4544d6ff06a --- /dev/null +++ b/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 ( + + + {({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) => ( + + )); + }} + + + ); +} 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. From e0761fc86a6ed16a6adcafa3ce96fb42704201b1 Mon Sep 17 00:00:00 2001 From: Patrik Date: Mon, 27 Feb 2023 17:58:03 +0100 Subject: [PATCH 2/3] fix: support non-string content --- .../docusaurus-theme-classic/src/theme-classic.d.ts | 4 +++- .../src/theme/CodeInline/index.tsx | 10 ++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 60188c9b31f2..d3d0e8d37f32 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -355,8 +355,10 @@ declare module '@theme/CodeBlock' { } declare module '@theme/CodeInline' { + import type {ReactNode} from 'react'; + export interface Props { - readonly children: string; + readonly children: ReactNode; readonly className?: string; readonly language?: string; } diff --git a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx index b4544d6ff06a..785da4122591 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx @@ -15,13 +15,17 @@ export default function CodeInline({ language: languageProp, className = '', children, -}: Props) { +}: Props): JSX.Element { const { prism: {defaultLanguage}, } = useThemeConfig(); const language = languageProp ?? defaultLanguage ?? 'text'; const prismTheme = usePrismTheme(); + if (!children || typeof children !== 'string') { + return {children}; + } + return ( {({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? + // 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) => ( From 02a6e5c1bcc6f389d4361abf698f68dba8060bd0 Mon Sep 17 00:00:00 2001 From: Patrik Date: Tue, 28 Feb 2023 18:11:54 +0100 Subject: [PATCH 3/3] feat: apply line props and styles --- .../src/theme/CodeInline/index.tsx | 53 ++++++++++++------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx index 785da4122591..304ae721d84e 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx @@ -27,24 +27,39 @@ export default function CodeInline({ } return ( - - - {({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) => ( - - )); - }} - - + + {({ + 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) => ( + + ))} + + ); + }} + ); }