chore(deps): upgrading @readme/syntax-highlighter (#61)

### 🧰  Changes

Been a while since the syntax highlighter has been updated here and since I added support for TOML to it today, we should get it up to date here so Markdown code blocks with that language should get highlighted.

Includes a fix for how codemirror renders syntax highlighting as `div`s.

### 📖  Release Notes
#### 10.2.0 (2020-10-29)

* feat: adding support for TOML highlighting (#26) ([b2e617b](readmeio/syntax-highlighter@b2e617b)), closes [#26](readmeio/syntax-highlighter#26)

#### <small>10.1.2 (2020-10-26)</small>

* fix: isolating regex check to highlightmode option (#25) ([aec7c81](readmeio/syntax-highlighter@aec7c81)), closes [#25](readmeio/syntax-highlighter#25)

#### <small>10.1.1 (2020-10-23)</small>

* fix: check for \n in CodeMirror runmode (#23) ([66444f4](readmeio/syntax-highlighter@66444f4)), closes [#23](readmeio/syntax-highlighter#23)

#### 10.1.0 (2020-10-22)

* chore: moving react and react-dom into being peerdeps (#24) ([d1826d7](readmeio/syntax-highlighter@d1826d7)), closes [#24](readmeio/syntax-highlighter#24)

#### <small>10.0.1 (2020-10-12)</small>

* feat(context): exporting context provider (#22) ([1dc67c0](readmeio/syntax-highlighter@1dc67c0)), closes [#22](readmeio/syntax-highlighter#22)
* fix(readonly): wip styled output (#21) ([82b99ab](readmeio/syntax-highlighter@82b99ab)), closes [#21](readmeio/syntax-highlighter#21)

#### 10.0.0 (2020-10-05)

* fix(bundle): client and server compatibility (#20) ([bd4362b](readmeio/syntax-highlighter@bd4362b)), closes [#20](readmeio/syntax-highlighter#20)
* chore(deps-dev): bump @commitlint/cli from 9.1.2 to 11.0.0 (#10) ([c466e8d](readmeio/syntax-highlighter@c466e8d)), closes [#10](readmeio/syntax-highlighter#10)
* chore(deps-dev): bump @commitlint/config-conventional (#19) ([b700798](readmeio/syntax-highlighter@b700798)), closes [#19](readmeio/syntax-highlighter#19)
* chore(deps-dev): bump css-loader from 3.6.0 to 4.3.0 (#16) ([e3c0c67](readmeio/syntax-highlighter@e3c0c67)), closes [#16](readmeio/syntax-highlighter#16)
* chore(deps-dev): bump eslint from 7.8.0 to 7.10.0 (#11) ([d5e30e0](readmeio/syntax-highlighter@d5e30e0)), closes [#11](readmeio/syntax-highlighter#11)
* chore(deps-dev): bump husky from 4.2.5 to 4.3.0 (#18) ([7e437fe](readmeio/syntax-highlighter@7e437fe)), closes [#18](readmeio/syntax-highlighter#18)
* chore(deps-dev): bump prettier from 2.1.1 to 2.1.2 (#14) ([f3c572f](readmeio/syntax-highlighter@f3c572f)), closes [#14](readmeio/syntax-highlighter#14)
* chore(deps-dev): bump sass-loader from 10.0.1 to 10.0.2 (#12) ([2e9a2e9](readmeio/syntax-highlighter@2e9a2e9)), closes [#12](readmeio/syntax-highlighter#12)
* chore(deps-dev): bump terser-webpack-plugin from 4.1.0 to 4.2.2 (#15) ([9c0d3dc](readmeio/syntax-highlighter@9c0d3dc)), closes [#15](readmeio/syntax-highlighter#15)
* chore(deps-dev): bump webpack from 4.44.1 to 4.44.2 (#17) ([828adca](readmeio/syntax-highlighter@828adca)), closes [#17](readmeio/syntax-highlighter#17)
* chore(deps): bump actions/checkout from v2.3.2 to v2.3.3 (#9) ([6f1fda0](readmeio/syntax-highlighter@6f1fda0)), closes [#9](readmeio/syntax-highlighter#9)
* chore(deps): bump codemirror from 5.57.0 to 5.58.1 (#13) ([7d7c7b3](readmeio/syntax-highlighter@7d7c7b3)), closes [#13](readmeio/syntax-highlighter#13)

#### <small>9.0.1 (2020-09-16)</small>

* chore: line number dom elements updated to use span (#8) ([85aeb0e](readmeio/syntax-highlighter@85aeb0e)), closes [#8](readmeio/syntax-highlighter#8)
* fix(highlighting): fixing an issue where overlay was not applied correctly (#7) ([df2236e](readmeio/syntax-highlighter@df2236e)), closes [#7](readmeio/syntax-highlighter#7)

#### 9.0.0 (2020-09-15)

* feat: code editor export (#5) ([3c2baa0](readmeio/syntax-highlighter@3c2baa0)), closes [#5](readmeio/syntax-highlighter#5) [#6](readmeio/syntax-highlighter#6)
* docs: adding a line break in the readme ([6819099](readmeio/syntax-highlighter@6819099))

#### <small>8.0.3 (2020-09-02)</small>

* chore(deps): upgrading @readme/variable to 7.2.1 ([7ec28f3](readmeio/syntax-highlighter@7ec28f3))

#### <small>8.0.2 (2020-09-02)</small>

* docs: updating a link in the contributing docs ([c539940](readmeio/syntax-highlighter@c539940))

#### <small>8.0.1 (2020-09-01)</small>

* feat: setting up webpack (#4) ([fa651fc](readmeio/syntax-highlighter@fa651fc)), closes [#4](readmeio/syntax-highlighter#4)

#### 8.0.0 (2020-08-31)

> No breaking changes in this release, the package has just moved a new home at https://github.com/readmeio/syntax-highlighter!

* chore: moving the package code into a src/ directory ([e78554e](readmeio/syntax-highlighter@e78554e))
* chore: pulling the syntax-highlighter package over from the explorer repo ([296c7de](readmeio/syntax-highlighter@296c7de))
* chore(deps-dev): bump eslint from 7.7.0 to 7.8.0 (#2) ([9789985](readmeio/syntax-highlighter@9789985)), closes [#2](readmeio/syntax-highlighter#2)
* chore(deps-dev): bump jest from 26.1.0 to 26.4.2 (#3) ([c837dd7](readmeio/syntax-highlighter@c837dd7)), closes [#3](readmeio/syntax-highlighter#3)
* chore(deps-dev): bump prettier from 2.0.5 to 2.1.1 (#1) ([0cfbe94](readmeio/syntax-highlighter@0cfbe94)), closes [#1](readmeio/syntax-highlighter#1)
* docs: setting up changelog generation ([dcfe1db](readmeio/syntax-highlighter@dcfe1db))
* ci: adding a ci workflow for running tests ([fe631bd](readmeio/syntax-highlighter@fe631bd))
* ci: setting up dependabot ([a293e53](readmeio/syntax-highlighter@a293e53))
* test: fixing broken tests ([6257159](readmeio/syntax-highlighter@6257159))

components/Code/index.jsx

@@ -4,8 +4,8 @@ const PropTypes = require('prop-types');
 // Only load CodeMirror in the browser, for SSR
 // apps. Necessary because of people like this:
 // https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
-const syntaxHighlighter = typeof window !== 'undefined' ? require('@readme/syntax-highlighter') : false;
-const canonicalLanguage = require('@readme/syntax-highlighter/canonical');
+const syntaxHighlighter = typeof window !== 'undefined' ? require('@readme/syntax-highlighter').default : false;
+const { canonical: canonicalLanguage } = require('@readme/syntax-highlighter');
 const copy = require('copy-to-clipboard');
 
 function CopyCode({ code, rootClass = 'rdmd-code-copy', className = '' }) {

components/Code/style.scss

@@ -1,4 +1,5 @@
 @mixin gfmCodeBaseStyles($background: #F6F8FA, $text: inherit) {
+
   code,
   kbd,
   pre {
@@ -21,20 +22,21 @@
     background-color: $background;
     background-color: var(--md-code-background, $background);
     border-radius: 3px;
+    color: var(--md-code-text);
     font-size: 85%;
     margin: 0;
-    padding: .2em .4em
-  }
+    padding: .2em .4em;
 
-  code {
-    color: var(--md-code-text);
+    >div[class*="cm-"] {
+      display: inherit;
+    }
   }
 
   pre {
     word-wrap: normal
   }
 
-  pre > code {
+  pre>code {
     background: 0 0;
     border: 0;
     font-size: 100%;
@@ -89,7 +91,7 @@
 @mixin copyCodeButton {
   button.rdmd-code-copy {
     DISPLAY: none !important; // hide by default
-    
+
     & {
       -webkit-appearance: unset;
       margin: .5em .6em 0 0;
@@ -110,7 +112,9 @@
     }
 
     &:not(:hover) {
-      &:before, &:after {
+
+      &:before,
+      &:after {
         opacity: .66;
       }
     }
@@ -127,12 +131,15 @@
       box-shadow:
         inset 0 0 0 1px rgba(#8B8B8B, .5),
         inset 1px 4px 6px -2px rgba(0, 0, 0, .175);
-      &:before, &:after {
+
+      &:before,
+      &:after {
         opacity: .75;
       }
     }
 
-    &:before, &:after {
+    &:before,
+    &:after {
       display: inline-block;
       font: normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome";
       text-rendering: auto;
@@ -143,11 +150,13 @@
       font-variant-ligatures: discretionary-ligatures;
       font-feature-settings: "liga";
     }
+
     &:before {
       content: "\e6c9";
       font-weight: 800;
       transition: .3s .15s ease;
     }
+
     &:after {
       // @todo why are these !important @rafe, you dumbell?
       content: "\e942" !important;
@@ -162,28 +171,32 @@
 
     &_copied {
       pointer-events: none;
-      &, * {
+
+      &,
+      * {
         color: green !important;
         color: var(--md-code-text, green) !important;
         opacity: 1;
       }
+
       &:before {
         transition: .3s 0s ease;
         transform: scale(.33);
         opacity: 0 !important;
       }
+
       &:after {
         transition: .3s .15s ease;
         transform: translate(-50%, -50%) scale(1);
         opacity: 1 !important;
       }
     }
   }
-  
+
   pre {
     position: relative;
 
-    > code {
+    >code {
       background: inherit;
     }
 
@@ -198,7 +211,8 @@
     & {
       overflow: hidden;
       padding: 0;
-      > code {
+
+      >code {
         display: block !important;
         overflow: auto;
         padding: 1em;
@@ -211,6 +225,7 @@
       &:hover button.rdmd-code-copy:not(:hover) {
         transition-delay: .4s;
       }
+
       &:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied) {
         opacity: 0 !important;
       }

components/CodeTabs/index.jsx

@@ -1,7 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 
-const upper = require('@readme/syntax-highlighter/uppercase');
+const { uppercase } = require('@readme/syntax-highlighter');
 
 const CodeTabs = props => {
   const { attributes, children } = props;
@@ -27,7 +27,7 @@ const CodeTabs = props => {
           /* istanbul ignore next */
           return (
             <button key={i} onClick={e => handleClick(e, i)} type="button">
-              {meta || `${!lang ? 'Text' : upper(lang)}`}
+              {meta || `${!lang ? 'Text' : uppercase(lang)}`}
             </button>
           );
         })}

package.json

@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@readme/emojis": "^1.0.0",
-    "@readme/syntax-highlighter": "^6.15.2",
-    "@readme/variable": "^6.15.2",
+    "@readme/syntax-highlighter": "^10.2.0",
+    "@readme/variable": "^9.0.0",
     "copy-to-clipboard": "^3.3.1",
     "hast-util-sanitize": "^2.0.2",
     "hast-util-to-string": "^1.0.3",