feat: Add support for line highlighting

newrelic · Jul 7, 2020 · dddc708 · dddc708
1 parent c62c614
commit dddc708
Showing 1 changed file with 65 additions and 35 deletions.
diff --git a/src/components/CodeHighlight.js b/src/components/CodeHighlight.js
@@ -4,54 +4,84 @@ import cx from 'classnames';
 import Highlight from 'prism-react-renderer';
 import Prism from 'prismjs';
 import styles from './CodeHighlight.module.scss';
+import { partition, range } from '../utils/array';
 
 const CodeHighlight = ({
   className,
   children,
+  highlightedLines: highlightedLineString,
   language,
   lineNumbers,
   wrap,
-}) => (
-  <Highlight Prism={Prism} code={children.trim()} language={language}>
-    {({ tokens, getLineProps, getTokenProps }) => {
-      const lineNumberWidth = String(tokens.length).length;
+}) => {
+  const highlightedLines = getHighlightedLines(highlightedLineString);
 
-      return (
-        <pre
-          className={cx(styles.container, className, {
-            [styles.wrap]: wrap,
-            [styles.lineNumbers]: lineNumbers,
-          })}
-          style={{
-            '--line-number-width': `${lineNumberWidth}ch`,
-          }}
-          data-language={language}
-        >
-          <code>
-            {tokens.map((line, i) => (
-              // eslint-disable-next-line react/jsx-key
-              <div {...getLineProps({ line, key: i })}>
-                {lineNumbers && (
-                  <div className={styles.lineNumber}>{i + 1}</div>
-                )}
-                <div>
-                  {line.map((token, key) => (
-                    // eslint-disable-next-line react/jsx-key
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
+  return (
+    <Highlight Prism={Prism} code={children.trim()} language={language}>
+      {({ tokens, getLineProps, getTokenProps }) => {
+        const lineNumberWidth = String(tokens.length).length;
+
+        return (
+          <pre
+            className={cx(styles.container, className, {
+              [styles.wrap]: wrap,
+              [styles.lineNumbers]: lineNumbers,
+            })}
+            style={{
+              '--line-number-width': `${lineNumberWidth}ch`,
+            }}
+            data-language={language}
+          >
+            <code>
+              {tokens.map((line, i) => (
+                // eslint-disable-next-line react/jsx-key
+                <div
+                  {...getLineProps({
+                    line,
+                    key: i,
+                    className: cx({
+                      'line-highlight': highlightedLines.has(i + 1),
+                    }),
+                  })}
+                >
+                  {lineNumbers && (
+                    <div className={styles.lineNumber}>{i + 1}</div>
+                  )}
+                  <div>
+                    {line.map((token, key) => (
+                      // eslint-disable-next-line react/jsx-key
+                      <span {...getTokenProps({ token, key })} />
+                    ))}
+                  </div>
                 </div>
-              </div>
-            ))}
-          </code>
-        </pre>
-      );
-    }}
-  </Highlight>
-);
+              ))}
+            </code>
+          </pre>
+        );
+      }}
+    </Highlight>
+  );
+};
+
+const getHighlightedLines = (highlightedLineString) => {
+  if (!highlightedLineString) {
+    return new Set();
+  }
+
+  const groups = highlightedLineString.split(',').map((str) => str.trim());
+  const [ranges, lines] = partition(groups, (group) => group.includes('-'));
+
+  const lineRanges = ranges
+    .map((range) => range.split('-').map(Number))
+    .reduce((acc, [a, b]) => acc.concat(range(a, b)), []);
+
+  return new Set(lines.map(Number).concat(lineRanges));
+};
 
 CodeHighlight.propTypes = {
   className: PropTypes.string,
   children: PropTypes.string.isRequired,
+  highlightedLines: PropTypes.string,
   language: PropTypes.string,
   lineNumbers: PropTypes.bool,
   wrap: PropTypes.bool,