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

 

 

 

필자는 이미 위와 같은 맥북 스타일을 사용하고 있었다.

 

근데 소중한 친구가 개발 블로그를 시작하고 싶다고 해서 이것 저것을 도와 주다가 위와같은 맥북 스타일을 넣는 것을 도전하고 있었다.

 

 

mac스타일 코드블럭을 적용하는 방법 자체는 아래 글을 참조하면 쉽게 이해할 수 있다.

 

https://guiyomi.tistory.com/132

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

 

 

중요한건 현재 위와같은 방법으로 코드블록 디자인을 바꾸면 제대로 적용이 안되는 문제가 발생했다.

 

 

해당원인은 아래 트러블 슈팅 해결 글에서 찾을 수 있었다.

 

https://pronist.tistory.com/5

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

 

 

https://github.com/tidory/hello/discussions/215

어떻게 해야 Alpine.start() 이후에 코드를 실행할 수 있을까요? · tidory/hello · Discussion #215

 

 

hELLO 스킨을 만든 분께서 이유까지 잘 설명해 주셨다.

 

 

요약하자면 v4.1부터 글의 이미지 지연로딩 지원 방식 때문에 렌더링 방식이 바뀌었다고 한다.

 

 

이쯤에서 mac스타일의 codeblock.js 파일을 뜯어보자.

 

const COPY_TEXT_CHANGE_OFFSET = 1000;
const COPY_BUTTON_TEXT_BEFORE = 'Copy';
const COPY_BUTTON_TEXT_AFTER = 'Copied';
const COPY_ERROR_MESSAGE = '肄붾뱶瑜� 蹂듭궗�� �� �놁뒿�덈떎. �ㅼ떆 �쒕룄�� 二쇱꽭��.';

const codeBlocks = document.querySelectorAll('pre > code');

const 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);
  }
}

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;
}

 

 

간단하게 코드를 뜯어보면 html에서 코드블럭을 선택한 이후, 카피버튼과 mac스타일의 코드 헤더를 만든 이후 이를 추가해주는 것을 알 수 있다.

 

 

 

즉 적용이 안되는 문제는 글이 모두 랜더링 되지 않았는데 위 자바스크립트 파일이 먼저 실행되서 그렇다. 따라서 window의 load 이벤트를 등록시켜서 글이 모두 로딩이 된 이후에 함수를 실행시키면 해결된다.

 

 

이해가 잘 안된다면 codeblock.js 파일을 아래 파일로 바꿔보자!

 

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

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

  const 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);
    }
  };

  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();
});