codemirror indentation markers

Marcadores de indentação Codemirror

Uma extensão de codemirror que renderiza marcadores de indentação usando uma heurística semelhante ao que outros editores populares, como ACE e Mônaco, usam.

Uso

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

Opções

Você pode fornecer um objeto de opções para indentationMarkers() com as seguintes propriedades opcionais:

• highlightActiveBlock

  Booleano que determina se o marcador de bloco ativo é de maneira diferente. Definir isso como false fornece um aprimoramento significativo do desempenho porque significa que os marcadores não precisam ser regenerados quando a seleção mudar. Padrões para true .

• hideFirstIndent

  Booleano que determina se os marcadores na primeira coluna são omitidos. Padrões para false .

• markerType

  String que determina até que ponto os marcadores de recuo se estendem. "fullScope" indica que os marcadores se estendem pela altura total de um escopo. Com a opção "codeOnly" , os marcadores de indentação terminam na última linha não vazia em um escopo. Padrões para "fullScope" .

• thickness

  Número inteiro que determina a espessura em pixels dos marcadores de indentação. Padrões para 1 .

• activeThickness

  Número inteiro que determina a espessura em pixels dos marcadores de indentação ativa. Se undefined ou null , thickness será usada. Padrão para undefined .

• colors

  Objeto que determina as cores dos marcadores de recuo.

  • light

    String que determina a cor dos marcadores quando o editor tem um tema leve. Padrões para #F0F1F2 .

  • dark

    String que determina a cor dos marcadores quando o editor tem um tema sombrio. Padrões para #2B3245 .

  • activeLight

    String que determina a cor do marcador de bloco ativo quando o editor tem um tema leve. Somente se aplica se highlightActiveBlock for true . Padrão para #E4E5E6 .

  • activeDark

    String que determina a cor do marcador de bloco ativo quando o editor tem um tema sombrio. Somente se aplica se highlightActiveBlock for true . Padrão para #3C445C .

Exemplo

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