codemirror indentation markers

Marcadores de sangría de CodeMirror

Una extensión de CodeMirror que hace marcadores de sangría utilizando una heurística similar a lo que usan otros editores populares, como Ace y Monaco.

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

Opción

Puede proporcionar un objeto de opciones a indentationMarkers() con las siguientes propiedades opcionales:

• highlightActiveBlock

  Booleano que determina si el marcador de bloque activo tiene el estilo de manera diferente. Establecer esto en false proporciona una mejora significativa del rendimiento porque significa que los marcadores no necesitan ser regenerados cuando cambia la selección. El valor predeterminado es true .

• hideFirstIndent

  Booleano que determina si se omiten los marcadores en la primera columna. El valor predeterminado es false .

• markerType

  Cadena que determina hasta qué punto se extienden los marcadores de sangría. "fullScope" indica que los marcadores se extienden por toda la altura de un alcance. Con la opción "codeOnly" , los marcadores de sangría terminan en la última línea no vacía en un alcance. El valor predeterminado es "fullScope" .

• thickness

  Entero que determina el grosor en los píxeles de los marcadores de sangría. Predeterminado es 1 .

• activeThickness

  Entero que determina el grosor en los píxeles de los marcadores de sangría activa. Si es undefined o null , se utilizará thickness . El valor predeterminado es undefined .

• colors

  Objeto que determina los colores de los marcadores de sangría.

  • light

    Cadena que determina el color de los marcadores cuando el editor tiene un tema ligero. El valor predeterminado es #F0F1F2 .

  • dark

    Cadena que determina el color de los marcadores cuando el editor tiene un tema oscuro. El valor predeterminado es #2B3245 .

  • activeLight

    Cadena que determina el color del marcador de bloque activo cuando el editor tiene un tema ligero. Solo se aplica si highlightActiveBlock es true . El valor predeterminado es #E4E5E6 .

  • activeDark

    Cadena que determina el color del marcador de bloque activo cuando el editor tiene un tema oscuro. Solo se aplica si highlightActiveBlock es true . El valor predeterminado es #3C445C .

Ejemplo

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