커스텀 글머리를 설정 할 수 있습니다.

커스텀 글머리 설정

'editor.list.customList'를 이용하여 커스텀 글머리를 설정할 수 있습니다.

  • format
    • bullet
      • 글머리 기호
      • levelText를 이용하여 원하는 기호를 직접 설정 가능
    • 그 외
      • 글머리 번호
      • format에 지정된 번호 스타일대로 글머리가 표현됨
      • levelText는 적용되지 않음
  • levelText
    • 글머리 기호 정의
    • format: 'bullet' 일 때만 동작
/**
 * 9레벨 까지 설정이 가능합니다.
 * 9레벨 이후로 설정된 글머리는 표현되지 않습니다.
 * 빈 배열 일 때는 커스텀 글머리 기능이 동작하지 않습니다.
 */
{
	'editor.list.customList': [
		{ format: 'bullet', levelText: '□' }, // 1레벨: 기호 글머리 (사각형)
		{ format: 'decimal' }			      // 2레벨: 숫자 글머리 (1., 2., 3. …)
	]
}

글머리 번호 종류

format에 적용할 수 있는 글머리 번호 종류는 아래와 같습니다.

종류결과
decimal

1.

decimalEnclosedCircle

①

decimalParentheses(1)

upperLetter

A.

lowerLetter

a.

upperRoman

I.

lowerRoman

i.

ganada

가.

chosung

ㄱ.

적용 예시


'editor.list.customList': [
	{ format: 'decimal' },
	{ format: 'bullet', levelText: '□' },
	{ format: 'bullet', levelText: '♧' },
	{ format: 'decimalEnclosedCircle' }
]



 

커스텀 글머리에 스타일을 적용할 수 있습니다.

config 설정에 runStyle 속성을 추가하면 글머리에 원하는 스타일을 추가할 수 있습니다.

커스컴 글머리 지원 스타일 속성

속성명설명
color글자 색상
fontSize글자 크기
underline밑줄
italic기울임
strike취소선
fontWeight글자 굵기
backgroundColor배경색


적용 예시


'editor.list.customList': [
        {
            format: 'bullet',
            levelText: '★',
            runStyle: {
                color: { r: 255, g: 0, b: 0 },
                fontSize: { value: 12, unit: 'pt' },
                underline: true,
                italic: true,
                strike: true,
                fontWeight: 700,
                backgroundColor: { r: 135, g: 206, b: 250 }
            }
        },
        {
            format: 'bullet',
            levelText: '＠',
            runStyle: {
                color: { r: 255, g: 123, b: 45 },
                fontSize: { value: 24, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: { r: 235, g: 55, b: 12 }
            }
        },
        {
            format: 'bullet',
            levelText: '#',
            runStyle: {
                color: { r: 45, g: 255, b: 45 },
                fontSize: { value: 32, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: { r: 205, g: 126, b: 36 }
            }
        },
        {
            format: 'bullet',
            levelText: '♤',
            runStyle: {
                color: { r: 123, g: 255, b: 45 },
                fontSize: { value: 40, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: { r: 55, g: 12, b: 235 }
            }
        },
    ]





관련정보