Я люблю подписывать свои изображения и писать в Markdown. Однако в настоящее время невозможно создавать изображения с подписями, то есть создавать HTML-рисунок, используя только Markdown - по крайней мере, в текущей спецификации (версия 0.27) на момент написания этой статьи. Конечно, Markdown поддерживает HTML, поэтому вы можете просто написать тег <figure> везде, вместо того, чтобы писать с помощью синтаксиса изображений Markdown ![](). Однако я хочу использовать синтаксис ![]()! Итак, вот хороший трюк для создания подписей к изображениям, используя только синтаксис Markdown с небольшим ванильным Javascript.

Уловка состоит в том, чтобы использовать Javascript для поиска изображений с ненулевыми атрибутами alt и преобразования их в рисунки с заголовком, заполненным содержимым атрибута alt. Кто-то придумал это до меня, и вот их сценарий:

$(".post-content img").each(
function() {
    if ($(this).attr("alt")) {
        $(this).wrap(
            '<figure class="image"></figure>'
        ).after(
            '<figcaption>' +
            $(this).attr(
                "alt") +
            '</figcaption>'
        );
    }
}); // from https://blog.kchung.co/adding-image-captions-to-ghost/

Он отлично работает, но требует JQuery. Я не хочу использовать JQuery, поэтому внимательно следил за oneuijs / You-Dont-Need-jQuery и смог преобразовать его в простой Javascript:

function ready(fn) {
    if (document.attachEvent ? document.readyState === "complete" :
        document.readyState !== "loading") {
        var elements = document.querySelectorAll("img");
        Array.prototype.forEach.call(elements, function(el, i) {
            if (el.getAttribute("alt")) {
                const caption = document.createElement('figcaption');
                var node = document.createTextNode(el.getAttribute("alt"));
                caption.appendChild(node);
                const wrapper = document.createElement('figure');
                wrapper.className = 'image';
                el.parentNode.insertBefore(wrapper, el);
                el.parentNode.removeChild(el);
                wrapper.appendChild(el);
                wrapper.appendChild(caption);
            }
        });
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}
window.onload = ready;

Конечно, это выглядит немного сложнее, но работает точно так же.

Единственная проблема здесь заключается в том, что при загрузке страницы вы увидите, что все цифры «прыгают» на свои места по мере того, как на них записываются подписи, примерно через сто миллисекунд после загрузки страницы. Чтобы избежать этого, вы можете закрыть страницу до тех пор, пока она не будет полностью готова, с помощью div:

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;"></div>

Затем вы можете добавить постепенное исчезновение к этому div в функции Javascript ready():

el = document.getElementById('loadingMask');
fadeOut(el);

Функция fadeOut() адаптирована из функции youmightnotneedjquery.com fadeIn():

function fadeOut(el) {
  el.style.opacity = 1;
  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity - (new Date() - last) / 80;
    last = +new Date();
    // console.log(el.style.opacity);
    if (el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    } else {
        el.style.display='none';
    }
  };
  tick();
}

Идите и скопируйте это на любой сайт, который хотите! Полный код находится здесь. Посмотрите это вживую на https://yakczar.com/captioning-images/.