@readme/syntax-highlighter 12.0.1 → 12.1.0

package/dist/index.node.js

@@ -1 +1 @@
-(()=>{var e={559:e=>{var l={aspx:"asp",bash:"shell","c++":"cplusplus","c#":"csharp",clj:"clojure",cljc:"clojure",cljx:"clojure",coffeescript:"javascript",cpp:"cplusplus",cql:"sql",cs:"csharp",docker:"dockerfile",ecmascript:"javascript",erl:"erlang",gql:"graphql",gradle:"groovy",handlebars:"html",hbs:"html",jl:"julia",jruby:"ruby",js:"javascript",kt:"kotlin",less:"css",macruby:"ruby",md:"markdown",ml:"ocaml",mssql:"sql",mysql:"sql",node:"javascript","obj-c":"objectivec","obj-c++":"objectivecplusplus","objc++":"objectivecplusplus",objc:"objectivec",objcpp:"objectivecplusplus",objectivecpp:"objectivecplusplus",pgsql:"sql",pl:"perl",plsql:"sql",postgres:"sql",postgresql:"sql",ps1:"powershell",py:"python",rake:"ruby",rb:"ruby",rbx:"ruby",rs:"rust",sass:"css",scss:"css",sh:"shell",solidity:"sol",sqlite:"sql",styl:"css",stylus:"css",xhtml:"html",yml:"yaml",zsh:"shell"};e.exports=function(e){return e in l?l[e]:e}},476:e=>{function l(e,l){return function(e){if(Array.isArray(e))return e}(e)||function(e,l){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var s,r,c=[],a=!0,o=!1;try{for(t=t.call(e);!(a=(s=t.next()).done)&&(c.push(s.value),!l||c.length!==l);a=!0);}catch(e){o=!0,r=e}finally{try{a||null==t.return||t.return()}finally{if(o)throw r}}return c}(e,l)||function(e,l){if(!e)return;if("string"==typeof e)return t(e,l);var s=Object.prototype.toString.call(e).slice(8,-1);"Object"===s&&e.constructor&&(s=e.constructor.name);if("Map"===s||"Set"===s)return Array.from(e);if("Arguments"===s||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(s))return t(e,l)}(e,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,l){(null==l||l>e.length)&&(l=e.length);for(var t=0,s=new Array(l);t<l;t++)s[t]=e[t];return s}var s={asp:"clike",aspx:"clike",bash:"shell",c:"clike","c#":["clike","text/x-csharp"],"c++":["clike","text/x-c++src"],clj:"clojure",cljc:"clojure",cljx:"clojure",coffeescript:"javascript",cplusplus:["clike","text/x-c++src"],cpp:["clike","text/x-c++src"],cql:["sql","text/x-cassandra"],cs:["clike","text/x-csharp"],csharp:["clike","text/x-csharp"],curl:"shell",d:"d",diff:"diff",ecmascript:"javascript",erl:"erlang",go:["go","text/x-go"],gradle:"groovy",gql:"graphql",handlebars:"htmlmixed",hbs:"htmlmixed",html:"htmlmixed",java:["clike","text/x-java"],jl:"julia",js:"javascript",jsx:"jsx",json:["javascript","application/ld+json"],jruby:"ruby",kotlin:["clike","text/x-kotlin"],kt:["clike","text/x-kotlin"],less:"css",liquid:"htmlmixed",lua:"lua",node:"javascript",macruby:"ruby",markdown:"gfm",ml:["mllike","text/x-ocaml"],mssql:["sql","text/x-mssql"],mysql:["sql","text/x-mysql"],objc:["clike","text/x-objectivec"],"objc++":["clike","text/x-objectivec++"],objcpp:["clike","text/x-objectivec++"],objectivec:["clike","text/x-objectivec"],objectivecpp:["clike","text/x-objectivec++"],objectivecplusplus:["clike","text/x-objectivec++"],ocaml:["mllike","text/x-ocaml"],php:["php","text/x-php"],pgsql:["sql","text/x-pgsql"],pl:"perl",plsql:["sql","text/x-plsql"],postgres:["sql","text/x-pgsql"],postgresql:["sql","text/x-pgsql"],ps1:"powershell",py:"python",r:"r",rake:"ruby",rb:"ruby",rbx:"ruby",rs:"rust",sass:"css",scala:["clike","text/x-scala"],scss:"css",sh:"shell",sol:"clike",solidity:"clike",sql:["sql","text/x-sql"],sqlite:["sql","text/x-sqlite"],styl:"css",stylus:"css",text:["null","text/plain"],ts:["javascript","text/typescript"],typescript:["javascript","text/typescript"],xhtml:"htmlmixed",yml:"yaml",zsh:"shell"};e.exports={modes:s,getMode:function(e){var t=e;return t in s&&(t=s[t],Array.isArray(t)&&(t=l(t,2)[1])),t}}},857:e=>{var l={asp:"ASP.NET",aspx:"ASP.NET",bash:"Bash",c:"C","c#":"C#","c++":"C++",coffeescript:"CoffeeScript",clj:"Clojure",cljc:"Clojure",cljx:"Clojure",clojure:"Clojure",cplusplus:"C++",cpp:"C++",cql:"Cassandra",cs:"C#",csharp:"C#",css:"CSS",curl:"cURL",d:"D",dart:"Dart",diff:"Diff",dockerfile:"Dockerfile",ecmascript:"ECMAScript",erl:"Erlang",erlang:"Erlang",go:"Go",gql:"GraphQL",gradle:"Gradle",graphql:"GraphQL",groovy:"Groovy",handlebars:"Handlebars",hbs:"Handlebars",haml:"HAML",haxe:"Haxe",html:"HTML",http:"HTTP",java:"Java",javascript:"JavaScript",jinja2:"Jinja2",jl:"Julia",jruby:"JRuby",js:"JavaScript",json:"JSON",jsx:"JSX",julia:"Julia",kotlin:"Kotlin",kt:"Kotlin",less:"LESS",liquid:"Liquid",lua:"Lua",macruby:"MacRuby",markdown:"Markdown",md:"Markdown",ml:"OCaml",mssql:"SQL Server",mysql:"MySQL",node:"Node",objc:"Objective-C","objc++":"Objective-C++",objcpp:"Objective-C++",objectivec:"Objective-C",objectivecpp:"Objective-C++",objectivecplusplus:"Objective-C++",ocaml:"OCaml",perl:"Perl",php:"PHP",pl:"Perl",pgsql:"PL/pgSQL",plsql:"PL/SQL",postgres:"PostgreSQL",postgresql:"PostgreSQL",powershell:"PowerShell",ps1:"PowerShell",python:"Python",py:"Python",r:"R",rake:"Rake",rb:"Ruby",rbx:"Rubinius",rs:"Rust",ruby:"Ruby",rust:"Rust",sass:"Sass",scala:"Scala",scss:"SCSS",sh:"Shell",shell:"Shell",smarty:"Smarty",solidity:"Solidity",sql:"SQL",sqlite:"SQLite",stylus:"Stylus",styl:"Stylus",swift:"Swift",text:"Text",toml:"TOML",twig:"Twig",typescript:"TypeScript",xhtml:"XHTML",xml:"XML",yaml:"YAML",yml:"YAML",zsh:"Zsh"};e.exports=function(e){return e in l?l[e]:e}}},l={};function t(s){var r=l[s];if(void 0!==r)return r.exports;var c=l[s]={exports:{}};return e[s](c,c.exports,t),c.exports}t.n=e=>{var l=e&&e.__esModule?()=>e.default:()=>e;return t.d(l,{a:l}),l},t.d=(e,l)=>{for(var s in l)t.o(l,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:l[s]})},t.o=(e,l)=>Object.prototype.hasOwnProperty.call(e,l),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};(()=>{"use strict";t.r(s),t.d(s,{canonical:()=>c.a,getMode:()=>a.getMode,modes:()=>a.modes,uppercase:()=>l.a});var e=t(857),l=t.n(e),r=t(559),c=t.n(r),a=t(476)})(),module.exports=s})();
+(()=>{var e={559:e=>{var l={aspx:"asp",bash:"shell","c++":"cplusplus","c#":"csharp",clj:"clojure",cljc:"clojure",cljx:"clojure",coffeescript:"javascript",cpp:"cplusplus",cql:"sql",cs:"csharp",docker:"dockerfile",ecmascript:"javascript",erl:"erlang",gql:"graphql",gradle:"groovy",handlebars:"html",hbs:"html",jl:"julia",jruby:"ruby",js:"javascript",kt:"kotlin",less:"css",macruby:"ruby",md:"markdown",ml:"ocaml",mssql:"sql",mysql:"sql",node:"javascript","obj-c":"objectivec","obj-c++":"objectivecplusplus","objc++":"objectivecplusplus",objc:"objectivec",objcpp:"objectivecplusplus",objectivecpp:"objectivecplusplus",pgsql:"sql",pl:"perl",plsql:"sql",postgres:"sql",postgresql:"sql",ps1:"powershell",py:"python",rake:"ruby",rb:"ruby",rbx:"ruby",rs:"rust",sass:"css",scss:"css",sh:"shell",solidity:"sol",sqlite:"sql",styl:"css",stylus:"css",xhtml:"html",yml:"yaml",zsh:"shell"};e.exports=function(e){return e in l?l[e]:e}},476:e=>{function l(e,l){return function(e){if(Array.isArray(e))return e}(e)||function(e,l){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var s,r,c=[],a=!0,o=!1;try{for(t=t.call(e);!(a=(s=t.next()).done)&&(c.push(s.value),!l||c.length!==l);a=!0);}catch(e){o=!0,r=e}finally{try{a||null==t.return||t.return()}finally{if(o)throw r}}return c}(e,l)||function(e,l){if(!e)return;if("string"==typeof e)return t(e,l);var s=Object.prototype.toString.call(e).slice(8,-1);"Object"===s&&e.constructor&&(s=e.constructor.name);if("Map"===s||"Set"===s)return Array.from(e);if("Arguments"===s||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(s))return t(e,l)}(e,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,l){(null==l||l>e.length)&&(l=e.length);for(var t=0,s=new Array(l);t<l;t++)s[t]=e[t];return s}var s={asp:"clike",aspx:"clike",bash:"shell",c:"clike","c#":["clike","text/x-csharp"],"c++":["clike","text/x-c++src"],clj:"clojure",cljc:"clojure",cljx:"clojure",coffeescript:"javascript",cplusplus:["clike","text/x-c++src"],cpp:["clike","text/x-c++src"],cql:["sql","text/x-cassandra"],cs:["clike","text/x-csharp"],csharp:["clike","text/x-csharp"],curl:"shell",d:"d",diff:"diff",ecmascript:"javascript",erl:"erlang",go:["go","text/x-go"],gradle:"groovy",gql:"graphql",handlebars:"htmlmixed",hbs:"htmlmixed",html:"htmlmixed",java:["clike","text/x-java"],jl:"julia",js:"javascript",jsx:"jsx",json:["javascript","application/ld+json"],jruby:"ruby",kotlin:["clike","text/x-kotlin"],kt:["clike","text/x-kotlin"],less:"css",liquid:"htmlmixed",lua:"lua",node:"javascript",macruby:"ruby",markdown:"gfm",ml:["mllike","text/x-ocaml"],mssql:["sql","text/x-mssql"],mysql:["sql","text/x-mysql"],objc:["clike","text/x-objectivec"],"objc++":["clike","text/x-objectivec++"],objcpp:["clike","text/x-objectivec++"],objectivec:["clike","text/x-objectivec"],objectivecpp:["clike","text/x-objectivec++"],objectivecplusplus:["clike","text/x-objectivec++"],ocaml:["mllike","text/x-ocaml"],php:["php","text/x-php"],pgsql:["sql","text/x-pgsql"],pl:"perl",plsql:["sql","text/x-plsql"],postgres:["sql","text/x-pgsql"],postgresql:["sql","text/x-pgsql"],ps1:"powershell",py:"python",r:"r",rake:"ruby",rb:"ruby",rbx:"ruby",rs:"rust",sass:"css",scala:["clike","text/x-scala"],scss:"css",sh:"shell",sol:"clike",solidity:"clike",sql:["sql","text/x-sql"],sqlite:["sql","text/x-sqlite"],styl:"css",stylus:"css",text:["null","text/plain"],ts:["javascript","text/typescript"],typescript:["javascript","text/typescript"],xhtml:"htmlmixed",yml:"yaml",zsh:"shell"};e.exports={modes:s,getMode:function(e){var t=e;return t in s&&(t=s[t],Array.isArray(t)&&(t=l(t,2)[1])),t}}},857:e=>{var l={asp:"ASP.NET",aspx:"ASP.NET",bash:"Bash",c:"C","c#":"C#","c++":"C++",coffeescript:"CoffeeScript",clj:"Clojure",cljc:"Clojure",cljx:"Clojure",clojure:"Clojure",cplusplus:"C++",cpp:"C++",cql:"Cassandra",cs:"C#",csharp:"C#",css:"CSS",curl:"cURL",d:"D",dart:"Dart",diff:"Diff",dockerfile:"Dockerfile",ecmascript:"ECMAScript",erl:"Erlang",erlang:"Erlang",go:"Go",gql:"GraphQL",gradle:"Gradle",graphql:"GraphQL",groovy:"Groovy",handlebars:"Handlebars",hbs:"Handlebars",haml:"HAML",haxe:"Haxe",html:"HTML",http:"HTTP",java:"Java",javascript:"JavaScript",jinja2:"Jinja2",jl:"Julia",jruby:"JRuby",js:"JavaScript",json:"JSON",jsx:"JSX",julia:"Julia",kotlin:"Kotlin",kt:"Kotlin",less:"LESS",liquid:"Liquid",lua:"Lua",macruby:"MacRuby",markdown:"Markdown",md:"Markdown",ml:"OCaml",mssql:"SQL Server",mysql:"MySQL",node:"Node",objc:"Objective-C","objc++":"Objective-C++",objcpp:"Objective-C++",objectivec:"Objective-C",objectivecpp:"Objective-C++",objectivecplusplus:"Objective-C++",ocaml:"OCaml",perl:"Perl",php:"PHP",pl:"Perl",pgsql:"PL/pgSQL",plsql:"PL/SQL",postgres:"PostgreSQL",postgresql:"PostgreSQL",powershell:"PowerShell",ps1:"PowerShell",python:"Python",py:"Python",r:"R",rake:"Rake",rb:"Ruby",rbx:"Rubinius",rs:"Rust",ruby:"Ruby",rust:"Rust",sass:"Sass",scala:"Scala",scss:"SCSS",sh:"Shell",shell:"Shell",smarty:"Smarty",solidity:"Solidity",sql:"SQL",sqlite:"SQLite",stylus:"Stylus",styl:"Stylus",swift:"Swift",text:"Text",toml:"TOML",twig:"Twig",typescript:"TypeScript",xhtml:"XHTML",xml:"XML",yaml:"YAML",yml:"YAML",zsh:"Zsh"};e.exports=function(e){return e in l?l[e]:e}}},l={};function t(s){var r=l[s];if(void 0!==r)return r.exports;var c=l[s]={exports:{}};return e[s](c,c.exports,t),c.exports}t.n=e=>{var l=e&&e.__esModule?()=>e.default:()=>e;return t.d(l,{a:l}),l},t.d=(e,l)=>{for(var s in l)t.o(l,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:l[s]})},t.o=(e,l)=>Object.prototype.hasOwnProperty.call(e,l),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};(()=>{"use strict";t.r(s),t.d(s,{canonical:()=>l.a,getMode:()=>r.getMode,modes:()=>r.modes,uppercase:()=>a.a});var e=t(559),l=t.n(e),r=t(476),c=t(857),a=t.n(c)})(),module.exports=s})();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@readme/syntax-highlighter",
   "description": "ReadMe's React-based syntax highlighter",
