Как добавить IMG в HTML-блок кода, который уже стилизован - PullRequest
2 голосов
/ 11 июля 2019

Ответьте, что сработало для меня из 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;

обычно я бы сделал что-то вроде этого:

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

и просто имейте код относительно позиции. Но я не хочу изменять CSS-код блока, так как он ссылается на внешний сайт. Место, где я хочу это

1 Ответ

0 голосов
/ 11 июля 2019

Как поясняется в комментарии, вы можете поместить свой pre_code в относительную позицию div.

Поместите ваше изображение после вашего pre_code и расположите его с абсолютной позицией, что-то вроде этого ..

<div style="position:relative">
    <pre>
    <code class ="JSON hljs">var j =0;
    
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...