Custom Tags with Markdown Plugin (Redux)

The new "Update" tag, when used, creates a stylized box like so:

As outlined in my previous Customized Markdown Tags article the first step is to choose the Markdown syntax we want to represent the new style block. Once again I took the non-scientific approach and chose ~^ simply because the upward caret seemed like a fitting choice for "update".

For ease of implementation I'll be editing the code from my previous article so that it will support the "Update" tag in addition to the "Note" and "Warning" tags. In addition, I'll be renaming my custom subroutine to a more generic name, making any future additions a bit easier.

So my previous subroutine named _DoNotesAndWarnings will be renamed to _DoCustomizedBlocks.

sub _DoCustomizedBlocks {
    my $text = shift;
    my $style = "";

    $text =~ s{
            [^`]~([\!\?\^])      # $1 = style class
            (.+?)           # $2 = Block text
            ~[\!\?\^]         # closing syntax
        }{
            if($1 eq '!') {
                $style = "Warning";
            } elsif ($1 eq '?') {
                $style = "Note";
            } elsif ($1 eq '^') {
                $style = "Update";
            }

            "<div class=\"$style\">" .  _RunSpanGamut("<b>$style:</b> \n" . $2)  .  "</div>\n\n";
        }egsx;

    return $text;
}

Then the previous call to _DoNotesAndWarnings() in the _RunBlockGamut() subroutine will also need to be updated to reflect the name change. (The additional call to HashHTMLBlocks() that was added in the previous article will remain.)

$text = _HashHTMLBlocks($text);

$text = _DoCustomizedBlocks($text);
$text = _HashHTMLBlocks($text);

$text = _FormParagraphs($text);

return $text;
}

The last step is to add the new tag's style to the Cascading Style Sheet:

.Update {
    width: 90%;
    margin-left: 5%;
    padding: .2em .3em;
    background:#FFFFCC;
    color: #000000;
    border:solid 1px #DEDEDE;
    font-size: 100%;
}

Finally, to test the new tag use the newly defined syntax in an entry:

~^ This is an Update Block ~^

Which produces:

Enjoy your new custom Markdown tags!