Skip to content

Commit f25ee0c

Browse files
jpdriverslorber
jpdriver
and
slorber
authored
feat(live-codeblock): add support for noInline to interactive code blocks (#7514)
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
1 parent 6afc902 commit f25ee0c

3 files changed

Lines changed: 46 additions & 1 deletion

File tree

‎packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8+
/// <reference types="@docusaurus/theme-classic" />
9+
/// <reference types="@docusaurus/module-type-aliases" />
10+
811
declare module '@docusaurus/theme-live-codeblock' {
912
export type ThemeConfig = {
1013
liveCodeBlock: {
@@ -14,9 +17,12 @@ declare module '@docusaurus/theme-live-codeblock' {
1417
}
1518

1619
declare module '@theme/Playground' {
20+
import type {Props as BaseProps} from '@theme/CodeBlock';
1721
import type {LiveProviderProps} from 'react-live';
1822

19-
export interface Props extends LiveProviderProps {
23+
type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
24+
25+
export interface Props extends CodeBlockProps, LiveProviderProps {
2026
children: string;
2127
}
2228
export default function Playground(props: LiveProviderProps): JSX.Element;

‎packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,14 @@ export default function Playground({
9393
} = themeConfig as ThemeConfig;
9494
const prismTheme = usePrismTheme();
9595

96+
const noInline = props.metastring?.includes('noInline') ?? false;
97+
9698
return (
9799
<div className={styles.playgroundContainer}>
98100
{/* @ts-expect-error: type incompatibility with refs */}
99101
<LiveProvider
100102
code={children.replace(/\n$/, '')}
103+
noInline={noInline}
101104
transformCode={transformCode ?? ((code) => `${code};`)}
102105
theme={prismTheme}
103106
{...props}>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,42 @@ function MyPlayground(props) {
569569
</BrowserWindow>
570570
```
571571

572+
### Imperative Rendering (noInline)
573+
574+
The `noInline` option should be used to avoid errors when your code spans multiple components or variables.
575+
576+
````md
577+
```jsx live noInline
578+
const project = 'Docusaurus';
579+
580+
const Greeting = () => <p>Hello {project}!</p>;
581+
582+
render(<Greeting />);
583+
```
584+
````
585+
586+
Unlike an ordinary interactive code block, when using `noInline` React Live won't wrap your code in an inline function to render it.
587+
588+
You will need to explicitly call `render()` at the end of your code to display the output.
589+
590+
````mdx-code-block
591+
<BrowserWindow>
592+
593+
```jsx live noInline
594+
const project = "Docusaurus";
595+
596+
const Greeting = () => (
597+
<p>Hello {project}!</p>
598+
);
599+
600+
render(
601+
<Greeting />
602+
);
603+
```
604+
605+
</BrowserWindow>
606+
````
607+
572608
## Using JSX markup in code blocks {#using-jsx-markup}
573609

574610
Code block in Markdown always preserves its content as plain text, meaning you can't do something like:

0 commit comments

Comments
 (0)