code.ejs

<%- include('./partials/header') %>

<div class="container article-container code-page">
    <article class="shadow-box" style="padding: 16px">
        <%- include('./partials/page-info') %>
        <div class="control-panel" style="margin-top: 16px">
            <button class="btn btn-light" id="darkBtn" onclick="changeBackground()">Focus</button>
            <button class="btn btn-light" onclick="copyCode()">Copy</button>
        </div>
        <pre>
            <code id="code-display"><%=page.content%></code>
        </pre>
        <%- config.copyright %>
        <%- config.ad %>
        <label>
            <textarea id="hiddenTextArea" style="position: absolute;left: -100%;"></textarea>
        </label>
    </article>
    <%- include('./partials/prev-next') %>
    <%- include('./partials/comment') %>
</div>

<script>
    const body = document.getElementsByTagName("body")[0];
    const darkBtn = document.getElementById('darkBtn');
    let dark = false;
    function copyCode() {
      const copyText = document.getElementById("code-display").textContent;
      const textArea = document.getElementById('hiddenTextArea');
      textArea.textContent = copyText;
      document.body.append(textArea);
      textArea.select();
      document.execCommand("copy");
    }

    let e = document.querySelector('#code-display');

    function changeBackground() {
      const comment = document.getElementsByClassName("comment")[0];
      let backgroundColor = getComputedStyle(e).backgroundColor;
      if(dark){
        body.setAttribute('style', '');
        if(comment) comment.style.cssText = "";
      }else{
        body.setAttribute('style', 'background:'+backgroundColor);
        if(comment) comment.style.cssText = "visibility:hidden";
      }
      dark = !dark;
    }

</script>


<%- include('./partials/footer') %>