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

This reverts commit 10cd99b3e4.
This commit is contained in:
Endi 2019-12-01 03:57:56 +07:00 committed by Yangshun Tay
parent 3caff0d221
commit 39e9e755c3
5 changed files with 88 additions and 107 deletions

View file

@ -63,26 +63,16 @@ export default ({children, className: languageClassName, metastring}) => {
};
return (
<div className={styles.codeBlockWrapper}>
<button
ref={button}
type="button"
aria-label="Copy code to clipboard"
className={styles.copyButton}
onClick={handleCopyCode}>
{showCopied ? 'Copied' : 'Copy'}
</button>
<Highlight
{...defaultProps}
theme={prism.theme || defaultTheme}
code={children.trim()}
language={language}>
{({className, style, tokens, getLineProps, getTokenProps}) => (
<pre className={classnames(className, styles.codeBlock)}>
<code
<div className={styles.codeBlockWrapper}>
<pre
ref={target}
className={classnames(className, styles.codeBlockLines)}
className={classnames(className, styles.codeBlock)}
style={style}>
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});
@ -99,10 +89,17 @@ export default ({children, className: languageClassName, metastring}) => {
</div>
);
})}
</code>
</pre>
<button
ref={button}
type="button"
aria-label="Copy code to clipboard"
className={styles.copyButton}
onClick={handleCopyCode}>
{showCopied ? 'Copied' : 'Copy'}
</button>
</div>
)}
</Highlight>
</div>
);
};

View file

@ -5,6 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/
.codeBlock {
border-radius: 0;
margin-bottom: 0;
overflow: hidden;
overflow-wrap: break-word;
white-space: pre-wrap;
}
.codeBlockWrapper {
position: relative;
}
@ -31,18 +39,3 @@
transition: opacity 200ms ease-in-out, visibility 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);
}

View file

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

View file

@ -81,26 +81,16 @@ export default ({
};
return (
<div className={styles.codeBlockWrapper}>
<button
ref={button}
type="button"
aria-label="Copy code to clipboard"
className={styles.copyButton}
onClick={handleCopyCode}>
{showCopied ? 'Copied' : 'Copy'}
</button>
<Highlight
{...defaultProps}
theme={prism.theme || defaultTheme}
code={children.trim()}
language={language}>
{({className, style, tokens, getLineProps, getTokenProps}) => (
<pre className={classnames(className, styles.codeBlock)}>
<code
<div className={styles.codeBlockWrapper}>
<pre
ref={target}
className={classnames(className, styles.codeBlockLines)}
className={classnames(className, styles.codeBlock)}
style={style}>
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});
@ -117,10 +107,17 @@ export default ({
</div>
);
})}
</code>
</pre>
<button
ref={button}
type="button"
aria-label="Copy code to clipboard"
className={styles.copyButton}
onClick={handleCopyCode}>
{showCopied ? 'Copied' : 'Copy'}
</button>
</div>
)}
</Highlight>
</div>
);
};

View file

@ -1,3 +1,12 @@
.codeBlock {
border-radius: 0;
font-size: inherit;
margin-bottom: 0;
overflow: hidden;
overflow-wrap: break-word;
white-space: pre-wrap;
}
.codeBlockWrapper {
position: relative;
}
@ -24,18 +33,3 @@
transition: opacity 200ms ease-in-out, visibility 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);
}