Vuepress: Imagesize in Markdown

[SlothDevLlama]

Hey there!

I looked up the page on:
https://vuepress.vuejs.org/guide/assets.html
for referencing images. It works properly, but I cannot find any way to resize the image in markdown.

Non of these seem to work:

[Image](./img.png =100x)
[Image](./img.png =100x100)

https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown/41169162

Google does also not provide any information. How does it come that noone wants to resize images via markdown in vuepress?

Thanks for help!

[ulivz]

Markdown syntax doesn't support different set for different pictures.

If you want to do such fine-grained control, you can just write pure HTML:

<img src="./img.png" width="100" height="100">

[SlothDevLlama]

Oh I see, thank you very much!

[exKAZUu]

@TheWhiteLlama You may use https://github.com/tatsy/markdown-it-imsize via https://v1.vuepress.vuejs.org/config/#markdown-extendmarkdown

[oupala]

I tried the solution proposed by @exKAZUu but it does not seem to work.

I install the package locally, I declare it in the VuePress config file, and I add some code in the markdown:

And in the generated html file, I can read:


In fact, the markdown is not interpreted at all...

[exKAZUu]

@oupala I'm now using my solution and it works well. I list up possible things to fix your problem.

• You should use a relative path, e.g., ![Screenshot](./set-language.png =600x600) (<- this is actual code fragment from my markdown)
• You should add markdown-it-imsize as a dependency via yarn add -D markdown-it-imsize or npm install --save-dev markdown-it-imsize
• You should tweak settings by modifying .vuepress/config.js like

module.exports = {
  ...
  markdown: {
    linkify: true,
    extendMarkdown: md => {
      md.use(require('markdown-it-imsize'));
    },
  },
  ...
};

[oupala]

I've seen where I've made an error. I enabled the plugin this way:

  markdown: {
    config: md => {
      md.use(require('markdown-it-deflist'))
      md.use(require('markdown-it-imsize'))
    }
  },

Where I should have enabled it this way:

  markdown: {
    config: md => {
      md.use(require('markdown-it-deflist'))
    },
    extendMarkdown: md => {
      md.use(require('markdown-it-imsize'))
    }
  },

Thanks for your help @exKAZUu, your were helpful.

[zuzhaoye]

Markdown syntax doesn't support different set for different pictures.

If you want to do such fine-grained control, you can just write pure HTML:

<img src="./img.png" width="100" height="100">

Works for me. Thx!