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

fix(v2): remove auto wrap for code blocks (#2048)

Browse source
This commit is contained in:
Alexey Pyltsyn 2019-11-25 21:24:52 +03:00 • committed by Yangshun Tay
parent 91ef5c67cf
commit 10cd99b3e4
5 changed files with 107 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
View file

@ -63,43 +63,46 @@ export default ({children, className: languageClassName, metastring}) => {
}; };
return ( return (
<Highlight <div className={styles.codeBlockWrapper}>
{...defaultProps} <button
theme={prism.theme || defaultTheme} ref={button}
code={children.trim()} type="button"
language={language}> aria-label="Copy code to clipboard"
{({className, style, tokens, getLineProps, getTokenProps}) => ( className={styles.copyButton}
<div className={styles.codeBlockWrapper}> onClick={handleCopyCode}>
<pre {showCopied ? 'Copied' : 'Copy'}
ref={target} </button>
className={classnames(className, styles.codeBlock)}
style={style}>
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});
if (highlightLines.includes(i + 1)) { <Highlight
lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`; {...defaultProps}
} theme={prism.theme || defaultTheme}
code={children.trim()}
language={language}>
{({className, style, tokens, getLineProps, getTokenProps}) => (
<pre className={classnames(className, styles.codeBlock)}>
<code
ref={target}
className={classnames(className, styles.codeBlockLines)}
style={style}>
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});
return ( if (highlightLines.includes(i + 1)) {
<div key={i} {...lineProps}> lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
{line.map((token, key) => ( }
<span key={key} {...getTokenProps({token, key})} />
))} return (
</div> <div key={i} {...lineProps}>
); {line.map((token, key) => (
})} <span key={key} {...getTokenProps({token, key})} />
))}
</div>
);
})}
</code>
</pre> </pre>
<button )}
ref={button} </Highlight>
type="button" </div>
aria-label="Copy code to clipboard"
className={styles.copyButton}
onClick={handleCopyCode}>
{showCopied ? 'Copied' : 'Copy'}
</button>
</div>
)}
</Highlight>
); );
}; };

23
packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
View file

@ -1,11 +1,3 @@
.codeBlock {
border-radius: 0;
margin-bottom: 0;
overflow: hidden;
overflow-wrap: break-word;
white-space: pre-wrap;
}
.codeBlockWrapper { .codeBlockWrapper {
position: relative; position: relative;
} }
@ -32,3 +24,18 @@
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
bottom 200ms ease-in-out; bottom 200ms ease-in-out;
} }
.codeBlock {
overflow: auto;
display: block;
padding: 0;
font-size: inherit;
}
.codeBlockLines {
border-radius: 0;
margin-bottom: 0;
float: left;
min-width: 100%;
padding: var(--ifm-pre-padding);
}

2
packages/docusaurus-theme-classic/src/theme/DocItem/index.js
View file

@ -94,7 +94,7 @@ function DocItem(props) {
<div className="padding-vert--lg"> <div className="padding-vert--lg">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col"> <div className="col col--9">
<div className={styles.docItemContainer}> <div className={styles.docItemContainer}>
<article> <article>
{version && ( {version && (

73
packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
View file

@ -81,43 +81,46 @@ export default ({
}; };
return ( return (
<Highlight <div className={styles.codeBlockWrapper}>
{...defaultProps} <button
theme={prism.theme || defaultTheme} ref={button}
code={children.trim()} type="button"
language={language}> aria-label="Copy code to clipboard"
{({className, style, tokens, getLineProps, getTokenProps}) => ( className={styles.copyButton}
<div className={styles.codeBlockWrapper}> onClick={handleCopyCode}>
<pre {showCopied ? 'Copied' : 'Copy'}
ref={target} </button>
className={classnames(className, styles.codeBlock)}
style={style}>
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});
if (highlightLines.includes(i + 1)) { <Highlight
lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`; {...defaultProps}
} theme={prism.theme || defaultTheme}
code={children.trim()}
language={language}>
{({className, style, tokens, getLineProps, getTokenProps}) => (
<pre className={classnames(className, styles.codeBlock)}>
<code
ref={target}
className={classnames(className, styles.codeBlockLines)}
style={style}>
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});
return ( if (highlightLines.includes(i + 1)) {
<div key={i} {...lineProps}> lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
{line.map((token, key) => ( }
<span key={key} {...getTokenProps({token, key})} />
))} return (
</div> <div key={i} {...lineProps}>
); {line.map((token, key) => (
})} <span key={key} {...getTokenProps({token, key})} />
))}
</div>
);
})}
</code>
</pre> </pre>
<button )}
ref={button} </Highlight>
type="button" </div>
aria-label="Copy code to clipboard"
className={styles.copyButton}
onClick={handleCopyCode}>
{showCopied ? 'Copied' : 'Copy'}
</button>
</div>
)}
</Highlight>
); );
}; };

24
packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
View file

@ -1,12 +1,3 @@
.codeBlock {
border-radius: 0;
font-size: inherit;
margin-bottom: 0;
overflow: hidden;
overflow-wrap: break-word;
white-space: pre-wrap;
}
.codeBlockWrapper { .codeBlockWrapper {
position: relative; position: relative;
} }
@ -33,3 +24,18 @@
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
bottom 200ms ease-in-out; bottom 200ms ease-in-out;
} }
.codeBlock {
overflow: auto;
display: block;
padding: 0;
font-size: inherit;
}
.codeBlockLines {
border-radius: 0;
margin-bottom: 0;
float: left;
min-width: 100%;
padding: var(--ifm-pre-padding);
}