Reference-Style Image/Link Attributes (Like MultiMarkdown 3+)

Question

Reference-Style Image/Link Attributes (Like MultiMarkdown 3+)

Closed this issue 9 years ago · 6 comments

How difficult would it be to get markdown-it-implicit-figuresto parse image/link attributes like MultiMarkdown does? (You're already half-way there with this whole project :D)

Here's a screenshot of some example Markdown parsing:

Specifically, consider this Markdown:

![Alternate text][1]

[1]: image_link "Title" width=100px

parsing as I've suggested would lead to this result

<figure>
    <img src="image_link" alt="Alternate text" title="Title" width="100px">
    <figcaption>Alternate text</figcaption>
</figure>

For a stretch goal, how about allowing any image/link reference with any random attribute?

Consider this Markdown, with the more generic inline style attribute, with the width parameter and value declared:

![Alternate text][1]

[1]: image_link "Title" style="width: 100px;"

parse:

<figure>
    <img src="image_link" alt="Alternate text" title="Title" style="width: 100px;">
    <figcaption>Alternate text</figcaption>
</figure>

Or, even a class or id attribute in the Markdown:

![Alternate text][1]

[1]: image_link "Title" style="width: 100px;" class="small" id="pic"

parse:

<figure>
    <img src="image_link" alt="Alternate text" title="Title" style="width: 100px;" class="small" id="pic">
    <figcaption>Alternate text</figcaption>
</figure>

Is this too difficult to achieve?

Answer 1 · 2015-12-21T17:05:46.000Z

You can use attrs or decorate for that. Then transform your markdown with a regex to the new syntax.

Answer 2 · 2015-12-21T17:08:06.000Z

Your's is so close to the MultiMarkdown 3 spec already though! :)

Answer 3 · 2015-12-21T17:10:59.000Z

Well, I'm not trying to ape MultiMarkdown, I'm aping pandoc.

Though, it should be relative easy to implement, if you make an effort. I will accept PRs.

Answer 4 · 2015-12-21T17:28:21.000Z

Something like this, but more generic maybe? https://github.com/tatsy/markdown-it-imsize/blob/master/dist/markdown-it-imsize.js

Answer 5 · 2015-12-23T07:02:45.000Z

I'm not a JavaScript guy, so I don't really know :(

We basically need to identify that any string of text following the [optional] image title title should be passed unaffected to the resultant <img> within the <figure>, right?

Not sure how to do that :/

Answer 6 · 2015-12-23T11:34:15.000Z

Then maybe do a regex plugin? Or hire someone.

Closing, as this is outside the scope of markdown-it-implicit-figures.