feat: make images clickable

[mavogel]

I'd love to have the possibility to click on images and then they become fullscreen aka zooming in.

[rothgar]

I'm having a weird problem with blist theme where even trying to make a image a link via

[![](/img/my-image.jpg)](/img/my-image.jpg)

It displays the html instead of the image on the rendered page and the html text is clickable

<img src="/img/my-image.jpg" alt="">

[alisonjoe]

markdown support html, gpt answer like:

<p onclick="showModal()">
    <img id="myImage" src="/img/1111.jpg" alt="1111">
</p>

<div id="myModal" class="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <img class="modal-content" id="modalImg">
</div>

<script>
function showModal() {
    var modal = document.getElementById("myModal");
    var imgSrc = document.getElementById('myImage').src;
    var modalImg = document.getElementById("modalImg");
    
    modal.style.display = "block";
    modalImg.src = imgSrc;
}

function closeModal() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
}
</script>

<style>
/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

/* Modal content */
.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

/* Close button */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}
</style>