-  "version": "12.0.1",
+  "version": "12.1.0",
   "main": "dist/index.node.js",
   "browser": "dist/index.js",
   "license": "ISC",
@@ -37,35 +37,35 @@
     "react-dom": "16.x || 17.x"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.18.9",
+    "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.14.5",
-    "@commitlint/cli": "^17.0.2",
-    "@commitlint/config-conventional": "^17.0.2",
-    "@readme/eslint-config": "^8.8.3",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "babel-jest": "^28.1.3",
+    "@commitlint/cli": "^17.6.1",
+    "@commitlint/config-conventional": "^17.6.1",
+    "@readme/eslint-config": "^10.5.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-jest": "^29.5.0",
     "babel-loader": "^8.2.4",
-    "core-js": "^3.23.5",
-    "css-loader": "^6.7.1",
+    "core-js": "^3.30.1",
+    "css-loader": "^6.7.3",
     "enzyme": "^3.11.0",
-    "eslint": "^8.20.0",
-    "glob": "^8.0.1",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^8.0.1",
+    "eslint": "^8.38.0",
+    "glob": "^9.3.4",
+    "html-webpack-plugin": "^5.5.1",
+    "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "node-sass": "^6.0.1",
-    "prettier": "^2.6.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "node-sass": "^7.0.3",
+    "prettier": "^2.8.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
-    "sass-loader": "^13.0.0",
-    "style-loader": "^3.2.1",
-    "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1"
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "terser-webpack-plugin": "^5.3.7",
+    "webpack": "^5.80.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.3"
   },
   "prettier": "@readme/eslint-config/prettier",
   "commitlint": {

package/public/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import syntaxHighlighter, { cmVariableContext } from '../src/index';
 
 const exampleCode = `curl --request POST
@@ -33,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>
@@ -102,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>

package/src/codeEditor/index.jsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
+
+import '../utils/cm-mode-imports';
 import { getMode } from '../utils/modes';
+
 import defaults from './cm.options';
-import '../utils/cm-mode-imports';
 import './style.scss';
 
 const CodeEditor = ({ className, code, lang, options, children, theme, ...attr }) => {

package/src/codeMirror/index.jsx

@@ -1,15 +1,18 @@
-import CodeMirror from 'codemirror';
-import React from 'react';
-import PropTypes from 'prop-types';
 import Variable, { VARIABLE_REGEXP, VariablesContext } from '@readme/variable';
-import { getMode } from '../utils/modes';
-
-import '../utils/cm-mode-imports';
-import './style.scss';
+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';
+
+import '../utils/cm-mode-imports';
+import { getMode } from '../utils/modes';
+
+import './style.scss';
 
 // Pre output conversion
 // CodeMirror "Gutter" -> Apply line numbers to styled lines
@@ -194,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 = '';

package/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;

package/src/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import codemirror, { VariablesContext as cmVariableContext } from './codeMirror';
+
 import codeEditor from './codeEditor';
-import uppercase from './utils/uppercase';
+import codemirror, { VariablesContext as cmVariableContext } from './codeMirror';
 import canonical from './utils/canonical';
 import { modes } from './utils/modes';
+import uppercase from './utils/uppercase';
 
 const SyntaxHighlighter = (
   code,

package/src/index.node.js

@@ -1,5 +1,5 @@
-import uppercase from './utils/uppercase';
 import canonical from './utils/canonical';
 import { modes, getMode } from './utils/modes';
+import uppercase from './utils/uppercase';
 
 export { uppercase, canonical, modes, getMode };

package/webpack.config.dev.js

@@ -1,6 +1,7 @@
-const HtmlWebPackPlugin = require('html-webpack-plugin');
 const path = require('path');
 
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+
 module.exports = {
   mode: 'development',
   entry: ['./public/index.js'],

package/webpack.config.js

@@ -1,6 +1,7 @@
-const TerserPlugin = require('terser-webpack-plugin');
 const path = require('path');
 
+const TerserPlugin = require('terser-webpack-plugin');
+
 const base = {
   mode: 'production',
   module: {