Admonitions renders styled note/alert/warning boxes for content using an easy to use syntax:

# Admonitions

<div class="admonition NOTE"><h5>Note</h5>
   <div>This is an interactive <strong>note</strong> with a <a href="https://markdownmonster.west-wind.com">link home</a></div>


</div>



<div class="admonition TIP"><h5>Tip</h5>
   <div>This is a <strong>tip</strong>. Contained content can contain it's own markdown content</div>


</div>

<div class="admonition INFO"><h5>Info</h5>
   <div>Some simple information.</p>
<p>This has multiple paragraphs of text.</div>



</div>

<div class="admonition WARNING"><h5>Warning</h5>
   <div>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href="#">this <code>api</code></a>.</div>


</div>

<div class="admonition DANGER"><h5>Danger</h5>
   <div>This is Dangerous!</div>


</div>

The above renders like this (styling will vary depending on the active Preview Theme):

Enabling Admonitions

The Admonitions Render Extension is enabled by default using the Tools → Settings → Use Admonitions options in the configuration editor, via this setting in `MarkdownMonster.:

{
    Markdown:  {
        "UseAdmonitions": true
    }
}

Styling

Admonitions styling is handled via the Preview Theming styles in Theme.css for each preview theme.

The relevant sections in Theme.css are:

/* DocFx Styles*/
.CAUTION, .IMPORTANT, .INFO, .INFORMATION, .ERROR, .TIP, .NOTE, .WARNING, .DANGER {
    padding: 0.1px 20px;
    margin: 15px 0;
    border-radius: 4px;
}

.CAUTION, .ERROR, .DANGER {
    border-left: 4px solid #cf222e;
}

    .CAUTION > h5, .ERROR > h5, .DANGER > h5 {
        color: #cf222e;
    }

    .CAUTION h5:before, .ERROR h5:before, .DANGER h5:before {
        content: "\f06a";
        font-family: 'Font Awesome 6 Pro';
        font-weight: 400;
        padding-right: 6px;
    }

.IMPORTANT {
    border-left: 4px solid #8250df;
}

    .IMPORTANT > h5 {
        color: #8250df
    }

    .IMPORTANT h5:before {
        content: "\f4a5";
        font-family: 'Font Awesome 6 Pro';
        font-weight: 400;
        padding-right: 6px;
    }

.WARNING {
    border-left: 4px solid #bf8700;
}

    .WARNING > h5 {
        color: #9a6700;
    }

    .WARNING h5:before {
        content: "\f071";
        font-family: 'Font Awesome 6 Pro';
        font-weight: 400;
        padding-right: 6px;
    }

.TIP {
    border-left: 4px solid #1a7f37;
}

    .TIP > h5 {
        color: #1a7f37;
    }

    .TIP h5:before {
        content: "\f0eb";
        font-family: 'Font Awesome 6 Pro';
        font-weight: 400;
        padding-right: 6px;
    }

.NOTE {
    border-left: 4px solid #0969da;
}

    .NOTE > h5 {
        color: #0969da;
    }

    .NOTE h5:before {
        content: "\f05a";
        font-family: 'Font Awesome 6 Pro';
        font-weight: 400;
        padding-right: 6px;
    }

.INFO h5, .INFORMATION h5 {
    color: #555;
}

.INFO, .INFORMATION {
    border-left: 4px solid #999;
}

    .INFO h5:before, .INFORMATION h5:before {
        content: "\f05a";
        font-family: 'Font Awesome 6 Pro';
        font-weight: 400;
        padding-right: 6px;
    }

You can customize these styles as needed.

Create a new Theme for Changes

Remember that if you make changes to any theme to save the theme in a new folder as existing Themes are updated with each Markdown Monster update.

More info...