codemirror indentation markers

เครื่องหมายการเยื้อง Codemirror

ส่วนขยายของ 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' ) ,
} ) ;