如何将 img 添加到已设置样式的 html 代码块中答案

【问题标题】：How to add an img to a html code block that is styled already如何将 img 添加到已设置样式的 html 代码块中
【发布时间】：2019-07-11 13:28:41
【问题描述】：

从 Pimento Web 回答对我有用的内容：“将您的 pre_code 放在相对位置的 div 中。将您的图像放在 pre_code 之后并以绝对位置定位它”

所以我试图在 markdown 生成的代码块的右上角添加一个小图像（使用 ReadTheDocs 样式）。我只是要编写一个脚本，将适当的图像放入 html 中的正确位置。但是一个问题是我不知道如何将图像放在已经样式化的代码块的位置。有没有简单的方法可以做到这一点，还是我打开一大罐蠕虫？为了学习，我们将不胜感激！

<pre>
<code class ="JSON hljs"><img class="hiddenCopy" style ="position: absolute; top: 0; right: 0;" src="../img/upload-script.png"/>var j =0;
</code>
</pre>

通常我会这样做：

<pre>
<code style="position: relative;"><img class="hiddenCopy" style ="position: absolute; top: 0; right: 0;" src="../img/upload-script.png"/>var j =<span class="hljs-number">0</span>;
</code>
</pre>

并且只是让代码与位置相关。但我不想修改代码块的 css，因为它引用了外部网站。 Location of where I want it

【问题讨论】：

把你的 pre_code 放在一个相对的 div 位置。在 pre_code 之后放置图像并将其定位为绝对位置...
很抱歉问这个问题，但是什么是“markdown-themeable”？有许多脚本名称相似，所以我无法确定您使用的是哪一个
@DanyAlejandro 我的错写错了，更新了，我的意思是阅读文档
@PimentoWeb 是的。我如何将 cmets 固定为公认的答案才是真正的问题。
@yo76yo Tks 搞定了

标签： html css markdown

【解决方案1】：

如评论中所述，您可以将 pre_code 放在相对位置的 div 中。

把你的图片放在你的 pre_code 之后，并用绝对位置定位它，可能是这样的......

<div style="position:relative">
    <pre>
    <code class ="JSON hljs">var j =0;
    </code>
    </pre>
    <img class="hiddenCopy" style ="position: absolute; top: 0; right: 0;" src="../img/upload-script.png"/>
</div>

【讨论】：