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

选项

您可以为indentationMarkers()提供以下可选属性的选项对象：

• highlightActiveBlock

  确定主动块标记的样式是否不同的布尔值。将其设置为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' ) ,
} ) ;