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