[티스토리 스킨] hELLO 테마에서 코드 블럭 mac 스타일로 꾸미기

 

 

시작하기 전에

먼저 해당 포스팅의 커스텀은 정상우님께서 공유해주신 hELLO 티스토리 스킨 v4.10.3을 적용한 후에 진행되었다.

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

 

코드 블럭에 기본적인 mac 스타일 커스텀을 입히는 코드는 기본적으로 둉이님의 아래 포스팅에 첨부된 코드를 사용했다.

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

 

마지막으로 위 포스팅의 코드를 hELLO 스킨에 적용하기 위해서 reifier님의 아래 포스팅을 참고했다.

[티스토리] 코드 블록 mac 스타일 적용 (feat. hELLO)

 

수정 전 코드 블럭

 

세가지 포스팅에 적힌 내용을 순차적으로 내 블로그 스킨에 적용하여 위와 같은 모습을 완성했다. 스타일은 둉이님 포스팅에 첨부된 CSS 스타일에서 건들이지 않았다.

 

위와 같은 상태에서 코드 블럭의 스타일을 내 취향에 맞게 수정하고 그 과정에서 몇가지 수정 사항이 생겨서 추후 스킨 업데이트 등을 이유로 백업하기 위해 이 포스팅을 작성한다.

 

 

수정사항

1. 전반적인 스타일 수정

 

코드블럭과 헤더의 배경색과, 코드 블럭에 생기는 스크롤의 스타일 등을 수정해주었다. 코드블럭의 폰트로는 Source Code Pro를 사용했다. 

 

@font-face {
  font-family: Source Code Pro;
  src: url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
}

pre {
  position: relative;
}
pre::after {
  content: attr(data-ke-language);
  position: absolute;
  bottom: 6px;
  right: 12px;
  color: #cfd2d1;
  font-size: 12px;
}
.hljs {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(0 0 0 / 40%);
  color: #cfd2d1;
  background-color: #2d3440;
  font-family: "Source Code Pro", monospace;
}
.hljs .line {
  counter-increment: line-idx;
  line-height: 1.8;
  white-space: pre;
  padding-right: 5px;
  min-width: 100% !important;
}
.hljs .line:hover {
  background-color: #262830;
}
.hljs .line:hover::before {
  color: #cfd2d1;
}
.hljs .line::before {
  content: counter(line-idx);
  width: 24px;
  display: inline-block;
  text-align: right;
  margin-right: 16px;
  font-size: 0.8rem;
  color: #747a7a;
}
.hljs .code-header {
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 14px;
  background-color: #2d3440;
  border-radius: 8px 8px 0 0;
}
.hljs .code-header .btn {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 4px;
}
.hljs .code-header .btn.red {
  background-color: #f5655b;
}
.hljs .code-header .btn.yellow {
  background-color: #f6bd3b;
}
.hljs .code-header .btn.green {
  background-color: #43c645;
}
.hljs .code-body {
  max-height: 600px;
  margin: 20px 8px 25px 8px;
  overflow: auto;
}
.hljs .code-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.hljs .code-body::-webkit-scrollbar-thumb {
  background-color: rgb(60, 64, 75);
}
.hljs .code-body::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.hljs .code-body::-webkit-scrollbar-corner {
  display: none;
}
.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: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hljs .copy-btn:hover {
  background-color: #ffffff30;
}

 

2. JS 코드 업데이트

최근 둉이님의 포스팅에서 COPY 버튼이 텍스트에서 아이콘으로 바뀌고 버그를 수정하면서 JS 코드가 업데이트 되었다. 따라서 reifier님 포스팅에 업로드된 코드와 같이 둉이님의 JS 코드 또한 codeblock이 블로그 페이지의 모든 리소스가 로드 된 후에 실행될 수 있도록 수정해주면 된다.

 

3. 코드 라인 hover 시 백그라운드 길이 수정

기본적으로 둉이님의 mac 스타일 코드 블럭은 각 라인에 마우스오버를 하면 해당 라인이 살짝 어두워지는 CSS 스타일이 적용되어 있다.

 

하지만 위 사진과 같이 만약 코드 블럭에 포함된 일부 코드 라인이 너무 길어져 가로 스크롤이 생기면, 가로로 스크롤 했을 때, 마우스오버 시 어두워지는 부분이 스크롤 길이보다 짧아서 잘려보인다. 사소한 문제였지만 살짝 불편함을 느껴서 이 부분을 수정해보기로 했다.

 

코드 블럭을 구성하는 모든 라인의 텍스트 길이를 구해서, 그 중에 가장 긴것을 바탕으로 모든 라인 div요소의 width를 결정해주면, 가로 스크롤 길이와 상관없이 항상 마우스 오버 했을 때 꽉 차게 배경이 어두워지도록 할 수 있다. 코드 블럭에 포함된 라인 수가 매우 많아진다면 성능 면에서 좋은 방법은 아니지만 아무래도 블로그 포스팅에 그만한 길이의 코드를 포스팅할 일은 없으니.. 간단 무식하게 해결했다!

 

최종적으로 2번, 3번의 수정사항을 반영한 JS 코드는 아래와 같다.

 

const COPY_TEXT_CHANGE_OFFSET = 1000;
const COPY_ERROR_MESSAGE = "코드를 복사할 수 없습니다. 다시 시도해 주세요.";
const COPY_ICON = `
  <svg width="14" height="14" fill="currentColor" class="icon" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
  </svg>`;
const CHECK_ICON = `
  <svg width="14" height="14" viewBox="0 0 14 15" fill="none">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.746.07A.5.5 0 0011.5.003h-6a.5.5 0 00-.5.5v2.5H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-2.5h4.5a.5.5 0 00.5-.5v-8a.498.498 0 00-.15-.357L11.857.154a.506.506 0 00-.11-.085zM9 10.003h4v-7h-1.5a.5.5 0 01-.5-.5v-1.5H6v2h.5a.5.5 0 01.357.15L8.85 5.147c.093.09.15.217.15.357v4.5zm-8-6v9h7v-7H6.5a.5.5 0 01-.5-.5v-1.5H1z" fill="currentColor"/>
  </svg>`;

const adjustLineWidths = (codeBody) => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  const computedStyle = window.getComputedStyle(codeBody);
  context.font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;

  const lines = codeBody.querySelectorAll(".line");
  let maxWidth = 0;

  lines.forEach((line) => {
    const textWidth = context.measureText(line.textContent).width;
    maxWidth = Math.max(maxWidth, textWidth);
  });

  maxWidth += 32;

  lines.forEach((line) => {
    line.style.width = `${maxWidth}px`;
  });
};

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

    await navigator.clipboard.writeText(code);
    target.innerHTML = CHECK_ICON;
    setTimeout(() => {
      target.innerHTML = COPY_ICON;
    }, 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.split(/\n/);

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

    const codeBodyElement = codeBlock.querySelector(".code-body");
    adjustLineWidths(codeBodyElement);
  }
};

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

 

 

최종 코드

codeblock.js

0.00MB

codeblock.css

0.00MB