Minimap
CodeMirror
addon
<!doctype html> <html> <head> <title>Minimap</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="HandheldFriendly" content="True" /> <link rel="stylesheet" href="./lib/codemirror/lib/codemirror.css"> <link rel="stylesheet" href="./lib/codemirror/addon/scroll/simplescrollbars.css"> <link rel="stylesheet" href="./lib/codemirror/theme/dracula.css"> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="main"> <h1>Minimap</h1> <h4> <a href="https://codemirror.net/">CodeMirror</a> addon </h4> </div> <script src="./lib/codemirror/lib/codemirror.js"> </script> <script src="./lib/codemirror/mode/markdown/markdown.js"></script> <script src="./lib/codemirror/mode/xml/xml.js"></script> <script src="./lib/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="./lib/codemirror/addon/scroll/simplescrollbars.js"></script> <script src="./lib/codemirror/addon/display/panel.js"></script> <!-- minimap --> <script src="./dist/cache.js" type="text/javascript"></script> <script src="./dist/drawer.js" type="text/javascript"></script> <script src="./dist/elements.js" type="text/javascript"></script> <script src="./dist/minimap.js" type="text/javascript"></script> <script src="./dist/extension.js" type="text/javascript"></script> <script> var editor = CodeMirror.fromTextArea(document.getElementById("javascript"), { mode: "htmlmixed", lineNumbers: true, scrollbarStyle: "simple", theme: "dracula", miniMap: true, miniMapSide: "left" }); </script> </body> </html>