codemirror indentation markers

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