Mecha CMS

Mecha CMS blog and documentation.

Using HTML Comments as Shortcode

Updated: Sunday, 07 August 2016

The purpose of using HTML comments as shortcode replacement is to generate better fallback layout when plugins related to the applied shortcode are ejected.

A simple example can be found on the page splitter plugin shortcode implementation:

<!-- begin:step -->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<!-- next -->

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

<!-- end:step -->

The purpose of using HTML comments as shortcode replacement is to generate better fallback layout when plugins related to the applied shortcode are ejected.

Example case, you have a grid plugin which allows your users to create column layout in their post content with the help of a shortcode:

{{grid count="5"}}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

{{/grid}}

And then your shortcode parser will produce this HTML element in the output:

<div class="my-awesome-grid" style="column-count:5;" markdown="1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

That’s good. But the problem is that, when your users someday decided to remove your grid plugin while some of their blog posts already have grid shortcode typed everywhere, then their decision to remove your grid plugin will leave a lot of ugly, unused grid shortcode in their post content.

HTML Comments as Shortcode

HTML comments to the rescue. With HTML comments as shortcode replacement, your browsers will automatically hide the unused shortcode for you because that’s how HTML comments work normally:

<!-- grid count="5" -->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<!-- /grid -->

The Parser

This is the way to parse HTML comments as HTML element using Converter::attr() method:

$input = '<!-- grid count="5" -->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<!-- /grid -->';

$data = Converter::attr(
    $input,
    array('<!-- ', ' -->', ' '),
    array('"', '"', '=')
);

var_dump($data); // test it!
Donation and Email Subscription