codemirror indentation markers

Codemirror intentation 마커

Ace 및 Monaco와 같은 다른 인기있는 편집자가 사용하는 것과 유사한 휴리스틱을 사용하여 들여 쓰기 마커를 렌더링하는 Codemirror 확장.

용법

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