添加图片到Doxygen

huangapple go评论59阅读模式
英文:

Adding images to Doxygen

问题

我正在尝试将图像添加到Doxygen的.md文件中。相当容易。
它需要有标题。相当容易。
它需要左对齐。哦。这是我遇到困难的地方。
我可以添加标题或左对齐图像,但我尝试的所有方法都无法同时实现两者。

我尝试过的方法如下:

添加图片到Doxygen
给我一个居中的标题

左对齐但没有标题

左对齐,带工具提示,仍然没有标题。

最后,这个方法给我一个左对齐的图像,标题左对齐,但我真正想要的是标题居中于图像,然后将整个内容左对齐。

Simulation-Client.png

Simulation Client Architecture

确实应该有一种更简单的方法来实现我想要的。请注意,我不是特别擅长HTML,所以不希望使用CSS解决方案。

英文:

I am trying to add an image to a doxygen .md file. Easy enough.<Br />
It needs to have a caption. Easy enough.<Br />
It needs to be left aligned. Err. This is where I am struggling.<Br />
I can add a caption or left align the image but nothing I have tried allows me to do both.
What I have tried <Br />

![Caption](my_image.png &quot;Caption&quot;)

Gives me a caption but centered

 &lt;img src=&quot;my-image.jpg&quot; align=&quot;left&quot;&gt;
 &lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;

Left aligned but no caption

 &lt;img src=&quot;my-image.jpg&quot; align=&quot;left&quot; title=&quot;Caption&quot;&gt;
 &lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;

Left aligned, Tooltip, still no caption.

And finally this one gives me a left aligned image with the caption left aligned, but what I really want is the caption centered on the image which are then the whole thing left aligned

&lt;div class=&quot;image&quot;&gt;
    &lt;img src=&quot;Simulation-Client.png&quot; alt=&quot;Simulation-Client.png&quot; align=&quot;left&quot;&gt;
    &lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;caption&quot; align=&quot;left&quot;&gt;Simulation Client Architecture&lt;/div&gt;
&lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;
&lt;Br /&gt;

There really must be an easier way to do what I want.<Br />
Note I'm not particularly skilled in html so I don't want a CSS solution.

答案1

得分: 1

这似乎是Doxygen 1.9.6中的一个错误。当使用来自主题InputIMAGE_PATH时,会生成不同的HTML标记。以下是仅用于测试的*.md文件。你可以在这个Markdown代码中找到使用表格的解决方案(感谢Bilal Gultekin:https://stackoverflow.com/a/45191209/1981088)。

这是一个常规段落。

![测试图像1](images/help-info_helpware_artLogo.png "工具提示标题说明 1")

![测试图像2][2]

这是另一个常规段落。

## HTMLHelp
### 有关Microsoft HTMLHelp的信息

HTMLHelp由Microsoft开发,用于创建基于HTML(Hypertext Markup Language)的本地存储技术文档和应用程序软件帮助的帮助系统。HTMLHelp Workshop用于将内容编译成具有CHM文件扩展名的压缩帮助文件。

这是一个常规段落。

| ![HTMLHelp Workshop - 设置默认页面的步骤][1] | 
|:--:| 
| *HTMLHelp Workshop - 设置默认页面的步骤* |

这是另一个常规段落。

IMAGE_PATH未被使用

然而,这种方法的缺点是需要手动复制图像文件到Doxygen的HTML输出目标文件夹中。这会导致(默认为左对齐):

添加图片到Doxygen

生成的HTML如下:

&lt;p&gt;这是一个常规段落。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;images/help-info_helpware_artLogo.png&quot; alt=&quot;测试图像1&quot; title=&quot;工具提示标题说明 1&quot; class=&quot;inline&quot;/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;images/help-info_helpware_artLogo.png&quot; alt=&quot;测试图像2&quot; title=&quot;工具提示标题说明 2&quot; class=&quot;inline&quot;/&gt;&lt;/p&gt;
&lt;p&gt;这是另一个常规段落。&lt;/p&gt;

使用IMAGE_PATH

添加图片到Doxygen

生成的HTML如下:

&lt;p&gt;这是一个常规段落。&lt;/p&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;help-info_helpware_artLogo.png&quot; alt=&quot;&quot;/&gt;
&lt;div class=&quot;caption&quot;&gt;
工具提示标题说明 1&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;help-info_helpware_artLogo.png&quot; alt=&quot;&quot;/&gt;
&lt;div class=&quot;caption&quot;&gt;
测试图像 2&lt;/div&gt;&lt;/div&gt;
    &lt;p&gt;这是另一个常规段落。&lt;/p&gt;

你需要决定如何满足你的需求。我的图像位于Doxygen目标文件夹的子文件夹images中。

英文:

This seems to be a bug in Doxygen 1.9.6. Different HTML tags are generated when IMAGE_PATH from topic Input is used. Below is my *.md file for test case only. You'll find a solution using a table in this markdown code (Credits to Bilal Gultekin: https://stackoverflow.com/a/45191209/1981088).

This is a regular paragraph.

![test for image 1](images/help-info_helpware_artLogo.png &quot;Tool Tip Title Caption 1&quot;)

![test for image 2][2]

This is another regular paragraph.

## HTMLHelp
### Information about Microsoft HTMLHelp

HTMLHelp, developed by Microsoft, is a help system used to create locally stored technical documentation and help for application software based on Hypertext Markup Language (HTML). The HTMLHelp Workshop is used to compile the content into a compressed help file with the file extension CHM.

This is a regular paragraph.

| ![HTMLHelp Workshop - steps to set default page][1] | 
|:--:| 
| *HTMLHelp Workshop - steps to set default page* |

This is another regular paragraph.

IMAGE_PATH NOT in use

However, this has the disadvantage that the image files have to be copied manually into the target folder of the HTML output from Doxygen. This is resulting in (left align by default):

添加图片到Doxygen

from this generated HTML:

&lt;p&gt;This is a regular paragraph.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;images/help-info_helpware_artLogo.png&quot; alt=&quot;test for image 1&quot; title=&quot;Tool Tip Title Caption 1&quot; class=&quot;inline&quot;/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;images/help-info_helpware_artLogo.png&quot; alt=&quot;test for image 2&quot; title=&quot;Tool Tip Title Caption 2&quot; class=&quot;inline&quot;/&gt;&lt;/p&gt;
&lt;p&gt;This is another regular paragraph.&lt;/p&gt;

IMAGE_PATH in use

添加图片到Doxygen

from this generated HTML:

&lt;p&gt;This is a regular paragraph.&lt;/p&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;help-info_helpware_artLogo.png&quot; alt=&quot;&quot;/&gt;
&lt;div class=&quot;caption&quot;&gt;
Tool Tip Title Caption 1&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;help-info_helpware_artLogo.png&quot; alt=&quot;&quot;/&gt;
&lt;div class=&quot;caption&quot;&gt;
test for image 2&lt;/div&gt;&lt;/div&gt;
    &lt;p&gt;This is another regular paragraph.&lt;/p&gt;

You'll need to decide what you want to try for your needs. My images reside in a subfolder images of Doxygens's destination folder.

huangapple
  • 本文由 发表于 2023年2月23日 20:34:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75544911.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定