Render problem with image inside a link (linked image)

[noraj]

Image inside a link (linked image) is not rendered properly.

Markdown:

[![](https://ctftime.org/static/images/CTFTIME-flat-logo-true.png)](https://ctftime.org/user/16344)

Rendered with hexo render markdown it:

<a href="https://ctftime.org/user/16344">
    <a href="https://ctftime.org/static/images/CTFTIME-flat-logo-true.png" title="">
        <img src="https://ctftime.org/static/images/CTFTIME-flat-logo-true.png" alt="">
    </a>
</a>

Rendered with official markdown previewer:

<a href="https://ctftime.org/user/16344">
    <img src="https://ctftime.org/static/images/CTFTIME-flat-logo-true.png" alt="" title="">
</a>

The fun fact is that markdown-it demo render it well but hexo-renderer-markdown-it not.

[NoahDragon]

Could you please post the plugins you have installed and the theme is using?

[noraj]

• Theme: https://github.com/ppoffice/hexo-theme-hueman
• My website: https://rawsec.ml/
• My website source: https://gitlab.com/noraj/Rawsec-website
• Plugins: https://gitlab.com/noraj/Rawsec-website/blob/master/package.json

[NoahDragon]

I think it may cause by the fancybox. Could you please turn it off, and see if there is a difference?

[noraj]

@NoahDragon . I tested, changed nothing.

[noraj]

I also made an fresh default hexo site with hexo init uninstalled marked and install markdown-it, desactivated the fancybox and the problem is still the same. So this is really a problem of the hexo renderer.

[NoahDragon]

@noraj1337 I'm not sure, because I couldn't reproduce this issue, and I'm using the marked renderer.

[noraj]

@NoahDragon I tried again. The html content generated by markdown it is good. But even with fancybox set to False, there is some javascript dynamically adding a fancybox class and changing the href.

At the end of each page there is

<script src="/js/script.js"></script>

This script contain:

[...]
// Caption
  $('.article-entry').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;

      var alt = this.alt;

      if (alt) $(this).after('<span class="caption">' + alt + '</span>');

      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });

    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });

  if ($.fancybox){
    $('.fancybox').fancybox();
  }
[...]

[noraj]

The ejs template including the script is themes/landscape/layout/_partial/after-footer.ejs.

Where you can see:

[...]
<% if (theme.fancybox){ %>
  <%- css('fancybox/jquery.fancybox') %>
  <%- js('fancybox/jquery.fancybox.pack') %>
<% } %>

<%- js('js/script') %>

So <%- js('js/script') %> is included even if theme.fancybox is false and that script is generating the problem.

[noraj]

Issue open https://github.com/hexojs/hexo-theme-landscape/issues/96

[noraj]

We can close it here.