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

기타

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

wonow_ 2023. 11. 11. 00:28

참고 블로그

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

글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단 여느 날과 다름없이 회사

guiyomi.tistory.com

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

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

hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의

pronist.tistory.com

정상우님의 hELLO 4.2.1 버전 스킨

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

블로그 코드블럭을 예쁘게 보이는 것을 중요하게 생각한다. 맥 스타일로 코드블럭을 꾸미는 것이 예쁘게 보여, 한 번 시도해 보았다. https://guiyomi.tistory.com/132 [티스토리 블로그 테마] - 1. 코드 블

knewnew.tistory.com

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

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

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

supersfel.tistory.com

민규님의 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 스타일 코드블럭을 잘 사용할 수 있을 것이다!

저작자표시