# Style Plugin Demo

The Style plugin lets you apply predefined CSS classes to block and inline elements. Click the Styles button in the toolbar to see all available styles grouped by type.

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