Markdown Image Styling

[dixonge]

I am unable to specify an image width in Markdown. I tried the solution proposed here:

https://github.com/11ty/eleventy/issues/490

I installed both of these plugins:

markdown-it-attrs

markdown-it-imsize

I attempted to enable them by inserting the code they suggested into eleventy.config.js - I then appended a size something like this:

![description](/images/image.jpg){width="500"}
![description](/images/image.jpg =500)

I tried several variations of this. The markdown-it-attrs plugin does not seem to have any examples of image sizing. The markdown-it-imsize plugin does. None of them worked, they seem to be unparsed, adding the size as plain text after the image.

I assume I'm just doing something wrong, but I have no idea what that might be...

Environment Linux Mint 19.2 eleventy 0.8.3 skeleventy starter package node 10.15.3 npm 6.9.0

[marcuse]

I've made a minimal project using markdown-it-attrs to check this, and it seems to generate output with the correct attribute.

https://github.com/marcuse/11ty-width-test

[dixonge]

@marcuse the image in your sample is broken :(

I tried that syntax, adding {width=500} to the end of the markdown image but it still just shows as text and isn't being interpreted/parsed by the plugin. Looking at this further, markdown-it-attrs is aimed specifically at CSS classes, not image attributes. There are NO image width/height examples given.

[dixonge]

Also, I am not sure I am putting the javascript for this plugin in the right place. Here is how I am currently inserting it into the top of eleventy.config.js:

const htmlmin = require("html-minifier")

module.exports = eleventyConfig => {

    var md = require('markdown-it')();
    var markdownItAttrs = require('markdown-it-attrs');

    md.use(markdownItAttrs, {
      // optional, these are default options
      leftDelimiter: '{',
      rightDelimiter: '}',
      allowedAttributes: []  // empty array = all attributes are allowed
    });

    var src = '# header {.green #id}\nsome text {with=attrs and="attrs with space"}';
    var res = md.render(src);

    console.log(res);

    // Add a readable date formatter filter to Nunjucks
    eleventyConfig.addFilter("dateDisplay", require("./filters/dates.js"))

    // Add a HTML timestamp formatter filter to Nunjucks
    eleventyConfig.addFilter("htmlDateDisplay", require("./filters/timestamp.js"))

    // Minify our HTML
    eleventyConfig.addTransform("htmlmin", (content, outputPath) => {
        if( outputPath.endsWith(".html") ) {
            let minified = htmlmin.minify(content, {
                useShortDoctype: true,
                removeComments: true,
                collapseWhitespace: true
            });
            return minified;
        }
        return content;
    })

    // Collections
    eleventyConfig.addCollection('blog', collection => {
        return collection.getFilteredByTag('blog').reverse()
    })

    // Layout aliases
    eleventyConfig.addLayoutAlias('default', 'layouts/default.njk')
    eleventyConfig.addLayoutAlias('post', 'layouts/post.njk')

    // Include our static assets
    eleventyConfig.addPassthroughCopy("css")
    eleventyConfig.addPassthroughCopy("javascript")
    eleventyConfig.addPassthroughCopy("images")

    return {
        templateFormats: ["md", "njk"],
        markdownTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        passthroughFileCopy: true,

        dir: {
            input: 'site',
            output: 'dist',
            includes: 'includes',
            data: 'globals'
        }
    }

}

[marcuse]

@marcuse the image in your sample is broken :(

Yes, I didn't include any real image since that is irrelevant to this test. If you run the eleventy build and look at the results in _site/image-with-width/index.html, the width attribute is set:

<p><img src="pic.png" alt="I have a width" width="500"></p>

[marcuse]

Also, I am not sure I am putting the javascript for this plugin in the right place.

Aah, I think I see the problem. You have to tell eleventy to use your instance of markdown-it when you've set it up. Add this somewhere after the md.use():

eleventyConfig.setLibrary('md', md);

[dixonge]

yep, that did the trick! Thanks!