티스토리 코드블럭에 mac 스타일 적용하기 (w. hELLO 스킨)

티스토리의 기본 코드블럭이 마음에 들지 않아 코드블럭을 꾸미는 것에 대해 찾아다니던 중, 발견한 포스팅이다. 솔직히 !! 기능 및 디자인이 너무나 매력적이어서 내 블로그에도 적용하고 싶었다.
 

[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기

 
그런데 왜인지 하라는대로 했는데도, 내 블로그에는 아래와 같은 문제가 발생했다.
 

 
아무리 봐도 다른 사람들은 잘 되는 것을 보니 스킨의 문제인것 같은데, 어떻게 해결해야할지 모르겠었다.
트러블 슈팅 관련 글을 봐도, 뭐라는건지 ... 이해가 안됨..
우선 지원방식 변경으로 인해 본문 기능 추가가 동작하지 않다는 것은 파악. 하지만 코드를 어떻게 수정해야할지 모르겠었다.
 

hELLO 티스토리 스킨을 소개합니다.

 
열심히 서치를 통해 아래 블로그에서 해결 방법을 발견했다. 자바스크립트 실행순서 때문에 발생한 문제였던 것이다.
 

[WEB] 티스토리 "hELLO" 스킨에 mac스타일 코드블럭 적용안되는 오류

 
 
그런데 또 아래와 같은 문제가 발생했다. 코드 Copy 가 작동하지 않았던 것이다. 결론만 말하자면, copyBlockCode가 전체 함수 안에 뭉뚱그려져서 작동하지 않았던 것이다. copyBlockCode 함수를 바깥으로 꺼내 전역변수로 선언해주니 잘 실행된다.
 

 
 

const COPY_TEXT_CHANGE_OFFSET = 1000;
const COPY_BUTTON_TEXT_BEFORE = "Copy";
const COPY_BUTTON_TEXT_AFTER = "Copied";
const COPY_ERROR_MESSAGE = "ERROR";


window.copyBlockCode = async (target = null) => {
  if (!target) return;
  try {
    const code = decodeURI(target.dataset.code);

    await navigator.clipboard.writeText(code);
    target.textContent = COPY_BUTTON_TEXT_AFTER;
    setTimeout(() => {
      target.textContent = COPY_BUTTON_TEXT_BEFORE;
    }, COPY_TEXT_CHANGE_OFFSET);
  } catch (error) {
    alert(COPY_ERROR_MESSAGE);
    console.error(error);
  }
};

const func = () => {
  const codeBlocks = document.querySelectorAll("pre > code");



  for (const codeBlock of codeBlocks) {
    const codes = codeBlock.innerHTML.match(/(.*)(\n|.*$)/g);

    const processedCodes = codes.reduce(
        (prevCodes, curCode) => prevCodes + `<div class="line">${curCode}</div>`,
        ""
    );

    const copyButton = `<button type="button" class="copy-btn" 
    data-code="${encodeURI(codeBlock.textContent)}" 
    onclick="copyBlockCode(this)">${COPY_BUTTON_TEXT_BEFORE}</button>`;

    const codeBody = `<div class="code-body">${processedCodes}</div>`;

    const codeHeader = `
      <div class="code-header">
        <span class="red btn"></span>
        <span class="yellow btn"></span>
        <span class="green btn"></span>
        ${copyButton}
      </div>`;

    codeBlock.innerHTML = codeHeader + codeBody;
  }
  console.log("finished");
};

window.addEventListener("load", () => {
  func();
});