# @replit/codemirror-indentation-markers

> Render indentation markers in CodeMirror

Latest version **6.5.3** (published 2024-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @replit/codemirror-indentation-markers
pnpm add @replit/codemirror-indentation-markers
yarn add @replit/codemirror-indentation-markers
bun add @replit/codemirror-indentation-markers
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.5.3 |
| Published | 2024-07-15 |
| First published | 2022-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 132.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 92 |
| Author | Sergei Chestakov |
| Maintainers | sareini, krishatreplit, mikewesthad, motzyball, replitdstewart, ryanweingast, theflowingsky, jonesit-replit, szymon_k, cdmistman, jackyzha0, jamesaustinreplit, lopezhoracio, bradymaddenreplit, ryantm, alexisreplit, ink404, brianpool, tobyho, brenoafb, masad-frost, lincolnreplit, stkenned, replitmatt, cbrewster, ltazmin_replit, moudy, lhchavez |

## Links

- npm: https://www.npmjs.com/package/@replit/codemirror-indentation-markers
- Repository: https://github.com/replit/codemirror-indentation-markers
- Homepage: https://github.com/replit/codemirror-indentation-markers#readme
- Issues: https://github.com/replit/codemirror-indentation-markers/issues
- npm.io page: https://npm.io/package/@replit/codemirror-indentation-markers

## Recent versions

- 6.5.3 (latest) — 2024-07-15
- 6.5.2 — 2024-06-05
- 6.5.1 — 2024-03-13
- 6.5.0 — 2023-09-12
- 6.4.3 — 2023-08-10
- 6.4.2 — 2023-04-27
- 6.4.1 — 2023-04-27
- 6.4.0 — 2023-03-23
- 6.3.0 — 2023-02-16
- 6.2.2 — 2023-02-09
- 6.2.1 — 2023-02-09
- 6.2.0 — 2023-02-08
- 6.1.0 — 2022-09-20
- 6.0.0 — 2022-06-23
- 0.20.0 — 2022-04-22
- … 2 more at https://npm.io/package/@replit/codemirror-indentation-markers/versions

## README

# CodeMirror Indentation Markers

<span><a href="https://replit.com/@util/codemirror-indentation-markers" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-indentation-markers" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-indentation-markers" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-indentation-markers?color=blue" alt="NPM version badge" /></a></span>

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

![Example](public/cm-indentation-markers.png)

### Usage

```ts
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`.
  
- `markerType`
  
    String that determines how far the indentation markers extend. `"fullScope"` indicates that the markers extend down the full height of a scope. With the `"codeOnly"` option, indentation markers terminate at the last nonempty line in a scope. Defaults to `"fullScope"`.

- `thickness`

    Integer that determines the thickness in pixels of the indentation markers. Defaults to `1`.

- `activeThickness`

    Integer that determines the thickness in pixels of the active indentation markers. If `undefined` or `null` then `thickness` will be used. Defaults to `undefined`.

- `colors`

    Object that determines the colors of the indentation markers.

    - `light`

        String that determines the color of the markers when the editor has a light theme. Defaults to `#F0F1F2`.

    - `dark`

        String that determines the color of the markers when the editor has a dark theme. Defaults to `#2B3245`.

    - `activeLight`

        String that determines the color of the active block marker when the editor has a light theme. Only applies if `highlightActiveBlock` is `true`. Defaults to `#E4E5E6`.

    - `activeDark`

        String that determines the color of the active block marker when the editor has a dark theme. Only applies if `highlightActiveBlock` is `true`. Defaults to `#3C445C`.

#### Example

```ts
new EditorView({
  state: EditorState.create({
    doc,
    extensions: [
      basicSetup,
      indentationMarkers({
        highlightActiveBlock: false,
        hideFirstIndent: true,
        markerType: "codeOnly",
        thickness: 2,
        colors: {
          light: 'LightBlue',
          dark: 'DarkBlue',
          activeLight: 'LightGreen',
          activeDark: 'DarkGreen',
        }
      })
    ],
  }),
  parent: document.querySelector('#editor'),
});
```

---
_Source: https://npm.io/package/@replit/codemirror-indentation-markers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._