Merge branch 'lh' of https://github.com/lex111/docusaurus into lex111-lh

# Conflicts: # CHANGELOG-2.x.md # packages/docusaurus-theme-classic/package.json
facebook · Oct 27, 2019 · e509311 · e509311
2 parents 812a30b + 2b0cc9b
commit e509311
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 16 deletions.
diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
@@ -8,6 +8,7 @@
 - Significantly reduce main bundle size and initial HTML payload on production build. Generated JS files from webpack is also shorter in name.
 - Refactor dark toggle into a hook.
 - Changed the way we read the `USE_SSH` env variable during deployment to be the same as in v1.
+- Add highlight specific lines in code blocks.
 
 ## 2.0.0-alpha.31
 

diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
@@ -13,6 +13,7 @@
     "classnames": "^2.2.6",
     "clipboard": "^2.0.4",
     "infima": "0.2.0-alpha.3",
+    "parse-numeric-range": "^0.0.2",
     "prism-react-renderer": "^1.0.2",
     "react-toggle": "^4.1.1"
   },

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -10,10 +10,13 @@ import classnames from 'classnames';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import defaultTheme from 'prism-react-renderer/themes/palenight';
 import Clipboard from 'clipboard';
+import rangeParser from 'parse-numeric-range';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
 
-export default ({children, className: languageClassName}) => {
+const highlightLinesRangeRegex = /{([\d,-]+)}/;
+
+export default ({children, className: languageClassName, metastring}) => {
   const {
     siteConfig: {
       themeConfig: {prismTheme},
@@ -22,7 +25,12 @@ export default ({children, className: languageClassName}) => {
   const [showCopied, setShowCopied] = useState(false);
   const target = useRef(null);
   const button = useRef(null);
+  let highlightLines = [];
 
+  if (metastring && highlightLinesRangeRegex.test(metastring)) {
+    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
+    highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
+  }
   useEffect(() => {
     let clipboard;
 
@@ -61,13 +69,21 @@ export default ({children, className: languageClassName}) => {
             ref={target}
             className={classnames(className, styles.codeBlock)}
             style={style}>
-            {tokens.map((line, i) => (
-              <div key={i} {...getLineProps({line, key: i})}>
-                {line.map((token, key) => (
-                  <span key={key} {...getTokenProps({token, key})} />
-                ))}
-              </div>
-            ))}
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({line, key: i});
+
+              if (highlightLines.includes(i + 1)) {
+                lineProps.className = `${lineProps.className} highlight-line`;
+              }
+
+              return (
+                <div key={i} {...lineProps}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({token, key})} />
+                  ))}
+                </div>
+              );
+            })}
           </pre>
           <button
             ref={button}

diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
@@ -11,6 +11,7 @@
     "@philpl/buble": "^0.19.7",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.4",
+    "parse-numeric-range": "^0.0.2",
     "prism-react-renderer": "^1.0.2",
     "react-live": "^2.2.1"
   },

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -10,11 +10,20 @@ import classnames from 'classnames';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import defaultTheme from 'prism-react-renderer/themes/palenight';
 import Clipboard from 'clipboard';
+import rangeParser from 'parse-numeric-range';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Playground from '@theme/Playground';
 import styles from './styles.module.css';
 
-export default ({children, className: languageClassName, live, ...props}) => {
+const highlightLinesRangeRegex = /{([\d,-]+)}/;
+
+export default ({
+  children,
+  className: languageClassName,
+  live,
+  metastring,
+  ...props
+}) => {
   const {
     siteConfig: {
       themeConfig: {prismTheme},
@@ -23,6 +32,12 @@ export default ({children, className: languageClassName, live, ...props}) => {
   const [showCopied, setShowCopied] = useState(false);
   const target = useRef(null);
   const button = useRef(null);
+  let highlightLines = [];
+
+  if (metastring && highlightLinesRangeRegex.test(metastring)) {
+    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
+    highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
+  }
 
   useEffect(() => {
     let clipboard;
@@ -73,13 +88,21 @@ export default ({children, className: languageClassName, live, ...props}) => {
             ref={target}
             className={classnames(className, styles.codeBlock)}
             style={style}>
-            {tokens.map((line, i) => (
-              <div key={i} {...getLineProps({line, key: i})}>
-                {line.map((token, key) => (
-                  <span key={key} {...getTokenProps({token, key})} />
-                ))}
-              </div>
-            ))}
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({line, key: i});
+
+              if (highlightLines.includes(i + 1)) {
+                lineProps.className = `${lineProps.className} highlight-line`;
+              }
+
+              return (
+                <div key={i} {...lineProps}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({token, key})} />
+                  ))}
+                </div>
+              );
+            })}
           </pre>
           <button
             ref={button}

diff --git a/yarn.lock b/yarn.lock
@@ -11842,6 +11842,11 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-numeric-range@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4"
+  integrity sha1-tPCdQTx6282Yf26SM8e0shDJOOQ=
+
 parse-path@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.1.tgz#0ec769704949778cb3b8eda5e994c32073a1adff"