Showdown: Hooking into converter.makeHtml() to customize HTML output

[jeud]

Dear everyone

I would like to add some extra attributes or some value into HTML output

Example Markdown

![](img01.png)

Expected HTML Output

<img src="/path/to/images/img01.png>

Where/how can I hook into the conversion process from markdown to HTML?, or must I do this after the HTML output?

Thanks everyone

[obedm503]

what kind of attributes do want to add? some classes?

you could make an extension

showdown.extension('myext', function () {
  return [{
    type: "output",
    filter: function (html, converter, options) {
      //parse the html string
      var liveHtml = document.createElement('div');
      liveHtml.innerHTML = html;
      var images = liveHtml.getElementsByTagName('img');
      var image;
      for(var i = 0; i < images.length; i++) {
        image = images[i];
        image.classList.add('some-css-class');
      }
      return liveHtml.innerHTML;
    }
  }];
});

live fiddle: https://jsfiddle.net/n122569s/

UPDATE:
if you want for the src of the images to not fail with 404 when you parse the html string, you can try using jQuery

showdown.extension('myext', function () {
  return [{
    type: "output",
    filter: function (html, converter, options) {
      //parse the html string
      var liveHtml = $('<div></div>').html(html);
      //var liveHtml = html;
      $('img', liveHtml).each(function(){ 
        var image = $(this);
        image.addClass('some-css-class');
        // or even prepend the src
        image.attr('src', function(index, src) {
          return 'https://obedm503.github.io/bootmark/' + src;
        });
      });
      return liveHtml.html();
    }
  }];
});

fiddle: https://jsfiddle.net/f43s2w9x/

[tivie]

ALso check the documentation regarding extensions https://github.com/showdownjs/showdown/wiki/Extensions

[jeud]

Thanks @obedm503 , @tivie, I've got some ideas what to do next :)