feat(prism): caption

[curbengh]

Feature requested in hexojs/hexo#4460 by @jerryc127

[coveralls]

Coverage increased (+0.004%) to 97.428% when pulling 874e9a4 on curbengh:prism-caption into b34456a on hexojs:master.

[SukkaW]

prismjs just doesn't support caption. Instead of adding caption support, what about simply ignoring it?

[curbengh]

highlight.js doesn't support it either, but Hexo enhance the triple backtick to support it. It's currently available for hexo's highlight.js, this PR simply bring feature parity to prismjs.

[SukkaW]

So should we use other element instead? <figcaption> without <figure> is invalid.

[curbengh]

Using figcaption is quite convenient because existing highlight.js style can be easily adapted since theme usually set it as display: block; to display it properly, not inline like below.

Anyhow, we could try <samp class="caption">caption-text</samp>?

<kbd>, <sub> and <small> are another candidate.

[SukkaW]

A <figure> element; the <figcaption> element must be its first or last child.
https://mdn.io/figcaption

<kbd> shouldn't be an option as well: most css already apply its own style: kbd

<small> is an inline element thus shouldn't be used as well.

My suggestion is add a <div><span>caption</span><a href="">link</a></div> right after <pre> and before <code>:

<pre>
  <div>
    <span>caption</span>
    <a href>link</a>
  </div>
  <code>
    <!-- code -->
  </code>
</pre>

[curbengh]

backtick_code_block.js already wraps in <span>,

// just wrap in <div>?
const codeCaption = caption ? `<div>${caption}</div>` : '';

---

Edit: updated

will update highlight.js in next PR:

hexo-util/lib/highlight.js

Line 49 in b34456a

return `<pre>${figCaption}<code class="${classNames}">${content}</code></pre>`;