Unusual Behavior with Markdown Images in Doxygen Mainpage

2
votes

For my Doxygen generated documentation, I am planning to reuse my README.md as my main page. This works well for the most part, but it doesn't for Markdown images for some reason. By markdown images, I mean SVGs like:

Travis Build Status

The markdown for such an image is:

[![Travis Build Status](https://travis-ci.org/arnavb/cpp14-project-template.svg?branch=master)](https://travis-ci.org/arnavb/cpp14-project-template)

However, when I try and show this in Doxygen, I get output similar to:

Actual output

As you can see, the images are being interpreted as just links to the respective websites. In order to try and fix this, I decided to temporarily remove the links for the images. However, when I did so, the new output is:

Not much better

Now, while the images are visible:

  1. I can't click on them to access their respective websites.
  2. The images have this weird center alignment that I didn't specify anywhere.

This sucks, since I don't want to have to create a separate document for the Doxygen mainpage, but just use my normal README.md. All of the other Markdown is rendering perfectly other than images. I have no idea why. I am using Doxygen 1.8.8, and here is my full Markdown (Without the links):

# Project Name

![Travis Build Status](https://travis-ci.org/arnavb/cpp14-project-template.svg?branch=master)
![Appveyor Build Status](https://ci.appveyor.com/api/projects/status/qvt257817g7c66m9/branch/master?svg=true)
![Documentation](https://codedocs.xyz/arnavb/cpp14-project-template.svg)
![Codacy Badge](https://api.codacy.com/project/badge/Grade/1c76469660ca411fa1f92ce0ef0c5cd3)

A simple template I plan on using for all of my C++14 projects.

# Test header

## Nested header

### lol

> Blockquote

Here is the generated HTML for the markdown above:

<div class="image">
<img src="https://travis-ci.org/arnavb/cpp14-project-template.svg?branch=master"  alt="Travis Build Status"/>
</div>
 <div class="image">
<img src="https://ci.appveyor.com/api/projects/status/qvt257817g7c66m9/branch/master?svg=true"  alt="Appveyor Build Status"/>
</div>
 <div class="image">
<img src="https://codedocs.xyz/arnavb/cpp14-project-template.svg"  alt="Documentation"/>
</div>
 <div class="image">
<img src="https://api.codacy.com/project/badge/Grade/1c76469660ca411fa1f92ce0ef0c5cd3"  alt="Codacy Badge"/>
</div>
<p>A simple template I plan on using for all of my C++14 projects.</p>
<h1>Test header</h1>
<h2>Nested header</h2>
<h3>lol</h3>
<blockquote class="doxtable">
<p>Blockquote</p>
</blockquote>

As a comparison, here is the markdown with the SVGs as links:

<div class="contents">
<div class="textblock"><p><a href="https://travis-ci.org/arnavb/cpp14-project-template">![Travis Build Status](https://travis-ci.org/arnavb/cpp14-project-template.svg?branch=master)</a> <a href="https://ci.appveyor.com/project/arnavb/cpp14-project-template/branch/master">![Appveyor Build Status](https://ci.appveyor.com/api/projects/status/qvt257817g7c66m9/branch/master?svg=true)</a> <a href="https://codedocs.xyz/arnavb/cpp14-project-template/">![Documentation](https://codedocs.xyz/arnavb/cpp14-project-template.svg)</a> <a href="https://www.codacy.com/app/arnavb/cpp14-project-template?utm_source=github.com&amp;amp;utm_medium=referral&amp;amp;utm_content=arnavb/cpp14-project-template&amp;amp;utm_campaign=Badge_Grade">![Codacy Badge](https://api.codacy.com/project/badge/Grade/1c76469660ca411fa1f92ce0ef0c5cd3)</a></p>
<p>A simple template I plan on using for all of my C++14 projects.</p>
<h1>Test header</h1>
<h2>Nested header</h2>
<h3>lol</h3>
<blockquote class="doxtable">
<p>Blockquote</p>
</blockquote>
</div></div><!-- contents -->

And its Image Markdown:

[![Travis Build Status](https://travis-ci.org/arnavb/cpp14-project-template.svg?branch=master)](https://travis-ci.org/arnavb/cpp14-project-template)
[![Appveyor Build Status](https://ci.appveyor.com/api/projects/status/qvt257817g7c66m9/branch/master?svg=true)](https://ci.appveyor.com/project/arnavb/cpp14-project-template/branch/master)
[![Documentation](https://codedocs.xyz/arnavb/cpp14-project-template.svg)](https://codedocs.xyz/arnavb/cpp14-project-template/)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/1c76469660ca411fa1f92ce0ef0c5cd3)](https://www.codacy.com/app/arnavb/cpp14-project-template?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=arnavb/cpp14-project-template&amp;utm_campaign=Badge_Grade)

What should I change to get these Markdown SVG's to render properly in Doxygen?

1
imagesvgmarkdowndoxygen
@Waylan pasted it in the post. If I change back to the links, then the code is basically the same, other than the images being treated as just links with the image markdown being the link text. – Arnav Borborah
@Waylan Ok, I have added the relevant second output as well, along with its corresponding markdown. – Arnav Borborah
Hmm, looks like either a bug in the Markdown parser or Doxygen is intentionally using non-standard Markdown. – Waylan
@Waylan Well, I should have expected the worst ;( Anyways, do you currently know of any workaround? – Arnav Borborah
I just found this bug report. Looks like the same problem exists when the source is in HTML. Therefore, falling back to raw HTML probably won't be a workaround either. – Waylan

1 Answers

0
votes

As of Doxygen 1.8.18, the original issue seems to be resolved.

As indicated in the comments above, you can use inline html as of 1.8.15 if you are unable to upgrade further.