codemirror indentation markers

Кодовые маркеры вдавливания

Расширение Codemirror, которое отдает маркеры отступления, используя эвристику, похожую на то, что другие популярные редакторы, такие как Ace и Monaco, используют.

Использование

 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 для indentationMarkers() со следующими дополнительными свойствами:

• highlightActiveBlock

  Boolean, который определяет, стилизуется ли активный маркер блока по -разному. Установка этого на false обеспечивает значительное повышение производительности, потому что это означает, что маркеры не должны регенерировать при изменении отбора. По умолчанию к true .

• hideFirstIndent

  Логический, который определяет, опускаются ли маркеры в первом столбце. По умолчанию false .

• markerType

  Строка, которая определяет, насколько далеко протяжены маркеры отступления. "fullScope" указывает, что маркеры простираются по всей высоте прицела. С опцией "codeOnly" маркеры отступления заканчиваются по последней непустым линии в области. По умолчанию "fullScope" .

• thickness

  Целое число, которое определяет толщину в пикселях маркеров отступления. По умолчанию 1 .

• activeThickness

  Целое число, которое определяет толщину в пикселях активных маркеров отступления. Если undefined или null тогда будет использоваться thickness . По умолчанию undefined .

• colors

  Объект, который определяет цвета маркеров отступления.

  • light

    Строка, которая определяет цвет маркеров, когда у редактора есть легкая тема. По умолчанию #F0F1F2 .

  • dark

    Строка, которая определяет цвет маркеров, когда у редактора есть темная тема. По умолчанию #2B3245 .

  • activeLight

    Строка, которая определяет цвет активного маркера блока, когда у редактора есть легкая тема. Применяется только в том случае, если highlightActiveBlock true . По умолчанию #E4E5E6 .

  • activeDark

    Строка, которая определяет цвет активного маркера блока, когда у редактора есть темная тема. Применяется только в том случае, если highlightActiveBlock true . По умолчанию #3C445C .

Пример

 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' ) ,
} ) ;