티스토리 스킨 및 MAC 스타일 코드 적용하기

오늘 드디어 티꾸를 진행했다.
테마는 아래에 무료 배포된 스킨을 사용하였음!

 

티스토리 블로그 무료스킨 배포

 

코드 스타일도 변경했는데 mac 스타일이 예뻐보여서 적용했다.

 

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

 

 

이분 블로그를 보고 적용했는데 코드가 세로로 길게 나열되는 오류가 발생했다.

 

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

 

그래서 위의 분이 작성해둔 오류 해결 방법을 보고 적용했는데 아래와 같은 오류가 발생했다.

 

---

 

| 1. copy 버튼의 클릭 작동이 되지 않음

원래 codeblock.js 코드에서는 copyBlockCode 함수가 func() 내부에 존재했다. 지역 함수이기 때문에 전역에서 접근을 할 수 없게 된다.
따라서, onclick="copyBlockCode(this)"는 HTML 속성에서 전역에서 찾아야 하기 때문에 동작하지 않게 된다.

copyBlockCode를 func() 밖으로 빼주고 전역에 등록해주면 그대로 사용 가능하다.

 

전역 등록 코드

window.copyBlockCode = copyBlockCode;

 

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

window.copyBlockCode = copyBlockCode;

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

 

| 2. COPY -> COPIED 로 변경 시, 배경 부분이 글자 길이에 맞게 변경되지 않음

 

기존 코드

.hljs .copy-btn { 
    background-color: #ffffff17; 
    border: none; 
    cursor: pointer; 
    color: #fff; 
    border-radius: 4px; 
    width: 36px; 
    height: 28px; 
    margin-left: auto; 
    transition: 0.2s background-color; 
    font-size: 14px; 
}

 

변경된 코드
height와 width가 고정되어 있어 크기 변경이 되지 않았다. 둘 모두 auto 속성으로 변경해 해결

.hljs .copy-btn {
  background-color: #ffffff17;
  border: none;
  cursor: pointer;
  color: #fff;
  border-radius: 4px;
  margin-left: auto;
  transition: 0.2s background-color;
  font-size: 14px;
  padding: 4px 10px; 
  width: auto;     
  height: auto;
}

 

| 3. 카테고리에 공백 추가됨

이건 테마 자체에서 나타나는 오류였다.
내용 구분을 위해 엔터를 한번씩 더 쳐주면 아래와 같이 `<p class>&nbsp;</p>` 가 추가되어서
카테고리에 공백이 들어가게 된다.

 

`.text()`는 해당 요소와 자식 요소에 있는 모든 텍스트 노드를 합쳐서 반환하게 된다. 이때 줄바꿈과 공백도 그대로 포함된다.
따라서 ` target.eq(i).text()` 를 사용하면 줄바꿈이나 공백이 포함될 수 있다고 한다.
js 코드를 아래와 같이 수정해주었다.

기존 코드

for (var i = 0; i < target.length; i++) { 
    toc.append("<p>" + target.eq(i).text() + "</p>"); 
    targetHight.push(target.eq(i).offset().top); 
}

 

수정 코드

for (var i = 0; i < target.length; i++) {
    var cleanText = target.eq(i).text().replace(/\s+/g, ' ').trim();
    toc.append("<p>" + cleanText + "</p>");
    targetHight.push(target.eq(i).offset().top);
}

 

결과

좌: 변경 전 / 우: 변경 후