3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-28 16:37:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): make code blocks more standalone (#4315)

Browse source 
* refactor(v2): make code blocks styles standalone

* Rework

* Revert font size in playground headers

Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Alexey Pyltsyn 2021-03-04 20:22:34 +03:00 • committed by GitHub
parent 0383dd1496
commit a4b409c93b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 120 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

70
packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
View file

@ -19,39 +19,41 @@ export default function Playground({children, transformCode, ...props}) {
const prismTheme = usePrismTheme();
return (
<LiveProvider
key={isClient}
code={isClient ? children.replace(/\n$/, '') : ''}
transformCode={transformCode || ((code) => `${code};`)}
theme={prismTheme}
{...props}>
<div
className={clsx(
styles.playgroundHeader,
styles.playgroundEditorHeader,
)}>
<Translate
id="theme.Playground.liveEditor"
description="The live editor label of the live codeblocks">
Live Editor
</Translate>
</div>
<LiveEditor className={styles.playgroundEditor} />
<div
className={clsx(
styles.playgroundHeader,
styles.playgroundPreviewHeader,
)}>
<Translate
id="theme.Playground.result"
description="The result label of the live codeblocks">
Result
</Translate>
</div>
<div className={styles.playgroundPreview}>
<LivePreview />
<LiveError />
</div>
</LiveProvider>
<div className={styles.playgroundContainer}>
<LiveProvider
key={isClient}
code={isClient ? children.replace(/\n$/, '') : ''}
transformCode={transformCode || ((code) => `${code};`)}
theme={prismTheme}
{...props}>
<div
className={clsx(
styles.playgroundHeader,
styles.playgroundEditorHeader,
)}>
<Translate
id="theme.Playground.liveEditor"
description="The live editor label of the live codeblocks">
Live Editor
</Translate>
</div>
<LiveEditor className={styles.playgroundEditor} />
<div
className={clsx(
styles.playgroundHeader,
styles.playgroundPreviewHeader,
)}>
<Translate
id="theme.Playground.result"
description="The result label of the live codeblocks">
Result
</Translate>
</div>
<div className={styles.playgroundPreview}>
<LivePreview />
<LiveError />
</div>
</LiveProvider>
</div>
);
}

11
packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
View file

@ -5,16 +5,23 @@
* LICENSE file in the root directory of this source tree.
*/
.playgroundContainer {
margin-bottom: var(--ifm-leading);
}
.playgroundHeader {
letter-spacing: 0.08rem;
padding: 0.75rem;
text-transform: uppercase;
font-weight: bold;
font-size: var(--ifm-code-font-size);
}
.playgroundEditorHeader {
background: var(--ifm-color-emphasis-600);
color: var(--ifm-color-content-inverse);
border-top-left-radius: var(--ifm-global-radius);
border-top-right-radius: var(--ifm-global-radius);
}
.playgroundPreviewHeader {
@ -23,7 +30,8 @@
}
.playgroundEditor {
font-family: var(--ifm-font-family-monospace) !important;
font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
var(--ifm-font-family-monospace) !important;
/*rtl:ignore*/
direction: ltr;
}
@ -32,6 +40,5 @@
border: 1px solid var(--ifm-color-emphasis-200);
border-bottom-left-radius: var(--ifm-global-radius);
border-bottom-right-radius: var(--ifm-global-radius);
position: relative;
padding: 1rem;
}