fix(v2): synchronize code block components changes (#2509)

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

@@ -229,7 +229,7 @@ export default ({children, className: languageClassName, metastring}) => {
               onClick={handleCopyCode}>
               {showCopied ? 'Copied' : 'Copy'}
             </button>
-            <pre
+            <div
               tabIndex="0"
               className={classnames(className, styles.codeBlock, {
                 [styles.codeBlockWithTitle]: codeBlockTitle,
@@ -255,7 +255,7 @@ export default ({children, className: languageClassName, metastring}) => {
                   );
                 })}
               </div>
-            </pre>
+            </div>
           </div>
         </>
       )}

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

@@ -19,9 +19,6 @@
 
 .codeBlock {
   overflow: auto;
-  display: block;
-  padding: 0;
-  margin: 0;
 }
 
 .codeBlockWithTitle {
@@ -58,9 +55,10 @@
 }
 
 .codeBlockLines {
-  background-color: transparent;
+  font-family: var(--ifm-font-family-monospace);
-  border-radius: 0;
+  font-size: inherit;
-  margin-bottom: 0;
+  line-height: var(--ifm-pre-line-height);
+  white-space: pre;
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);

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

@@ -20,6 +20,73 @@ import Playground from '@theme/Playground';
 import styles from './styles.module.css';
 
 const highlightLinesRangeRegex = /{([\d,-]+)}/;
+const getHighlightDirectiveRegex = (
+  languages = ['js', 'jsBlock', 'jsx', 'python', 'html'],
+) => {
+  // supported types of comments
+  const comments = {
+    js: {
+      start: '\\/\\/',
+      end: '',
+    },
+    jsBlock: {
+      start: '\\/\\*',
+      end: '\\*\\/',
+    },
+    jsx: {
+      start: '\\{\\s*\\/\\*',
+      end: '\\*\\/\\s*\\}',
+    },
+    python: {
+      start: '#',
+      end: '',
+    },
+    html: {
+      start: '<!--',
+      end: '-->',
+    },
+  };
+  // supported directives
+  const directives = [
+    'highlight-next-line',
+    'highlight-start',
+    'highlight-end',
+  ].join('|');
+  // to be more reliable, the opening and closing comment must match
+  const commentPattern = languages
+    .map(
+      lang =>
+        `(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`,
+    )
+    .join('|');
+  // white space is allowed, but otherwise it should be on it's own line
+  return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
+};
+// select comment styles based on language
+const highlightDirectiveRegex = lang => {
+  switch (lang) {
+    case 'js':
+    case 'javascript':
+    case 'ts':
+    case 'typescript':
+      return getHighlightDirectiveRegex(['js', 'jsBlock']);
+
+    case 'jsx':
+    case 'tsx':
+      return getHighlightDirectiveRegex(['js', 'jsBlock', 'jsx']);
+
+    case 'html':
+      return getHighlightDirectiveRegex(['js', 'jsBlock', 'html']);
+
+    case 'python':
+    case 'py':
+      return getHighlightDirectiveRegex(['python']);
+
+    default:
+      // all comment types
+      return getHighlightDirectiveRegex();
+  }
+};
 const codeBlockTitleRegex = /title=".*"/;
 
 export default ({
@@ -105,6 +172,50 @@ export default ({
     language = prism.defaultLanguage;
   }
 
+  // only declaration OR directive highlight can be used for a block
+  let code = children.replace(/\n$/, '');
+  if (highlightLines.length === 0 && language !== undefined) {
+    let range = '';
+    const directiveRegex = highlightDirectiveRegex(language);
+    // go through line by line
+    const lines = children.replace(/\n$/, '').split('\n');
+    let blockStart;
+    // loop through lines
+    for (let index = 0; index < lines.length; ) {
+      const line = lines[index];
+      // adjust for 0-index
+      const lineNumber = index + 1;
+      const match = line.match(directiveRegex);
+      if (match !== null) {
+        const directive = match
+          .slice(1)
+          .reduce((final, item) => final || item, undefined);
+        switch (directive) {
+          case 'highlight-next-line':
+            range += `${lineNumber},`;
+            break;
+
+          case 'highlight-start':
+            blockStart = lineNumber;
+            break;
+
+          case 'highlight-end':
+            range += `${blockStart}-${lineNumber - 1},`;
+            break;
+
+          default:
+            break;
+        }
+        lines.splice(index, 1);
+      } else {
+        // lines without directives are unchanged
+        index += 1;
+      }
+    }
+    highlightLines = rangeParser.parse(range);
+    code = lines.join('\n');
+  }
+
   const handleCopyCode = () => {
     window.getSelection().empty();
     setShowCopied(true);
@@ -117,7 +228,7 @@ export default ({
       {...defaultProps}
       key={mounted}
       theme={prismTheme}
-      code={children.replace(/\n$/, '')}
+      code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
         <>