codemirror indentation markers

Penanda indentasi codemirror

Perpanjangan codemirror yang membuat penanda lekukan menggunakan heuristik yang mirip dengan apa yang digunakan editor populer lainnya, seperti Ace dan Monako, yang digunakan.

Penggunaan

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

Opsi

Anda dapat memberikan objek opsi untuk indentationMarkers() dengan properti opsional berikut:

• highlightActiveBlock

  Boolean yang menentukan apakah penanda blok aktif ditata secara berbeda. Menetapkan ini ke false memberikan peningkatan kinerja yang signifikan karena itu berarti bahwa penanda tidak perlu diregenerasi ketika seleksi berubah. Default ke true .

• hideFirstIndent

  Boolean yang menentukan apakah penanda di kolom pertama dihilangkan. Default ke false .

• markerType

  String yang menentukan seberapa jauh penanda indentasi meluas. "fullScope" menunjukkan bahwa penanda memanjang ke bawah setinggi cakupan. Dengan opsi "codeOnly" , penanda indentasi berakhir pada garis nonempty terakhir dalam ruang lingkup. Default ke "fullScope" .

• thickness

  Integer yang menentukan ketebalan dalam piksel penanda indentasi. Default ke 1 .

• activeThickness

  Integer yang menentukan ketebalan dalam piksel dari penanda indentasi aktif. Jika undefined atau null maka thickness akan digunakan. Default untuk undefined .

• colors

  Objek yang menentukan warna penanda lekukan.

  • light

    String yang menentukan warna penanda ketika editor memiliki tema ringan. Default ke #F0F1F2 .

  • dark

    String yang menentukan warna penanda ketika editor memiliki tema gelap. Default ke #2B3245 .

  • activeLight

    String yang menentukan warna penanda blok aktif ketika editor memiliki tema ringan. Hanya berlaku jika highlightActiveBlock adalah true . Default ke #E4E5E6 .

  • activeDark

    String yang menentukan warna penanda blok aktif ketika editor memiliki tema gelap. Hanya berlaku jika highlightActiveBlock adalah true . Default ke #3C445C .

Contoh

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