Question

从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

Answer 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>

如何将img添加到已样式化的html代码块中

1 个答案: