diff --git a/components/Code/index.jsx b/components/Code/index.jsx
index d744e4fc7..c66d2cec3 100644
--- a/components/Code/index.jsx
+++ b/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 = '' }) {
diff --git a/components/Code/style.scss b/components/Code/style.scss
index 486aaab61..4a77d181f 100644
--- a/components/Code/style.scss
+++ b/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,16 +171,20 @@
 
     &_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);
@@ -179,11 +192,11 @@
       }
     }
   }
-  
+
   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;
       }
diff --git a/components/CodeTabs/index.jsx b/components/CodeTabs/index.jsx
index 32878c487..8b222c024 100644
--- a/components/CodeTabs/index.jsx
+++ b/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>
           );
         })}
diff --git a/package-lock.json b/package-lock.json
index e99e2e66d..1e4bd5956 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2572,23 +2572,35 @@
       }
     },
     "@readme/syntax-highlighter": {
-      "version": "6.15.2",
-      "resolved": "https://registry.npmjs.org/@readme/syntax-highlighter/-/syntax-highlighter-6.15.2.tgz",
-      "integrity": "sha512-3SlMBuNwff0zfdC+EoouE8aeEv/YH6bwPkFksvpx8OdZXdgx5XYM8CGF+JQbQjxz759KVQQqjOkwQpn24lbqcg==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/@readme/syntax-highlighter/-/syntax-highlighter-10.2.0.tgz",
+      "integrity": "sha512-tL+0vyJIFrsCsLGfMPoslagxn9Jh6EtElgEM9qUrzTLfWqCToH7C1stTyqM3WDdQTRzun3lWsFRERuaFy3yxSg==",
       "requires": {
-        "@readme/variable": "^6.15.2",
+        "@readme/variable": "^7.2.1",
         "codemirror": "^5.48.2",
-        "react": "^16.4.2"
+        "prop-types": "^15.7.2",
+        "react-codemirror2": "^7.2.1"
+      },
+      "dependencies": {
+        "@readme/variable": {
+          "version": "7.5.0",
+          "resolved": "https://registry.npmjs.org/@readme/variable/-/variable-7.5.0.tgz",
+          "integrity": "sha512-GC0zZA7DD6jT691x5yROUFteJd7j1pkIEQz5tlNodjZcEVaGghU/h9sLyw5KJlj+v3OYuHci69x3SJwbyt/Rug==",
+          "requires": {
+            "classnames": "^2.2.6",
+            "prop-types": "^15.7.2",
+            "react": "^16.4.2"
+          }
+        }
       }
     },
     "@readme/variable": {
-      "version": "6.15.2",
-      "resolved": "https://registry.npmjs.org/@readme/variable/-/variable-6.15.2.tgz",
-      "integrity": "sha512-8WHdd14Uf01CZvRJsWn3YOdb9N+NvLqkqIzNt5uBiwYGuiFr18I5vlSQZfDBHDm1wCsxufMsV6Pr55qjC0cmVw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@readme/variable/-/variable-9.0.0.tgz",
+      "integrity": "sha512-aTXOFPfw2GuFzsl2k6XoUpeGs0T9ujmSWBerBhgYPewC/ouKLlnduFAYPjG+2aDHNL7amtJs+Ew6BSebKwyE2A==",
       "requires": {
         "classnames": "^2.2.6",
-        "prop-types": "^15.7.2",
-        "react": "^16.4.2"
+        "prop-types": "^15.7.2"
       }
     },
     "@semantic-release/changelog": {
@@ -4975,9 +4987,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.56.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.56.0.tgz",
-      "integrity": "sha512-MfKVmYgifXjQpLSgpETuih7A7WTTIsxvKfSLGseTY5+qt0E1UD1wblZGM6WLenORo8sgmf+3X+WTe2WF7mufyw=="
+      "version": "5.58.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.58.2.tgz",
+      "integrity": "sha512-K/hOh24cCwRutd1Mk3uLtjWzNISOkm4fvXiMO7LucCrqbh6aJDdtqUziim3MZUI6wOY0rvY1SlL1Ork01uMy6w=="
     },
     "collapse-white-space": {
       "version": "1.0.6",
@@ -17977,6 +17989,11 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-codemirror2": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz",
+      "integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw=="
+    },
     "react-dom": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
diff --git a/package.json b/package.json
index e410f4c15..1b35e0029 100644
--- a/package.json
+++ b/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",