Marked: Support image resizing

[SimonCropp]

is there any support for changing the size of an image. or do we have to drop back to html?

[rayshan]

+1

Something like this would be great:
![](./pic/pic1_50.png =100x20)
Or just 1-dimension then set other to auto:
![](./pic/pic1s.png =250x)
More info:
http://stackoverflow.com/questions/14675913/how-to-change-image-size-markdown

[nbari]

I am using the title to set the size, maybe this can give an idea:

    renderer.image = function(href, title, text) {                                                                                                                                                                       
    if (title) {                                                                                                              
        var size = title.split('x');                                                                                          
        if (size[1]) {                                                                                                        
            size = 'width=' + size[0] + ' height=' + size[1];                                                                 
        } else {                                                                                                              
            size = 'width=' + size[0];                                                                                        
        }                                                                                                                     
    } else {                                                                                                                  
        size = '';                                                                                                            
    }                                                                                                                         
    return ('<img src="' + href + '" alt="' + text + '" ' + size + '>');                                                      
};

So you just can use:

![alt](http://img.png "420x420") 

[SimonCropp]

considering this seems not too hard to implement on my own perhaps this should be documented somewhere and then close this issue??

[nbari]

It is documented here: https://github.com/chjj/marked#overriding-renderer-methods

[SimonCropp]

@nbari yep. but it would be nice to have a page with a list of "useful renderer overrides"

[rayshan]

Thanks @nbari! +1 on "useful renderer overrides" in docs. This could be implemented as an option but there may be too many edge cases to cater to (setting just 1 dimension, icon fonts, etc.)

[AlessandroAnnini]

+1 for the resize of the image!

[nchicong]

+1

[timlevett]

+1

[eugeniop]

+1

[ponyesteves]

+1

[isiahmeadows]

Edit (Feb. 17, 2018): Fix a bug

In my particular case, where I already had to modify the renderer to properly highlight a code block (known issue), I just added another method to do just this.

// Super simple sanitizer
function sanitize(str) {
    return str.replace(/&<"/g, function (m) {
        if (m === "&") return "&amp;"
        if (m === "<") return "&lt;"
        return "&quot;"
    })
}

/**
 * Make Marked support specifying image size in pixels in this format:
 *
 * ![alt](src = x WIDTH "title")
 * ![alt](src = HEIGHT x "title")
 * ![alt](src = HEIGHT x WIDTH "title")
 *
 * Note: whitespace from the equals sign to the title/end of image is all
 * optional. Each of the above examples are equivalent to these below,
 * respectively:
 *
 * ![alt](src =xWIDTH "title")
 * ![alt](src =HEIGHTx "title")
 * ![alt](src =HEIGHTxWIDTH "title")
 *
 * Example usage:
 *
 * ![my image](https://example.com/my-image.png =400x600 "My image")
 */
renderer.image = function (src, title, alt) {
    var exec = /\s=\s*(\d*)\s*x\s*(\d*)\s*$/.exec(src)
    var res = '<img src="' + sanitize(src) + '" alt="' + sanitize(alt)
    if (exec && exec[1]) res += '" height="' + exec[1]
    if (exec && exec[2]) res += '" width="' + exec[2]
    return res + '">'
}

It takes advantage of the fact Marked parses images this way:

