Markup

This module provides base classes for styling common markup elements like <h1>, <blockquote> or <p>.

Disable markup module

The markup module can be disabled providing an object in the modules field of your configuration with the markup key setted to false:

export default {
    modules: {
        markup: false,
    },
    // ...other configuration
};

Customize markup elements

Use the styles field of your theme configuration to style markup elements. As an example, you can customize link elements (<a>) just adding your custom styles in the styles.a section of your configuration:

export default {
    // ...other configuration
    styles: {
        a: {
            color: "secondary",
            textDecoration: "underline",
        },
        // ...other styles
    },
};

Using markup styles

Headings

This module includes styles for your heading tags, from <h1> through <h6>.

<h1>h1. Siimple heading</h1>
<h2>h2. Siimple heading</h2>
<h3>h3. Siimple heading</h3>
<h4>h4. Siimple heading</h4>
<h5>h5. Siimple heading</h5>
<h6>h6. Siimple heading</h6>

Headings can be customized using styles.h1 through styles.h6. You can customize all the common properties of the headings using the text.heading field of your theme configuration:

export default {
    // ...other configuration
    text: {
        // The following styles will be applied to all heading tags,
        // from <h1> through <h6>
        heading: {
            marginBottom: "2rem",
        },
    },
    styles: {
        // Customize individual heading tags
        h1: {
            marginTop: "0px",
        },
    },
}

Paragraph

This module includes styles for your paragraph tags (<p>):

<p class="has-mb-none">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.
</p>

Paragraphs can be customized using the styles.p field of your theme configuration:

export default {
    // ...other configuration
    styles: {
        p: {
            marginBottom: "1.5rem",
        },
    },
};

Blockquotes

This module includes styles for your quote tags (<blockquote>):

<blockquote>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.
</blockquote>

Blockquotes can be customized using the styles.blockquote field of your theme configuration:

export default {
    // ...other configuration
    styles: {
        blockquote: {
            marginBottom: "1.5rem",
        },
    },
};

Inline links

This module includes styles for your inline link tags (<a>).

You can style your <a href="">link</a> elements.

Inline links can be customized using the styles.a field of your theme configuration:

export default {
    // ...other configuration
    styles: {
        a: {
            color: "primary",
            textTransform: "underline",
        },
        // ...other styles
    },
};

Small text

This module adds styles for your <small> tags:

You can style your <small>small text</small> elements.

Small text tags can be customized using the styles.small field of your theme configuration:

export default {
    // ...other configuration
    styles: {
        small: {
            color: "muted",
            fontSize: "0",
        },
        // ...other styles
    },
};

Inline code

This module includes styles for your inline code tags (<code>):

You can style your <code>inline code</code> elements.

Inline code tags can be customized using the styles.code field of your theme configuration:

export default {
    // ...other configuration
    styles: {
        code: {
            color: "secondary",
        },
        // ...other styles
    },
};

Horizontal rule

This module includes styles for your horizontal rule tags (<hr>):

<hr>

Horizontal rule tags can be customized using the styles.hr field of your theme configuration:

export default {
    // ...other configuration
    styles: {
        hr: {
            marginBottom: "1rem",
            marginTop: "1rem",
        },
    },
};

Tables

This module includes styles for your table tags (<table>) and all of its child tags (<tr>, <td>, <th>, <thead> and <tbody>).

<table>
    ...
</table>

Table tags and its child subtags can be customized using the styles.table field of your theme configuration.

export default {
    styles: {
        table: {
            "& th, & td": {
                backgroundColor: "white",
                padding: "1rem",
            },
        },
    },
    // ...other configuration
};