Style Plugin Demo

JavaScript

Jodit.make('#editor', {
    customStyles: {
        definitions: [
            // Block styles
            { name: 'Document title',   element: 'h2',         classes: ['document-title'] },
            { name: 'Subtitle',         element: 'h3',         classes: ['document-subtitle'] },
            { name: 'Category header',  element: 'p',          classes: ['category-header'] },
            { name: 'Info box',         element: 'p',          classes: ['info-box'] },
            { name: 'Side quote',       element: 'blockquote', classes: ['side-quote'] },
            { name: 'Code (bright)',    element: 'pre',        classes: ['fancy-code', 'fancy-code-bright'] },
            { name: 'Code (dark)',      element: 'pre',        classes: ['fancy-code', 'fancy-code-dark'] },
            // Text styles
            { name: 'Marker',           element: 'span', classes: ['marker'] },
            { name: 'Marker (green)',   element: 'span', classes: ['marker-green'] },
            { name: 'Marker (pink)',    element: 'span', classes: ['marker-pink'] },
            { name: 'Pen (red)',        element: 'span', classes: ['pen-red'] },
            { name: 'Pen (green)',      element: 'span', classes: ['pen-green'] },
            { name: 'Spoiler',          element: 'span', classes: ['spoiler'] },
            { name: 'Typewriter',       element: 'span', classes: ['typewriter'] },
            { name: 'Badge',            element: 'span', classes: ['uppercase-badge'] },
        ]
    }
});