Colin Stadig Colin Stadig - 3 months ago 17
Markdown Question

Embed <canvas> tag in Laravel Markdown?

Is it possible to embed a

<canvas>
tag in markdown? In particular, I'm hoping to embed canvas tags to display charts from the Chart.js library within a blog entry using the GrahamCampbell/Laravel-Markdown package but it does not seem to work.

Blog Entry Sample:

Lorem ipsum blah blah blah blah blah....

<canvas id="myChart" width="400" height="200"></canvas>

Lorem ipsum blah blah blah blah blah...


My laravel view (post.blade.php) receives the body of the blog post as follows:

<div class="article__body">
{!! Markdown::convertToHtml(e($post->body)) !!}
</div>


Currently the
<canvas>
tag is being posted as text within a
<p></p>
tag

Answer

In short, maybe. It depends on which Markdown implementation you are using.

The rules state:

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

Which, of course, would seem to indicate that it should work. But then there is the pesky issue of the HTML being wrapped in a <p> tag. The next paragraph in the rules state:

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

The issue is that Markdown was created long before the <canvas> tag (during the HTML 4 and XHTML 1 days) and most Markdown implementations do not include that tag in their list of "block-level HTML elements." However, a few implementations may have updated their code in recent years to add the newer HTML 5 block-level tags, and if you use one of those implementations, then you should be able to use a <canvas> tag without it being wrapped in a <p> tag.

You can compare some implementations on Babelmark2, where is appears that about half of the implementations listed will support canvas tags to some degree or another. However, that is a small sampling of all of the implementations out there. A much longer, albeit incomplete, list can be found here.

Comments