prism-highlighting

Laurie Barth · Laurie Barth · commit d39986828532 · 2020-05-07T12:23:12.000-04:00
diff --git a/packages/prism/README.md b/packages/prism/README.md
@@ -124,6 +124,22 @@ export default {
 }
 ```
 
+## Highlight support
+
+This package supports highlighting inside code blocks. The following two syntaxes are supported:
+
+```js
+  let str = "highlight" // highlight-line
+```
+
+```js
+  // highlight-start
+  let str = "highlight"
+  // highlight-end
+```
+
+The highlight styling is controlled in `styles.pre`.
+
 ## Additional Languages
 
 Please note that `@theme-ui/prism` uses [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer), [which does not include all languages supported in Prism](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) by default. So, if you happen to use one of the missing languages, your code block simply won't show up as highlighted.
diff --git a/packages/prism/presets/dracula.json b/packages/prism/presets/dracula.json
@@ -28,5 +28,8 @@
   },
   ".attr-name": {
     "color": "rgb(241, 250, 140)"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 30%, .5)"
   }
 }
diff --git a/packages/prism/presets/duotone-dark.json b/packages/prism/presets/duotone-dark.json
@@ -36,5 +36,8 @@
   },
   ".important": {
     "color": "#c4b9fe"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 30%, .5)"
   }
 }
diff --git a/packages/prism/presets/duotone-light.json b/packages/prism/presets/duotone-light.json
@@ -39,5 +39,8 @@
   },
   ".important": {
     "color": "#896724"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 70%, .5)"
   }
 }
diff --git a/packages/prism/presets/github.json b/packages/prism/presets/github.json
@@ -28,5 +28,8 @@
   },
   ".tag,.selector,.keyword": {
     "color": "#00009f"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 70%, .5)"
   }
 }
diff --git a/packages/prism/presets/night-owl-light.json b/packages/prism/presets/night-owl-light.json
@@ -44,5 +44,8 @@
   },
   ".boolean": {
     "color": "rgb(188, 84, 84)"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 70%, .5)"
   }
 }
diff --git a/packages/prism/presets/night-owl.json b/packages/prism/presets/night-owl.json
@@ -50,5 +50,8 @@
   },
   ".namespace": {
     "color": "rgb(178, 204, 214)"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 30%, .5)"
   }
 }
diff --git a/packages/prism/presets/oceanic-next.json b/packages/prism/presets/oceanic-next.json
@@ -51,5 +51,8 @@
   },
   ".namespace": {
     "opacity": 0.7
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 40%, .5)"
   }
 }
diff --git a/packages/prism/presets/prism-coy.json b/packages/prism/presets/prism-coy.json
@@ -44,5 +44,8 @@
   },
   ".tab:not(:empty):before,.cr:before,.lf:before": {
     "color": "#e0d7d1"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 70%, .5)"
   }
 }
diff --git a/packages/prism/presets/prism-dark.json b/packages/prism/presets/prism-dark.json
@@ -36,5 +36,8 @@
   },
   ".deleted": {
     "color": "red"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 70%, .5)"
   }
 }
diff --git a/packages/prism/presets/prism-funky.json b/packages/prism/presets/prism-funky.json
@@ -36,5 +36,8 @@
   },
   ".deleted": {
     "color": "red"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 40%, .5)"
   }
 }
diff --git a/packages/prism/presets/prism-okaidia.json b/packages/prism/presets/prism-okaidia.json
@@ -39,5 +39,8 @@
   },
   ".entity": {
     "cursor": "help"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 30%, .5)"
   }
 }
diff --git a/packages/prism/presets/prism-solarizedlight.json b/packages/prism/presets/prism-solarizedlight.json
@@ -35,5 +35,8 @@
   },
   ".italic": {
     "fontStyle": "italic"
+  },
+  ".highlight": {
+    "background": "hsla(0, 70%, 40%, .2)"
   }
 }
diff --git a/packages/prism/presets/prism-tomorrow.json b/packages/prism/presets/prism-tomorrow.json
@@ -39,5 +39,8 @@
   },
   ".inserted": {
     "color": "green"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 30%, .5)"
   }
 }
diff --git a/packages/prism/presets/prism-twilight.json b/packages/prism/presets/prism-twilight.json
@@ -78,5 +78,8 @@
     "bottom": ".4em",
     "content": "attr(data-end)",
     "top": "auto"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 30%, .5)"
   }
 }
diff --git a/packages/prism/presets/prism.json b/packages/prism/presets/prism.json
@@ -37,5 +37,8 @@
   },
   ".entity": {
     "cursor": "help"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 70%, .5)"
   }
 }
diff --git a/packages/prism/presets/shades-of-purple.json b/packages/prism/presets/shades-of-purple.json
@@ -37,5 +37,8 @@
   },
   ".builtin,.char,.constant,.function,.class-name": {
     "color": "rgb(250, 208, 0)"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 40%, .5)"
   }
 }
diff --git a/packages/prism/presets/ultramin.json b/packages/prism/presets/ultramin.json
@@ -9,5 +9,8 @@
   },
   ".class-name,.function,.tag,.attr-name": {
     "color": "rgb(40, 42, 46)"
+  },
+  ".highlight": {
+    "background": "hsla(0, 90%, 80%, .5)"
   }
 }
diff --git a/packages/prism/presets/vs-dark.json b/packages/prism/presets/vs-dark.json
@@ -42,5 +42,8 @@
   },
   ".char": {
     "color": "rgb(209, 105, 105)"
+  },
+  ".highlight": {
+    "background": "hsla(0, 0%, 40%, .5)"
   }
 }
diff --git a/packages/prism/src/index.js b/packages/prism/src/index.js
@@ -9,9 +9,66 @@ const aliases = {
   sh: 'bash',
 }
 
+const isInRange = (start, end, num) => {
+  if (num >= start && num <= end) {
+    return true
+  }
+  return false
+}
+
+const checkRanges = (range, num) => {
+  for (let i = 0; i < range.length; i += 2) {
+    if (isInRange(range[i], range[i + 1], num)) {
+      return true
+    }
+  }
+  return false
+}
+
 export default ({ children, className: outerClassName, title, ...props }) => {
   const [language] = outerClassName.replace(/language-/, '').split(' ')
   const lang = aliases[language] || language
+  let startEndRangesToHighlight = []
+
+  const findStartAndEndHighlights = tokens => {
+    const tokensWithoutHighlightComments = tokens.filter((item, index) => {
+      const removeLine = item
+        .map(({ content }) => {
+          if (content === '// highlight-start') {
+            startEndRangesToHighlight.push(index) // track our highlighted lines
+            return true
+          }
+          if (content === '// highlight-end') {
+            startEndRangesToHighlight.push(index - 2) // since we're removing start and end lines, we'll shorten the range by 2 lines
+            return true
+          }
+        })
+        .filter(Boolean)[0]
+
+      if (!removeLine) {
+        return item
+      }
+    })
+    return tokensWithoutHighlightComments
+  }
+
+  const isStartEndHighlighted = index => {
+    return checkRanges(startEndRangesToHighlight, index)
+  }
+
+  const isInlineHighlighted = line => {
+    for (let token of line) {
+      if (token.content === '// highlight-line') {
+        token.content = '' // remove the highlight-line comment now that we've acted on it
+        return true
+      }
+    }
+    return false
+  }
+
+  const shouldHighlightLine = (line, index) => {
+    return isStartEndHighlighted(index) || isInlineHighlighted(line)
+  }
 
   return (
     <Highlight
@@ -20,20 +77,31 @@ export default ({ children, className: outerClassName, title, ...props }) => {
       code={children.trim()}
       language={lang}
       theme={undefined}>
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <Styled.pre className={`${outerClassName} ${className}`} style={style}>
-          {tokens.map((line, i) => (
-            <div {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span
-                  {...getTokenProps({ token, key })}
-                  sx={token.empty ? { display: 'inline-block' } : undefined}
-                />
-              ))}
-            </div>
-          ))}
-        </Styled.pre>
-      )}
+      {({ className, style, tokens, getLineProps, getTokenProps }) => {
+        const tokensWithoutHighlightComments = findStartAndEndHighlights(tokens)
+        return (
+          <Styled.pre
+            className={`${outerClassName} ${className}`}
+            style={style}>
+            {tokensWithoutHighlightComments.map((line, i) => {
+              const lineProps = getLineProps({ line, key: i })
+              if (shouldHighlightLine(line, i)) {
+                lineProps.className = `${lineProps.className} highlight`
+              }
+              return (
+                <div {...lineProps}>
+                  {line.map((token, key) => (
+                    <span
+                      {...getTokenProps({ token, key })}
+                      sx={token.empty ? { display: 'inline-block' } : undefined}
+                    />
+                  ))}
+                </div>
+              )
+            })}
+          </Styled.pre>
+        )
+      }}
     </Highlight>
   )
 }
diff --git a/packages/prism/test/__snapshots__/index.js.snap b/packages/prism/test/__snapshots__/index.js.snap
diff --git a/packages/prism/test/index.js b/packages/prism/test/index.js

Original file line number	Diff line number	Diff line change
`@@ -28,5 +28,8 @@`
`28`	`28`	`},`
`29`	`29`	`".attr-name": {`
`30`	`30`	`"color": "rgb(241, 250, 140)"`
	`31`	`+ },`
	`32`	`+ ".highlight": {`
	`33`	`+ "background": "hsla(0, 0%, 30%, .5)"`
`31`	`34`	`}`
`32`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -36,5 +36,8 @@`
`36`	`36`	`},`
`37`	`37`	`".important": {`
`38`	`38`	`"color": "#c4b9fe"`
	`39`	`+ },`
	`40`	`+ ".highlight": {`
	`41`	`+ "background": "hsla(0, 0%, 30%, .5)"`
