3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-31 15:29:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(live-codeblock): add support for noInline to interactive code blocks (#7514)

Browse source 
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
This commit is contained in:
JP 2022-06-02 01:34:20 -07:00 • committed by GitHub
parent 6afc902672
commit f25ee0cbf5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts vendored
View file

@ -5,6 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
/// <reference types="@docusaurus/theme-classic" />
/// <reference types="@docusaurus/module-type-aliases" />
declare module '@docusaurus/theme-live-codeblock' {
export type ThemeConfig = {
liveCodeBlock: {
@ -14,9 +17,12 @@ declare module '@docusaurus/theme-live-codeblock' {
}
declare module '@theme/Playground' {
import type {Props as BaseProps} from '@theme/CodeBlock';
import type {LiveProviderProps} from 'react-live';
export interface Props extends LiveProviderProps {
type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
export interface Props extends CodeBlockProps, LiveProviderProps {
children: string;
}
export default function Playground(props: LiveProviderProps): JSX.Element;

3
packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
View file

@ -93,11 +93,14 @@ export default function Playground({
} = themeConfig as ThemeConfig;
const prismTheme = usePrismTheme();
const noInline = props.metastring?.includes('noInline') ?? false;
return (
<div className={styles.playgroundContainer}>
{/* @ts-expect-error: type incompatibility with refs */}
<LiveProvider
code={children.replace(/\n$/, '')}
noInline={noInline}
transformCode={transformCode ?? ((code) => `${code};`)}
theme={prismTheme}
{...props}>