<div style="display:flex"> <span style="margin-right:4px"> <a href="https://replit.com/github/replit/codemirror-minimap" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-minimap" alt="Run on Replit badge"
npm install @replit/codemirror-minimap```
bun i @replit/codemirror-minimap
`typescript
import { basicSetup, EditorView } from 'codemirror';
import { showMinimap } from "@replit/codemirror-minimap"
let create = (v: EditorView) => {
const dom = document.createElement('div');
return { dom }
}
let view = new EditorView({
doc: "",
extensions: [
basicSetup,
showMinimap.compute(['doc'], (state) => {
return {
create,
/ optional /
displayText: 'blocks',
showOverlay: 'always',
gutters: [ { 1: '#00FF00', 2: '#00FF00' } ],
}
}),
],
parent: document.querySelector('#editor'),
})
`
The minimap extension exposes a few configuration options:
displayText: customize how the editor text is displayed:
`typescript`
/**
* displayText?: "blocks" | "characters";
* Defaults to "characters"
*/
{
displayText: 'blocks'
}
eventHandlers: attach event handlers to the minimap container element
`typescript`
/**
* eventHandlers?: {[event in keyof DOMEventMap]?: EventHandler
*/
{
eventHandlers: {
'contextmenu': (e) => onContextMenu(e)
}
}
showOverlay: customize when the overlay showing the current viewport is visible
`typescript`
/**
* showOverlay?: "always" | "mouse-over";
* Defaults to "always"
*/
{
showOverlay: 'mouse-over'
}
gutters: display a gutter on the left side of the minimap at specific lines
`typescriptnumber
/**
* gutters?: Array
* Where is line number, and string is a color`
*/
{
gutters: [ { 1: '#00FF00', 2: 'green', 3: 'rgb(0, 100, 50)' } ]
}
To build from source:
``
bun build
To publish a new version to NPM registry:
```
npm publish