画像に必ずリンクを張ることを条件に、リンクと画像のみの段落をfigure
要素になるようフックしてやる。figcaption
要素はリンクに指定可能なtitle
属性を流用する。
[![alt](src.png)](href "caption")
<figure>
<a href="href"><img alt="alt" src="src.png"></a>
<figcaption>caption</figcaption>
</figure>
[![alt](src.png)](href)
<figure>
<a href="href"><img alt="alt" src="src.png"></a>
</figure>
const marked = require("marked");
const markupLink = (href, titleText, text) => {
if (!titleText) {
return `<a href="${href}">${text}</a>`;
}
return `<a href="${href}">${text}</a>
<figcaption>${titleText}</figcaption>`;
};
const markupParagaraph = content => {
if (
/^(<a\s[^>]*>)<img\s[^>]*>(<\/a>)(\n<figcaption>[^<]*<\/figcaption>)?$/.exec(
content
)
) {
return `<figure>
${content}
</figure>
`;
}
return `<p>${content}</p>
`;
};
const renderer = new marked.Renderer();
renderer.link = markupLink;
renderer.paragraph = markupParagaraph;
module.exports = t => marked(t, {
renderer: renderer
});