@readme/syntax-highlighter 12.1.5 → 13.0.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:"solidity",solidity:"solidity",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})();
+(()=>{var e={226: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}},980: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){var s,r,c,a,o=[],i=!0,p=!1;try{if(c=(t=t.call(e)).next,0===l){if(Object(t)!==t)return;i=!1}else for(;!(i=(s=c.call(t)).done)&&(o.push(s.value),o.length!==l);i=!0);}catch(e){p=!0,r=e}finally{try{if(!i&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(p)throw r}}return o}}(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:"solidity",solidity:"solidity",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}}},548: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(226),l=t.n(e),r=t(980),c=t(548),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.1.5",
+  "version": "13.0.0",
   "main": "dist/index.node.js",
   "browser": "dist/index.js",
   "license": "ISC",
@@ -17,8 +17,8 @@
     "build": "webpack --progress",
     "lint": "eslint . --ext .jsx --ext .js",
     "prepack": "npm run build",
-    "pretest": "npm run lint",
-    "prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",
+    "pretest": "npm run lint && npm run prettier",
+    "prettier": "prettier --list-different --write .",
     "start": "webpack serve --open --config ./webpack.config.dev.js",
     "test": "jest --coverage --runInBand",
     "watch": "webpack -w --progress"
@@ -31,36 +31,34 @@
   },
   "peerDependencies": {
     "@readme/variable": "15.x || 16.x",
-    "react": "16.x || 17.x",
-    "react-dom": "16.x || 17.x"
+    "react": "16.x || 17.x || 18.x",
+    "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.22.15",
-    "@readme/eslint-config": "^13.5.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@readme/eslint-config": "^14.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
     "babel-jest": "^29.7.0",
-    "babel-loader": "^8.2.4",
-    "core-js": "^3.33.0",
+    "babel-loader": "^9.1.3",
+    "core-js": "^3.36.1",
     "css-loader": "^6.7.3",
-    "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
-    "glob": "^10.3.10",
-    "html-webpack-plugin": "^5.5.3",
+    "glob": "^10.3.12",
+    "html-webpack-plugin": "^5.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "node-sass": "^9.0.0",
-    "prettier": "^3.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "regenerator-runtime": "^0.14.0",
+    "prettier": "^3.2.5",
+    "regenerator-runtime": "^0.14.1",
     "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.2",
-    "terser-webpack-plugin": "^5.3.7",
-    "webpack": "^5.88.2",
+    "style-loader": "^3.3.4",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
   },
   "prettier": "@readme/eslint-config/prettier",
   "bundlewatch": {

package/public/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import createRoot from 'react-dom/client';
 
 import syntaxHighlighter, { cmVariableContext } from '../src/index';
 
@@ -74,7 +74,7 @@ curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu
 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(
+const App = () => (
   <div style={{ margin: '20px' }}>
     <h1>Core Syntax Highlighter</h1>
 
@@ -163,6 +163,8 @@ ReactDOM.render(
     <pre id="hub-reference">
       {syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: false })}
     </pre>
-  </div>,
-  document.getElementById('root'),
+  </div>
 );
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

package/public/index.legacy.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import syntaxHighlighter, { cmVariableContext } from '../src/index';
+
+const exampleCode = `curl --request POST
+  --url <<url>>
+  --header 'authorization: Bearer 123'
+  --header 'content-type: application/json'`;
+
+const exampleJson = `{
+    "key": "value",
+    "array": [1, 2, 3],
+    "a": {
+      "b": {
+        "c": {
+          "d": "ok",
+          "e": "err"
+        },
+        "f": {
+          "g": "ok"
+        },
+        "h": {
+          "i": "ok"
+        }
+      },
+      "j": {
+        "k": {
+          "l": "ok"
+        }
+      }
+    },
+    "isThing": true
+  }
+  `;
+
+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.`;
+
+const App = () => (
+  <div style={{ margin: '20px' }}>
+    <h1>Core Syntax Highlighter</h1>
+
+    <h2>Dark Theme</h2>
+    <pre id="hub-reference">
+      <cmVariableContext.Provider
+        value={{
+          user: {},
+          defaults: [
+            {
+              name: 'url',
+              default: 'GET',
+            },
+          ],
+        }}
+      >
+        {syntaxHighlighter(exampleCode, 'curl', {
+          dark: true,
+          highlightMode: true,
+          tokenizeVariables: true,
+          ranges: [
+            [
+              { ch: 0, line: 0 },
+              { ch: 0, line: 1 },
+            ],
+            [
+              { ch: 0, line: 4 },
+              { ch: 0, line: 5 },
+            ],
+          ],
+        })}
+      </cmVariableContext.Provider>
+    </pre>
+
+    <h2>Light Theme</h2>
+    <pre id="hub-reference">
+      <cmVariableContext.Provider
+        value={{
+          user: {},
+          defaults: [
+            {
+              name: 'url',
+              default: 'GET',
+            },
+          ],
+        }}
+      >
+        {syntaxHighlighter(exampleCode, 'curl', {
+          dark: false,
+          highlightMode: true,
+          tokenizeVariables: true,
+          ranges: [
+            [
+              { ch: 0, line: 0 },
+              { ch: 0, line: 1 },
+            ],
+            [
+              { ch: 0, line: 4 },
+              { ch: 0, line: 5 },
+            ],
+          ],
+        })}
+      </cmVariableContext.Provider>
+    </pre>
+
+    <hr />
+    <h1>Code Editor</h1>
+    <h2>Dark Theme</h2>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: true })}
+    </pre>
+
+    <h2>Light Theme</h2>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: false })}
+    </pre>
+
+    <hr />
+    <h1>Code Folding</h1>
+    <h2>Dark Theme</h2>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: true })}
+    </pre>
+
+    <h2>Light Theme</h2>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: false })}
+    </pre>
+  </div>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));

package/src/codeMirror/index.jsx

@@ -61,6 +61,7 @@ const highlightedLines = (ranges, totalLength) => {
   ranges.forEach(([anchor, head]) => {
     const end = head.line;
     let position = anchor.line;
+
     while (position < end) {
       highlights[position] = 'cm-highlight';
       position += 1;
@@ -125,7 +126,7 @@ const StyledSyntaxHighlighter = ({ output, ranges }) => {
 
   const highlights = ranges && ranges.length ? highlightedLines(ranges, gutteredOutput.length) : [];
   return (
-    <div className="CodeMirror">
+    <div className="CodeMirror" data-testid="CodeMirror">
       <StructuredOutput gutteredInput={gutteredOutput} highlights={highlights} />
     </div>
   );

package/src/index.js

@@ -56,7 +56,7 @@ const SyntaxHighlighter = (
 
   return React.createElement(
     wrapper,
-    { className: classes.join(' ') },
+    { className: classes.join(' '), 'data-testid': 'SyntaxHighlighter' },
     codemirror(typeof code === 'string' ? code : '', lang, opts),
   );
 };

package/webpack.config.dev.js

@@ -4,7 +4,7 @@ const HtmlWebPackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   mode: 'development',
-  entry: ['./public/index.js'],
+  entry: [['16', '18'].includes(process.env.REACT_VERSION) ? './public/index.legacy.js' : './public.index.js'],
   module: {
     rules: [
       {

package/lib/enzyme.js

@@ -1,16 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/no-unresolved */
-/* eslint-disable global-require */
-const enzyme = require('enzyme');
-
-let Adapter;
-if (process.env.REACT_VERSION && process.env.REACT_VERSION === '16') {
-  Adapter = require('enzyme-adapter-react-16');
-} else {
-  Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
-}
-
-require('core-js/stable');
-require('regenerator-runtime/runtime');
-
-enzyme.configure({ adapter: new Adapter() });