codemirror indentation markers

Codemirror -Eindrückungsmarker

Eine Codemirror -Erweiterung, die Eindringlinge Marker mithilfe einer heuristischen, ähnlich der anderen beliebten Redakteure wie Ace und Monaco verwendet.

Verwendung

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

Optionen

Sie können ein Optionsobjekt für indentationMarkers() mit den folgenden optionalen Eigenschaften bereitstellen:

• highlightActiveBlock

  Booleschen, das bestimmt, ob der aktive Blockmarker unterschiedlich gestaltet ist. Wenn Sie dies auf false festlegen, erhalten Sie eine erhebliche Leistungsverbesserung, da dies bedeutet, dass Marker bei ändert die Auswahl nicht regeneriert werden müssen. Standardmäßig true .

• hideFirstIndent

  Booleschen, der bestimmt, ob Marker in der ersten Spalte weggelassen werden. Standardmäßig false .

• markerType

  Zeichenfolge, die bestimmt, wie weit die Einklingelmarker erstrecken. "fullScope" zeigt an, dass die Markierungen die volle Höhe eines Bereichs abdehnen. Mit der Option "codeOnly" beenden die Eindrückungsmarkierungen in der letzten nicht leeren Linie in einem Bereich. Standardeinstellungen zu "fullScope" .

• thickness

  Ganzzahl, die die Dicke in Pixeln der Eindrückungsmarker bestimmt. Standardmäßig 1 .

• activeThickness

  Ganzzahl, die die Dicke in Pixeln der aktiven Eindrückungsmarker bestimmt. Wenn undefined oder null , wird thickness verwendet. Standardeinstellungen zu undefined .

• colors

  Objekt, das die Farben der Eindrückungsmarker bestimmt.

  • light

    Zeichenfolge, die die Farbe der Markierungen bestimmt, wenn der Editor ein Lichtthema hat. Standardeinstellungen zu #F0F1F2 .

  • dark

    Zeichenfolge, die die Farbe der Markierungen bestimmt, wenn der Editor ein dunkles Thema hat. Standardeinstellungen zu #2B3245 .

  • activeLight

    Zeichenfolge, die die Farbe des aktiven Blockmarkers bestimmt, wenn der Editor ein Lichtthema hat. Gilt nur, wenn highlightActiveBlock true ist. Standardeinstellungen zu #E4E5E6 .

  • activeDark

    Zeichenfolge, die die Farbe des aktiven Blockmarkers bestimmt, wenn der Editor ein dunkles Thema hat. Gilt nur, wenn highlightActiveBlock true ist. Standardeinstellungen zu #3C445C .

Beispiel

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