k11q / codemirror-indentation-markers Goto Github PK

View Code? Open in Web Editor NEW

A CodeMirror extension that renders indentation markers

License: MIT License

JavaScript 1.25% TypeScript 95.79% Nix 0.71% HTML 2.26%

codemirror-indentation-markers's Introduction

CodeMirror Indentation Markers

A CodeMirror extension that renders indentation markers using a heuristic similar to what other popular editors, like Ace and Monaco, use.

Usage

import { basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { indentationMarkers } from '@replit/codemirror-indentation-markers';

const doc = `
def max(a, b):
  if a > b:
    return a
  else:
    return b
`

new EditorView({
  state: EditorState.create({
    doc,
    extensions: [basicSetup, indentationMarkers()],
  }),
  parent: document.querySelector('#editor'),
});

Options

You can provide an options object to indentationMarkers() with the following optional properties:

highlightActiveBlock

Boolean that determines whether the active block marker is styled differently. Setting this to false provides a significant performance enhancement because it means that markers do not need to be regenerated when the selection changes. Defaults to true.
hideFirstIndent

Boolean that determines whether markers in the first column are omitted. Defaults to false.

Example

new EditorView({
  state: EditorState.create({
    doc,
    extensions: [
      basicSetup,
      indentationMarkers({
        highlightActiveBlock: false,
        hideFirstIndent: true,
      })
    ],
  }),
  parent: document.querySelector('#editor'),
});

Recommend Projects