hELLO 스킨에 mac 디자인 코드블럭 적용 안 되는 오류 종합

 

참고 블로그

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

둉이님의 mac 디자인 코드 블록

 

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

정상우님의 hELLO 4.2.1 버전 스킨

[블로그] 티스토리 블로그 코드블럭 맥 스타일로 변경하기

뉴뉴님의 코드 한 줄 추가 되는 오류 해결 방법

 

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

민규님의 mac스타일 코드블록 적용 안되는 오류

 

그리고.. gpt의 Copy 블록 안되는 거 해결법...

 

 

 

아래의 코드를 복붙해서 다시 업로드 해주면 된다.

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 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, counter) => {
    if (counter == codes.length - 1) {
      return prevCodes;
    } else {
      counter += 1;
      return prevCodes + `<div class="line">${curCode}</div>`
    }
  },'');

    const copyButton = document.createElement("button");
    copyButton.type = "button";
    copyButton.className = "copy-btn";
    copyButton.dataset.code = encodeURI(codeBlock.textContent);
    copyButton.textContent = COPY_BUTTON_TEXT_BEFORE;
    copyButton.addEventListener("click", function() {
      copyBlockCode(this);
    });

    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>
      </div>`;

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

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

 

이 Js를 적용하면 Copy 버튼이 제자리를 못찾을 것이다

 

그래서 .copy-btn css를 수정한다.

 

.hljs .copy-btn

.hljs .copy-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 0.75rem;
  padding: 6px 0;
  width: 64px;
  border-radius: 4px;
  margin-left: auto;
  transition: 0.2s background-color;

  /* 새로 추가된 위치 조정 스타일 */
  position: absolute;
  top: 1.4px;
  right: 2px;
  /* top right는 직접 조절 */
}

 

이러면 hELLO스킨에서도 mac 스타일 코드블럭을 잘 사용할 수 있을 것이다!