Style Custom

Styleを確認するためのブログ

document.addEventListener("DOMContentLoaded", function() {
    var preElements = document.querySelectorAll(".code-box pre");

    preElements.forEach(function(preElement) {
        var hasHorizontalScrollbar = preElement.scrollWidth > preElement.clientWidth;

        if (hasHorizontalScrollbar) {
            var codeWrapDiv = document.createElement("div");
            codeWrapDiv.className = "code-box";
            codeWrapDiv.innerHTML = '<a href="javascript:void(0)" style="display: flex; align-items: center;">[<span class="hatena-icon">テキストを折り返す</span>]</a>';
            preElement.parentNode.insertBefore(codeWrapDiv, preElement.parentNode.firstChild);

            var linkElement = codeWrapDiv.querySelector("a");

            codeWrapDiv.addEventListener("click", function() {
                if (preElement.style.overflowX === "auto") {
                    preElement.style.overflowX = "visible";
                    preElement.style.whiteSpace = "pre";
                    linkElement.innerHTML = '[<span class="hatena-icon">テキストを折り返す</span>]';
                } else {
                    preElement.style.overflowX = "auto";
                    preElement.style.whiteSpace = "pre-wrap";
                    linkElement.innerHTML = '[<span class="hatena-icon">横スクロールバーを表示</span>]';
                }
                return false;
            });
        }
    });
});