Issue mixing figures with markdown-it-attrs

[felixsanz]

Hi there!

I'm having an issue mixing this plugin with markdown-it-attrs (monopoly! 😝 ).

This works: [![](fig.png)](page.html)

But if you do this: [![](fig.png)](page.html){target="_blank"} , now there is no <figure>. It becomes a plain <p><a><img> :/

I want to do it because i want the linked image to open on a separate window if possible

Thanks!

BTW: i have no idea of how to fix it!

[arve0]

Ref #13

[felixsanz]

@arve0 Oh, i didn't look at closed issues. I confirm is still present at latest version

[arve0]

Yes. I haven't looked into it yet.

[arve0]

Regression added in a7aab96, md.core.ruler.after('inline', 'implicit_figures', implicitFigures); forces plugin to be run before markdown-it-attrs.

[felixsanz]

This is the order that i was using:

const md = new MarkdownIt({
  html: true,
})

md.use(MarkdownItSamp)

md.use(MarkdownItImplicitFigures, {
  figcaption: true,
})

md.use(MarkdownItAttrs)

[arve0]

After arve0/markdown-it-attrs#35 is merged and published, change the order you load the plugins:

const md = new MarkdownIt({
  html: true,
})

md.use(MarkdownItSamp)

md.use(MarkdownItAttrs)

md.use(MarkdownItImplicitFigures, {
  figcaption: true,
})

[felixsanz]

@arve0 Sadly i can't confirm its working! It's still the same result using 0.9.0. It produces <p><a target="_blank"><img> in both orders (attrs->figures or figures->attrs).

[arve0]

Please link to an example which reproduces your error, like in runkit.com or jsfiddle.

[felixsanz]

@arve0 https://runkit.com/591f609e8df21d001207cd14/591f609e8df21d001207cd15

[arve0]

I'm unable to reproduce this locally. Are you sure you have done npm install markdown-it-attr to update package? Can you confirm package version with grep version node_modules/markdown-it-attr/package.json?

[arve0]

Wait a minute!

[arve0]

Please update markdown-it-implicit-figures to v0.6.0.

[arve0]

https://runkit.com/arve0/591f69ece5c5ef0012b1aba7

[felixsanz]

Now it works! Thanks! (sorry for the deleted message)

[egardner]

Hi there! It looks like I'm having the same issue (I can have attributes, or implicit figures, but not both for the same image). The only difference in my use case is that I'm using the markdown-it-loader in Webpack 2. The loader requires the various markdown-it plugins to be passed in during configuration, so I'm not sure if I have much control over the order here. I'm using the latest versions of all packages.

Here's an abbreviated version of the webpack config file:

var webpack = require('webpack')

// Markdown-it Plugins
var footnotes = require('markdown-it-footnote')
var subscript = require('markdown-it-sub');
var superscript = require('markdown-it-sup');
var figures = require('markdown-it-implicit-figures')
var attrs = require('markdown-it-attrs')

module.exports = {

  // various other rules, etc. omitted for brevity 
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'html-loader'
          },
          {
            loader: 'markdown-it-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        'markdown-it': {
          preset: 'default',
          html: true,
          typographer: true,
          use: [
            footnotes,
            superscript,
            subscript,
            attrs,
            [figures, { figcaption: true }]
          ]
        }
      }
    })
  ]
}

When I require a Markdown file into the build pipeline, implicit figures OR attributes work for a given image, but adding say a class to an image means that the figure markup gets dropped.

<!-- This creates an image wrapped in <figure> tags with a <figcaption> -->
![Dick Higgins in Copenhagen, 1962][fig2]

<!-- This outputs an <img> tag with class="foo" -->
![George Maciunas in Dusseldorf][fig3]{.foo}

Any ideas on what might be happening here? I can try to put a small app together to illustrate the use case if this would be helpful.

[arve0]

markdown-it-attrs just had a major rewrite, so the bug may have been reintroduced. I'll have to investigate.

[arve0]

@egardner Thanks for reporting. Should be fixed in markdown-it-attrs v1.1.1. Make sure you have the correct version installed with npm ls.

[egardner]

Perfect, I updated markdown-it-attrs from v1.1.0 to v1.1.1 and everything works correctly now. Thanks for creating these libraries – having support for basic scholarly features in Markdown is enormously useful!