Run, Developer, Run!

Proper way to create alert box in Markdown

Sometimes, especially in documentation, you might want to put text in nice colored box to highlight info, notes, warnings, alerts etc. Like this:

Markdown colored alert box

Problem here, is that there no such tag in markdown. So your only option is to use html or macros. As markdown is not processed inside html tags, following code:

    <div class="note">       
        **NOTE**: Source [here](http://developer.run)
    </div>

Will look like this:

Markdown warning

So you either need make all text inside warning box html, which is ugly and inconsistent, or look for better solution.

Fortunatelly, CSS goes to rescue with element+element selector that allows to style next element. So you put <div class="note"></div> before paragraph you want to make warning box. Following code:

<div class="note"></div>       
**NOTE**: Source [here](http://developer.run)   

Will look as required:

Markdown colored info box

Of couse you will need to add some css:

.note+p { /*next paragraph after <div class="note"></div>*/
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border-radius: 4px;
    color: ;
    background-color: ;
    border-color: ;
}

.note+p:before { /*aditionally prepend `⚠ Note:` to message: */ 
    content: "⚠ Note:";
    font-weight: bold;
    display: block;
}

Contact

nur.repoleved@nur

Follow

Me on Twitter and Github

We have RSS!

© 2017 - Based on template by Rick Waalders