docs: added code blocks without headers (#2560)
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, {isValidElement, useCallback, useEffect, useState} from 'react';
|
||||
import React, {isValidElement} from 'react';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ElementContent from '@theme/CodeBlock/Content/Element';
|
||||
@@ -21,7 +21,7 @@ function maybeStringifyChildren(children) {
|
||||
// The children is now guaranteed to be one/more plain strings
|
||||
return Array.isArray(children) ? children.join('') : children;
|
||||
}
|
||||
export default function CodeBlock({children: rawChildren, ...props}) {
|
||||
export default function CodeBlock({children: rawChildren, noHeader = false, ...props}) {
|
||||
// The Prism theme on SSR is always the default theme but the site theme can
|
||||
// be in a different mode. React hydration doesn't update DOM styles that come
|
||||
// from SSR. Hence force a re-render after mounting to apply the current
|
||||
@@ -34,23 +34,25 @@ export default function CodeBlock({children: rawChildren, ...props}) {
|
||||
|
||||
return (
|
||||
<div className='code-wrapper'>
|
||||
<div className='code-header'>
|
||||
<Tooltip text="Report Incorrect Code">
|
||||
<a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
|
||||
<ThemedImage alt='Report Incorrect Code' sources={{
|
||||
light: useBaseUrl('/img/alert-code.png'),
|
||||
dark: useBaseUrl('/img/alert-code-dark.png')
|
||||
{!noHeader && (
|
||||
<div className='code-header'>
|
||||
<Tooltip text="Report Incorrect Code">
|
||||
<a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
|
||||
<ThemedImage alt='Report Incorrect Code' sources={{
|
||||
light: useBaseUrl('/img/alert-code.png'),
|
||||
dark: useBaseUrl('/img/alert-code-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
<CopyButton buttonClassName='code-action' text={children}>
|
||||
<ThemedImage alt='Copy to Clipboard' sources={{
|
||||
light: useBaseUrl('/img/clipboard-copy.png'),
|
||||
dark: useBaseUrl('/img/clipboard-copy-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
<CopyButton buttonClassName='code-action' text={children}>
|
||||
<ThemedImage alt='Copy to Clipboard' sources={{
|
||||
light: useBaseUrl('/img/clipboard-copy.png'),
|
||||
dark: useBaseUrl('/img/clipboard-copy-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
</CopyButton>
|
||||
</div>
|
||||
<CodeBlockComp key={String(isBrowser)} {...props}>
|
||||
</CopyButton>
|
||||
</div>
|
||||
)}
|
||||
<CodeBlockComp key={String(isBrowser)} {...props} className={noHeader ? 'no-header-block' : ''}>
|
||||
{children}
|
||||
</CodeBlockComp>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user