arve0/markdown-it-implicit-figures

Issue mixing figures with markdown-it-attrs

felixsanz opened this issue · 18 comments

felixsanz commented

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 commented

Ref #13

felixsanz commented

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

arve0 commented

Yes. I haven't looked into it yet.

  • 👍1
arve0 commented

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

felixsanz commented

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 commented

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 commented

@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 commented

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

arve0 commented

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 commented

Wait a minute!

arve0 commented

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

felixsanz commented

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

egardner commented

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 commented

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

  • 👍1
arve0 commented

@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 commented

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!

  • 👍1