docs: added code blocks without headers (#2560)

www/docs/src/theme/CodeBlock/Content/String.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
+import {
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+  containsLineNumbers,
+  useCodeWordWrap,
+} from '@docusaurus/theme-common/internal';
+import Highlight, {defaultProps} from 'prism-react-renderer';
+import Line from '@theme/CodeBlock/Line';
+import Container from '@theme/CodeBlock/Container';
+import styles from './styles.module.css';
+import CopyButton from '../../CopyButton';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function CodeBlockString({
+  children,
+  className: blockClassName = '',
+  metastring,
+  title: titleProp,
+  showLineNumbers: showLineNumbersProp,
+  language: languageProp,
+}) {
+  const {
+    prism: {defaultLanguage, magicComments},
+  } = useThemeConfig();
+  const language =
+    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
+  const prismTheme = usePrismTheme();
+  const wordWrap = useCodeWordWrap();
+  // We still parse the metastring in case we want to support more syntax in the
+  // future. Note that MDX doesn't strip quotes when parsing metastring:
+  // "title=\"xyz\"" => title: "\"xyz\""
+  const title = parseCodeBlockTitle(metastring) || titleProp;
+  const {lineClassNames, code} = parseLines(children, {
+    metastring,
+    language,
+    magicComments,
+  });
+  const showLineNumbers =
+    showLineNumbersProp ?? containsLineNumbers(metastring);
+  return (
+    <Container
+      as="div"
+      className={clsx(
+        blockClassName,
+        language &&
+          !blockClassName.includes(`language-${language}`) &&
+          `language-${language}`,
+      )}>
+      {title && <div className={styles.codeBlockTitle}>{title}</div>}
+      <div className={styles.codeBlockContent}>
+        <Highlight
+          {...defaultProps}
+          theme={prismTheme}
+          code={code}
+          language={language ?? 'text'}>
+          {({className, tokens, getLineProps, getTokenProps}) => (
+            <pre
+              /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+              tabIndex={0}
+              ref={wordWrap.codeBlockRef}
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              <code
+                className={clsx(
+                  styles.codeBlockLines,
+                  showLineNumbers && styles.codeBlockLinesWithNumbering,
+                  tokens.length === 1 ? 'thin-code' : ''
+                )}>
+                {tokens.map((line, i) => (
+                  <Line
+                    key={i}
+                    line={line}
+                    getLineProps={getLineProps}
+                    getTokenProps={getTokenProps}
+                    classNames={lineClassNames[i]}
+                    showLineNumbers={showLineNumbers}
+                  />
+                ))}
+              </code>
+            </pre>
+          )}
+        </Highlight>
+        <div className={styles.buttonGroup}>
+          {/* <CopyButton className={styles.codeButton} code={code} /> */}
+          <CopyButton buttonClassName='code-action' text={code}>
+            <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>
+      </div>
+    </Container>
+  );
+}

www/docs/src/theme/CodeBlock/Content/styles.module.css

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .codeBlockContent {
+  position: relative;
+  /* rtl:ignore */
+  direction: ltr;
+  border-radius: inherit;
+}
+
+.codeBlockTitle {
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  font-size: var(--ifm-code-font-size);
+  font-weight: 500;
+  padding: 0.75rem var(--ifm-pre-padding);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.codeBlock {
+  --ifm-pre-background: var(--prism-background-color);
+  margin: 0;
+  padding: 0;
+}
+
+.codeBlockTitle + .codeBlockContent .codeBlock {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.codeBlockStandalone {
+  padding: 0;
+}
+
+.codeBlockLines {
+  font: inherit;
+  /* rtl:ignore */
+  float: left;
+  min-width: 100%;
+}
+
+.codeBlockLinesWithNumbering {
+  display: table;
+  padding: var(--ifm-pre-padding) 0;
+}
+
+@media print {
+  .codeBlockLines {
+    white-space: pre-wrap;
+  }
+}
+
+.buttonGroup {
+  display: flex;
+  column-gap: 0.2rem;
+  position: absolute;
+  right: calc(var(--ifm-pre-padding) / 4 - 2px);
+  top: calc(var(--ifm-pre-padding) / 4 - 2px);
+}
+
+.buttonGroup button {
+  display: flex;
+  align-items: center;
+  background: var(--prism-background-color);
+  color: var(--prism-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  padding: 0.4rem;
+  line-height: 0;
+  transition: opacity 200ms ease-in-out;
+  opacity: 0;
+}
+
+.buttonGroup button:focus-visible,
+.buttonGroup button:hover {
+  opacity: 1 !important;
+}
+
+:global(.theme-code-block:hover) .buttonGroup button {
+  opacity: 0.4;
+}

www/docs/src/theme/CodeBlock/index.js

@@ -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>