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

macOS Style Code Block

---

코드블록 mac 디자인

평소처럼 일을 하면서 구글링을 해서 여러 기술 블로그들을 확인하게 되는데, 거의 대부분의 블로거 분들이 티스토리 기본 코드 블록을 사용하기보다는 디자인을 커스터마이징을 하여 사용하고 있는 것을 알게 되었어요.

그중에서 맥 스타일의 코드 블럭이 제일 이쁘다고 느꼈습니다.

저의 티스토리 블로그에도 적용하고 싶어서 구글링을 하다 보니 제가 원하는 mac 디자인 형태의 코드 블록을 만들어주는 사이트를 찾아내게 됩니다.

Carbon

바로 Carbon 이라는 사이트인데요.

Carbon | Create and share beautiful images of your source code

해당 사이트에서 쉽게 EXPORT를 진행 할 수 있는데, 원하는 이쁜 디자인이 추출되니 굉장히 만족스러웠습니다.

carbon export #1 image code block

단점

근데 이게 문제가 있는데, 바로 이미지 png, svg 와 iframe 그리고 url 링크로만 export 가 가능하다는게 제일 단점이었어요.

왜냐하면 이미지는 코드는 Copy & Paste 가 불가능하기 때문이에요. 필요에 따라 찾아낸 해결책을 눈으로 좇으며 손으로 일일이 치는 수밖에 없다는 게 가당키나 할까요? 😭

그리고 iframe 은 HTML 표준에 부합하지 않거니와 반응형 처리가 불가능하거든요.

제가 원하는 바는 블로그에서 바로 필요한 코드를 복사하여 작업 중인 로직에 집어넣을 수 있는 것이었습니다.

좀 더 구글링 해보니 직접 HTML, CSS, JS를 수정하여 적용하는 포스팅을 발견하였어요.

해당 내용을 참고하여 커스터마이징 하려고 합니다.

코드 블록 mac 스타일

제가 찾은 포스트는 둉이님 티스토리 블로그의 "코드 블록 디자인을 mac 코드 스타일로 바꾸기"입니다.

해당 포스팅에서 여러 mac 스타일 코드 블록을 위한 노력들이 포스팅되어 있었어요.

간단하게 요약하자면 다음과 같은 것들이 있었습니다.

1. mac 디자인 상단 영역

좌측 상단에 빨간색, 노란색, 초록색으로 구성된 mac 고유의 상단 영역이 표시됩니다.

mac 스타일 상단

2. 코드 블록의 Language 표시

우측하단에 Java, html, css 등의 코드블록에 입력된 language 속성을 표시합니다.

언어

3. 줄 번호 및 hover 효과

본문 좌측에 라인 인덱스라고도 불리는 줄 번호가 있어요.

또한 각 라인마다 마우스를 올리면 배경 색이 살짝 어두워지는 효과가 추가되어 있습니다.

줄번호 hover

4. 클립보드 복사 기능

티스토리 코드 블록에는 clipboard copy 기능이 없지만, 둉이님이 작업한 코드 블럭에는 navigator.clipboard Web Api를 이용하여, 클립보드의 내용을 읽고 쓸 수 있는 기능을 제공합니다.

copy

클릭하면

미리 보기

See the Pen tistory mac style code block by MiJeong Kim (@sap03110) on CodePen.

 

---

적용하기 (hELLO 스킨)

Script

뇽이님 블로그에서 제공받을 수 있는 codeblock.css 와 codeblock.js 파일을 가이드 대로 적용 하는 경우 hELLO 스킨 4.1 이상의 버전을 이용 중이시라면 정상적으로 작동하지 않을 수 있습니다.

hELLO 스킨 v4.1 이상이라면 포스팅된 글의 이미지 지연로딩 지원 방식 때문에 렌더링 방식이 변경된 것이 이유입니다.

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

글이 먼저 렌더링 되어야 하는데, codeblock.js를 먼저 실행시키기 때문에 Dom window객체의 load 이벤트를 등록시켜서 모든 글이 렌더링 된 이후에 codeblock 을 실행시키면 됩니다.

아래와 같이 커스터마이징을 해주도록 할게요.

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.innerHTML = COPY_BUTTON_TEXT_AFTER;
      setTimeout(() => {
        target.innerHTML = 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 = `<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 mac_dot"></span><span class="yellow mac_dot"></span><span class="green mac_dot"></span>${copyButton}</div>`;

      codeBlock.innerHTML = codeHeader + codeBody;
    }

};

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

CSS

제 취향에 맞으면서 적용된 스킨 각 테마에 어울리도록 css를 수정하였습니다.

pre {
  position: relative;
}

/* 코드블록 언어 */
pre::after {
  content: attr(data-ke-language);
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #cfd2d1;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(215 58 73 / var(--tw-text-opacity));
}

.dark pre::after {
  --tw-text-opacity: 1;
  color: rgb(86 156 214 / var(--tw-text-opacity));
}

.hljs {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  font-size: 15px;
  border-radius: 8px;
  background-color: #343131;
}

.hljs .line {
  counter-increment: line-idx;
  line-height: 1.5;
}

.hljs .line:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark .hljs .line:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

/* 코드블록 줄번호 */
.hljs .line::before {
  content: counter(line-idx);
  width: 24px;
  display: inline-block;
  text-align: right;
  margin-right: 16px;
  font-size: 15px;
  color: #747a7a;
}

/* 코드블록 mac 스타일 header */
.hljs .code-header {
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 8px 8px 0 0;
  --tw-bg-opacity: 1;
  background-color: rgb(218 217 218 / var(--tw-bg-opacity));
}

.dark .hljs .code-header {
  --tw-bg-opacity: 1;
  background-color: rgb(67 64 65 / var(--tw-bg-opacity));
}

.hljs .code-header .mac_dot {
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 0 5px;
}

.hljs .code-header .mac_dot.red {
  background-color: #f5655b;
}

.hljs .code-header .mac_dot.yellow {
  background-color: #f6bd3b;
}

.hljs .code-header .mac_dot.green {
  background-color: #43c645;
}

.hljs .code-body {
  max-height: 600px;
  margin: 32px 8px;
  overflow: auto;
}

/* 코드블록 스크롤바 */
.hljs .code-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.hljs .code-body::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgb(218 217 218 / var(--tw-bg-opacity));
}

.dark .hljs .code-body::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgb(67 64 65 / var(--tw-bg-opacity));
}

.hljs .code-body::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

.hljs .code-body::-webkit-scrollbar-corner {
  display: none;
}

/* 코드블록 복사버튼 */
.hljs .copy-btn {
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 5px;
  width: 35px;
  border-radius: 4px;
  margin-left: auto;
}

---

정리

끝내며

1일 1 포스팅을 하려고 노력하고 있습니다만, 제 블로그를 꾸미면서 포스팅을 진행하는 건 생각보다 쉽지 않네요.

다른 사람들의 블로그를 참고하더라도 반드시 내 것으로 만들어 정리하고 다른 사람들의 블로그 포스팅 내용을 무단복사하지 않도록 노력하고 있습니다.

스킨을 커스터마이징 하면서 포스팅하는 건 쉽지 않네요. 🤣

---

참고

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

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

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

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