![img](http://foo.com/img.png =100x300)
![img](http://foo.com/img.png =100x300 "foo")

<p><img src="http://foo.com/img.png =100x300" alt="img"></p>
<p><img src="http://foo.com/img.png =100x300" alt="img" title="foo"></p>

Do note that you can't flip the two:

![img](http://foo.com/img.png "foo" =100x300)

<p><img src="http://foo.com/img.png &quot;foo&quot; =100x300" alt="img"></p>

---

Although, most definitely +1 @SimonCropp on a "useful renderer overrides" list.

@chjj What do you think of both of these (my idea and the "useful renderer overrides" list)?

[mustafakasap]

+1

[mustafakasap]

Direct HTML coding is not working in MAC VSCode also.

this is what I tried:

[vithar]

https://github.com/chjj/marked/pull/535

[uptownhr]

@isiahmeadows i thought i was going crazy! I know this is months old but your code used href for image! Thanks for the code either way. Works like a charm after you change href to src.

[isiahmeadows]

Oops... Oh well. Sorry about that!

On Fri, Apr 15, 2016, 00:51 James Lee [email protected] wrote:

@isiahmeadows https://github.com/isiahmeadows i thought i was going
crazy! I know this is months old but your code used href for image! Thanks
for the code either way. Works like a charm after you change href to src.

—
You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub
https://github.com/chjj/marked/issues/339#issuecomment-210287159

[joshbruce]

See #956

Closing as complete or stale

[carloslfu]

Is this feature implemented?

[isiahmeadows]

@carloslfu Does my workaround work for you?

[fieldju]

@carloslfu Does my workaround work for you?

@isiahmeadows

import marked from 'marked';

const renderer = new marked.Renderer();

function sanitize(str: string) {
  return str.replace(/&<"/g, function (m) {
    if (m === "&") return "&amp;"
    if (m === "<") return "&lt;"
    return "&quot;"
  })
}

renderer.image = function (src, title, alt) {
  const exec = /\s=\s*(\d*)\s*x\s*(\d*)\s*$/.exec(src)
  let res = '<img src="' + sanitize(src) + '" alt="' + sanitize(alt)
  if (exec && exec[1]) res += '" height="' + exec[1]
  if (exec && exec[2]) res += '" width="' + exec[2]
  return res + '">'
}

marked.setOptions({
    renderer: renderer
  })

log.info(marked.parse(`![img](../assets/image/some-image.png =100x100)`))
log.info(marked.parse('![img](http://foo.com/img.png =100x300)'))

yields

<p>![img](../assets/image/some-image.png =100x100)</p>
<p>![img](<a href="http://foo.com/img.png">http://foo.com/img.png</a> =100x300)</p>

Am I missing something here, because you work around doesn't seem to be working as I expected?

[isiahmeadows]

@fieldju That's a different bug, which has nothing to do with this. Instead, for you, Marked isn't even expanding images in the first place. I'd suggest file another bug (if one doesn't already exist) and include that snippet. Also, be sure to include your Marked version.

(I'm not a contributor to this project, just a user.)

Edit: Mentioned the wrong username. Sorry @carloslfu!

[UziTech]

@fieldju You could use the title but you have to put quotes around the dimensions

import marked from 'marked';

const renderer = new marked.Renderer();

function sanitize(str: string) {
  return str.replace(/&<"/g, function (m) {
    if (m === "&") return "&amp;"
    if (m === "<") return "&lt;"
    return "&quot;"
  })
}

renderer.image = function (src, title, alt) {
  const exec = /=\s*(\d*)\s*x\s*(\d*)\s*$/.exec(title)
  let res = '<img src="' + sanitize(src) + '" alt="' + sanitize(alt)
  if (exec && exec[1]) res += '" height="' + exec[1]
  if (exec && exec[2]) res += '" width="' + exec[2]
  return res + '">'
}

marked.setOptions({
    renderer: renderer
  })

log.info(marked.parse('![img](../assets/image/some-image.png "=100x100")'))
log.info(marked.parse('![img](http://foo.com/img.png "=100x300")'))

// <p><img src="../assets/image/some-image.png" alt="img" height="100" width="100"></p>
// <p><img src="http://foo.com/img.png" alt="img" height="100" width="300"></p>

[isiahmeadows]

@UziTech I've not had that problem, and that code is a snippet taken directly from production (my personal blog), so that seems odd it didn't immediately work for you.

[UziTech]

@isiahmeadows what version of marked are you using? it looks like the link regex changed in v0.4.0 to not allow spaces in the url

demo

[isiahmeadows]

@UziTech Okay, so looks like I'll need to modify things locally, then. I was on 0.3.x when I wrote that. 🙂

[fieldju]

@UziTech @isiahmeadows, I tested things locally and any of the recent versions this work around doesn't work.

I had to go back to a version from 2 years ago to get this to work.

Does anyone know how to re-size images with the current'ish releases?

[UziTech]

@fieldju this works with the current version

[fieldju]

@fieldju this works with the current version

ok, thanks that did work!

[Oxfos]

In my code I added a '*' in the regex (to make the 'x' and what comes after optional):
const exec = /=\s*(\d*)\s*x*\s*(\d*)\s*$/.exec(title)
This allows submitting only one img size dimension (height, if you keep @UziTech code), the other dimension being set automatically to 'auto' which renders the native image size ratios.

[peterpeterparker]

Thx for the solution 👍

I made the following change to the regex to accept units (because I need units), to support only a parameter if needed and to separate values with comma

const exec = /=\s*(\d*(?:px|em|ex|ch|rem|vw|vh|vmin|vmax|%))\s*,*\s*(\d*(?:px|em|ex|ch|rem|vw|vh|vmin|vmax|%))*\s*$/.exec(title);

can be use with

![](notifications.jpg "=100px,20px")
![](notifications.jpg "=100rem,20vh")
![](notifications.jpg "=100px")
![](notifications.jpg)