`39`	`42`	`}`
`40`	`43`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,5 +39,8 @@`
`39`	`39`	`},`
`40`	`40`	`".important": {`
`41`	`41`	`"color": "#896724"`
	`42`	`+ },`
	`43`	`+ ".highlight": {`
	`44`	`+ "background": "hsla(0, 0%, 70%, .5)"`
`42`	`45`	`}`
`43`	`46`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,5 +44,8 @@`
`44`	`44`	`},`
`45`	`45`	`".boolean": {`
`46`	`46`	`"color": "rgb(188, 84, 84)"`
	`47`	`+ },`
	`48`	`+ ".highlight": {`
	`49`	`+ "background": "hsla(0, 0%, 70%, .5)"`
`47`	`50`	`}`
`48`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,5 +50,8 @@`
`50`	`50`	`},`
`51`	`51`	`".namespace": {`
`52`	`52`	`"color": "rgb(178, 204, 214)"`
	`53`	`+ },`
	`54`	`+ ".highlight": {`
	`55`	`+ "background": "hsla(0, 0%, 30%, .5)"`
`53`	`56`	`}`
`54`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,5 +51,8 @@`
`51`	`51`	`},`
`52`	`52`	`".namespace": {`
`53`	`53`	`"opacity": 0.7`
	`54`	`+ },`
	`55`	`+ ".highlight": {`
	`56`	`+ "background": "hsla(0, 0%, 40%, .5)"`
`54`	`57`	`}`
`55`	`58`	`}`