Make highlight fade

facebook · Nov 11, 2021 · e16b68d · e16b68d
1 parent 3ad7fb5
commit e16b68d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 29 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -35,6 +35,7 @@ export default function CodeBlock({
   const [showCopied, setShowCopied] = useState(false);
   const [mounted, setMounted] = useState(false);
   const [collapsed, setCollapsed] = useState(true);
+  const [highlightExpanded, setHighlightExpanded] = useState(false);
   // 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
@@ -75,6 +76,14 @@ export default function CodeBlock({
 
   const collapsible = sampleLines.length > 0;
 
+  useEffect(() => {
+    setHighlightExpanded(true);
+    const timer = window.setTimeout(() => {
+      setHighlightExpanded(false);
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [collapsed]);
+
   return (
     <Highlight
       {...defaultProps}
@@ -134,25 +143,16 @@ export default function CodeBlock({
 
                   if (collapsible) {
                     if (collapsed) {
-                      if (!sampleLines.includes(i + 1)) {
+                      if (!sampleLines.includes(i)) {
                         return null;
                       }
-                    } else if (!sampleLines.includes(i + 1)) {
+                    } else if (!sampleLines.includes(i)) {
                       lineProps.className +=
                         ' docusaurus-collapsible-code-line';
-                      if (
-                        i !== tokens.length - 1 &&
-                        !sampleLines.includes(i + 2)
-                      ) {
+                      if (highlightExpanded) {
                         lineProps.className +=
-                          ' docusaurus-collapsible-code-line-boundary';
+                          ' docusaurus-collapsible-code-line-highlighted';
                       }
-                    } else if (
-                      i !== tokens.length - 1 &&
-                      sampleLines.includes(i + 2)
-                    ) {
-                      lineProps.className +=
-                        ' docusaurus-collapsible-code-line-boundary';
                     }
                   }
 

diff --git a/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts b/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts
@@ -102,6 +102,10 @@ export function parseLanguage(className?: string): Language | undefined {
   return languageClassName?.replace(/language-/, '') as Language | undefined;
 }
 
+/**
+ * @param metastring The highlight range declared here starts at 1
+ * @returns Note: all line numbers start at 0, not 1
+ */
 export function parseLines(
   content: string,
   metastring?: string,
@@ -115,9 +119,9 @@ export function parseLines(
   // Highlighted lines specified in props: don't parse the content
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)![1];
-    const highlightLines = rangeParser(highlightLinesRange).filter(
-      (n) => n > 0,
-    );
+    const highlightLines = rangeParser(highlightLinesRange)
+      .filter((n) => n > 0)
+      .map((n) => n - 1);
     return {highlightLines, sampleLines: [], code};
   }
   if (language === undefined) {
@@ -131,10 +135,8 @@ export function parseLines(
   let sampleBlockStart: number;
   let sampleRange = '';
   // loop through lines
-  for (let index = 0; index < lines.length; ) {
-    const line = lines[index];
-    // adjust for 0-index
-    const lineNumber = index + 1;
+  for (let lineNumber = 0; lineNumber < lines.length; ) {
+    const line = lines[lineNumber];
     const match = line.match(directiveRegex);
     if (match !== null) {
       const directive = match.slice(1).find((item) => item !== undefined);
@@ -162,10 +164,10 @@ export function parseLines(
         default:
           break;
       }
-      lines.splice(index, 1);
+      lines.splice(lineNumber, 1);
     } else {
       // lines without directives are unchanged
-      index += 1;
+      lineNumber += 1;
     }
   }
   const highlightLines = rangeParser(highlightRange);

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -47,18 +47,15 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 }
 
 .docusaurus-collapsible-code-line {
-  background-color: rgba(255, 161, 21, 0.1);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
+  transition: all 1s;
 }
 
-/* .docusaurus-collapsible-code-line-boundary {
-  border-bottom: 1px solid #555555;
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-} */
+.docusaurus-collapsible-code-line-highlighted {
+  background-color: rgba(255, 161, 21, 0.2);
+}
 
 .header-github-link:hover {
   opacity: 0.6;