Custom Class and Style Settings for Headings (H1–H6)

Release 3.2.0 and above, Release 2.20.0 and above.

You can customize the className and style of each heading (H1–H6) through the editor.titleStyle setting.

The className registered in this setting is valid only when applied to a paragraph element, and that paragraph is recognized as a heading element during Table of Contents extraction and included in the Table of Contents model.

Editor Paragraph Elements

<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': {<br> H1: { style: 'font-size: 24pt; font-weight: bold; color: red;', className: 'h1' },<br> H2: { style: 'font-size: 20pt; font-weight: bold; color: orange;', className: 'h2' },<br> H3: { style: 'font-size: 18pt; font-weight: bold; color: yellow;', className: 'h3' },<br> H4: { style: 'font-size: 16pt; font-weight: bold; color: green;', className: 'h4' },<br> H5: { style: 'font-size: 14pt; font-weight: bold; color: blue;', className: 'h5' },<br> H6: { style: 'font-size: 11pt; font-weight: bold; color: purple;', className: 'h6' }<br> }