diff --git a/public/index.js b/public/index.js
index a76049e5..793f333f 100644
--- a/public/index.js
+++ b/public/index.js
@@ -34,6 +34,46 @@ const exampleJson = `{
   }
   `;
 
+const exampleMarkdown = `# Custom Scrollbars
+
+This is a piece of text that creates scrollbars
+
+Lorem ipsum dolor sit amet, turpis nec facilisis neque vestibulum adipiscing, magna nunc est luctus orci a,
+aliquam duis ad volutpat nostra. Vestibulum ultricies suspendisse commodo volutpat pede sed. Bibendum odio
+dignissim, ad vitae mollis ac sed nibh quis, suspendisse diam, risus quas blandit phasellus luctus nec,
+integer nunc vitae posuere scelerisque. Lobortis quam porta conubia nulla. Et nisl ac, imperdiet vitae ac.
+Parturient sit. Et vestibulum euismod, rutrum nunc libero mauris purus convallis. Cum id adipiscing et eget
+pretium rutrum, ultrices sapien magnis fringilla sit lorem, eu vitae scelerisque ipsum aliquet, magna sed
+fusce vel.
+
+Lectus ultricies libero dolor convallis, sed etiam vel hendrerit egestas viverra, at urna mauris, eget
+vulputate dolor voluptatem, nulla eget sollicitudin. Sed tincidunt, elit sociis. Mattis mi tortor dui id
+sodales mi, maecenas nam fringilla risus turpis mauris praesent, imperdiet maecenas ultrices nonummy tellus
+quis est. Scelerisque nec pharetra quis varius fringilla. Varius vestibulum non dictum pharetra, tincidunt in
+vestibulum iaculis molestie, id condimentum blandit elit urna magna pulvinar, quam suspendisse pellentesque
+donec. Vel amet ad ac. Nec aut viverra, morbi mi neque massa, turpis enim proin. Tellus eu, fermentum velit
+est convallis aliquam velit, rutrum in diam lacus, praesent tempor pellentesque dictum semper augue. Felis
+explicabo massa amet lectus phasellus dolor. Ut lorem quis arcu neque felis ultricies, senectus vitae
+curabitur sed pellentesque et, id sed risus in sed ac accumsan, blandit arcu quam duis nunc.
+
+Sed leo sollicitudin odio vitae, purus sit egestas, justo eros inceptos auctor fermentum lectus. Ligula luctus
+turpis, quod massa vitae elementum orci, nullam fringilla elit tortor. Justo ante tempor amet quam posuere
+volutpat. Facilisis pede erat ut hac ultrices ipsum, wisi duis sit metus. Dolor vitae est sed sed vitae. Sed
+eu ligula, morbi vestibulum nunc nibh velit ut taciti, ligula elit semper sagittis in, auctor arcu vel eget.
+Mauris at vitae nec suspendisse et, aenean proin blandit suscipit. Morbi quam, dolor ultricies. Viverra
+tempus. Suspendisse sit dapibus, ac fuga aenean, magna nisl nonummy augue posuere, dictum ut fuga velit
+parturient augue interdum, mattis sit tellus.
+
+Vehicula commodo tempus curabitur eros, lacinia erat vulputate lorem vel fermentum donec, lectus sed conubia
+id pellentesque. Vel senectus donec pede aliquet dolor sit, nec vivamus justo placerat interdum maecenas,
+sodales euismod. Quis netus sapien amet, vestibulum quam nec amet lacinia, quis aliquet, tempor vivamus tellus
+enim, suscipit quis eleifend. Amet class phasellus orci pretium, risus in nulla. Neque sit ullamcorper,
+ultricies platea id nec suspendisse ac. Et elementum. Dictum nam, ut dui fermentum egestas facilisis elit
+augue, adipiscing donec ipsum erat nam pellentesque convallis, vestibulum vestibulum risus id nulla ut mauris,
+curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu quis. Est fringilla etiam,
+maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volutpat proin. Et occaecati
+lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.`;
+
 ReactDOM.render(
   <div style={{ margin: '20px' }}>
     <h1>Core Syntax Highlighter</h1>
@@ -103,10 +143,14 @@ ReactDOM.render(
     <hr />
     <h1>Code Editor</h1>
     <h2>Dark Theme</h2>
-    <pre id="hub-reference">{syntaxHighlighter(exampleCode, 'curl', { editable: true, dark: true })}</pre>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: true })}
+    </pre>
 
     <h2>Light Theme</h2>
-    <pre id="hub-reference">{syntaxHighlighter(exampleCode, 'curl', { editable: true, dark: false })}</pre>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: false })}
+    </pre>
 
     <hr />
     <h1>Code Folding</h1>
diff --git a/src/codeMirror/index.jsx b/src/codeMirror/index.jsx
index 08061f05..513589c9 100644
--- a/src/codeMirror/index.jsx
+++ b/src/codeMirror/index.jsx
@@ -3,6 +3,8 @@ import CodeMirror from 'codemirror';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/runmode/runmode';
+import 'codemirror/addon/scroll/simplescrollbars';
+import 'codemirror/addon/scroll/simplescrollbars.css';
 import 'codemirror/mode/meta';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -195,7 +197,7 @@ const ReadmeCodeMirror = (code, lang, opts = { tokenizeVariables: false, highlig
   const mode = getMode(lang);
   const output = [];
 
-  const [codeWithoutVars, reinsertVariables] = extractVariables(code, opts);
+  const [codeWithoutVars, reinsertVariables] = extractVariables(code, { scrollbarStyle: 'overlay', ...opts });
 
   let curStyle = null;
   let accum = '';
diff --git a/src/codeMirror/style.scss b/src/codeMirror/style.scss
index 617b1854..1cd9bb3d 100644
--- a/src/codeMirror/style.scss
+++ b/src/codeMirror/style.scss
@@ -58,6 +58,20 @@ $lightHighlight: rgba($lightColor, 0.1);
   }
 }
 
+// Custom scrollbar styles
+// see: https://codemirror.net/5/demo/simplescrollbars.html
+.CodeMirror {
+  &-scrollbar-filler {
+    display: none !important;
+  }
+  &-overlayscroll {
+    &-horizontal div,
+    &-vertical div {
+      background: rgba(#cacaca, 0.5) !important;
+    }
+  }
+}
+
 .cm-linerow {
   position: relative;
   text-indent: $gutterWidth + 4px;