제목(H1–H6) 사용자 정의 클래스 및 스타일 설정

3.2.0 버전부터 지원, 2.20.0 버전부터 지원합니다.

각 제목(H1–H6)의 className과 style은 editor.titleStyle 설정을 통해 사용자 정의할 수 있습니다.

이 설정에 등록된 className은 문단 요소에 적용될 때만 유효합니다. 이 클래스가 적용된 문단은 목차를 추출할 때 제목 요소로 인식되어 목차 모델에 포함됩니다.

에디터 문단 요소

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>
<div class="se-para-div">...</div>

// synapeditor.config.js
/**
 * Configures the class and style of headings (H1~H6).
 * ex) {
            H1: { style: 'font-size: 24pt; font-weight: bold; color: red;', className: 'h1' },
            H2: { style: 'font-size: 20pt; font-weight: bold; color: orange;', className: 'h2' },
            H3: { style: 'font-size: 18pt; font-weight: bold; color: yellow;', className: 'h3' },
            H4: { style: 'font-size: 16pt; font-weight: bold; color: green;', className: 'h4' },
            H5: { style: 'font-size: 14pt; font-weight: bold; color: blue;', className: 'h5' },
            H6: { style: 'font-size: 11pt; font-weight: bold; color: purple;', className: 'h6' }
        }
 */
{
    'editor.titleStyle': {}
}

'editor.titleStyle': { H1: { style: 'font-size: 24pt; font-weight: bold; color: red;', className: 'h1' }, H2: { style: 'font-size: 20pt; font-weight: bold; color: orange;', className: 'h2' }, H3: { style: 'font-size: 18pt; font-weight: bold; color: yellow;', className: 'h3' }, H4: { style: 'font-size: 16pt; font-weight: bold; color: green;', className: 'h4' }, H5: { style: 'font-size: 14pt; font-weight: bold; color: blue;', className: 'h5' }, H6: { style: 'font-size: 11pt; font-weight: bold; color: purple;', className: 'h6' } }

'editor.titleStyle': {} (기본값)