hELLO 스킨에 mac 코드 스타일 적용 오류 해결 방법

사건 발단

---

마음에 드는 티스토리 스킨을 찾던 중 hELLO 스킨을 알게 되어 적용하고, 추가로 코드 블럭도 커스텀 하고 싶은 욕심이 생겨 찾아보다 mac 코드 스타일을 만드신 둉이님이 코드 블럭을 감사하게 무료로 배포해 주셔서 같이 적용하려고 하였다. 그러나 문제가 발생하였다.

 

hELLO 스킨과 mac 코드 스타일을 적용하고 싶다면 아래 블로그를 참조하면 된다.

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

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

 

---

 

문제 발생 & 원인

---

아래와 같이 예상했던 mac 코드 스타일을 기대했으나, 코드 블럭이 깨지고 mac 스타일의 상단바가 적용되지 않는 오류가 발생하였다.

예상했던 코드 블럭

 

실제 코드 블럭

 

원인이 무엇일까?

이러한 원인은 hELLO 스킨을 만드신 정상우님의 블로그 트러블 슈팅 글에서 찾을 수 있었다.

 

"Gist 등 외부의 리소스를 글 내부로 주입할 때, 의도하는 바와 다르게 처리되는 문제가 발견되었습니다. v4.1에서 이미지 지연 로딩 구현으로 본문의 처리방식을 v4.0 과는 다르게 바꾸었는데, 그로 인한 부작으로 파악됩니다. 기술적으로 이 문제가 해결되려면 이미지 지연 로딩을 롤백해야 합니다. "

 

즉 적용이 안되는 문제는 글이 모두 렌더링이 되지 않았는데 mac 코드 스타일을 적용하는 codeblock.js 파일에 함수가 먼저 실행되어 발생된 문제이다. 이를 window.addEventListner를 통해 load 시켜 렌더링이 완료된 시점에 해당 함수를 호출시킨다면 해결이 된다.

 

아래는 원본 codeblock.js 파일이다.

const COPY_TEXT_CHANGE_OFFSET = 1000;
const COPY_BUTTON_TEXT_BEFORE = 'Copy';
const COPY_BUTTON_TEXT_AFTER = 'Copied';
const COPY_ERROR_MESSAGE = '코드를 복사할 수 없습니다. 다시 시도해 주세요.';

const codeWrappers = document.querySelectorAll('pre[id^=code_]');

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

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

 

실행하려는 변수(copyBlockCode, copyBlockCode)와 for문을 감싸는 fuc을 만들고 window.addEventListener("load", () => { fuc();});를 통해 해당 fuc을 실행시키도록 변경하면 된다.

const COPY_TEXT_CHANGE_OFFSET = 1000;
const COPY_BUTTON_TEXT_BEFORE = "Copy";
const COPY_BUTTON_TEXT_AFTER = "Copied";
const COPY_ERROR_MESSAGE = "코드를 복사할 수 없습니다. 다시 시도해 주세요.";

const func = () => {
    const codeBlocks = document.querySelectorAll("pre > code");

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

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

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

 

---

 

마치며

---

위와 같이 codeblock.js를 수정 후, 파일 업로드하면 mac 코드 스타일의 코드 블럭이 될 것이다. 그러나 몇 가지 아쉬운 점이 있어 해결했던 방식을 공유하고자 한다.

• 폰트와 색상을 IntelliJ의 기본 폰트와 테마인 JetBrains Mono와 Darcula를 적용
• mac 코드 스타일이 hELLO 스킨의 다크모드 여부에 따라 색상 변경 제거

 

코드 블록 테마 Darcula 적용

코드 블럭의 테마를 커스텀하는 방법 중 highlight.js를 사용하는 방법도 있으나, 나는 티스토리가 지원하는 코드 문법 강조를 통해 Darcula 테마를 적용하도록 했다. 블로그 설정에 들어가서 왼쪽 하단에 플러그인을 들어가면 코드 문법 강조를 적용할 수 있다.

 

코드 블록 폰트 JetBrains Mono 적용

아래 링크에 들어가 글꼴을 다운 받은 후, fonts/webfonts/JetBrainsMono-Light.woff2 파일을 찾아 블로그 설정에 들어가서 왼쪽 하단에 스킨 편집 클릭, Html 편집에 들어가 파일 업로드에 해당 파일을 추가해 준다.

JetBrains Mono: A free and open source typeface for developers

JetBrainsMono-Ligjt.woff2 파일 추가

 

다음 CSS 목록에 들어가 .hljs에 font-family를 찾아 "JetBrainsMono"를 넣는다. 다른 곳에 font-family가 적용되었어도 .hljs가 우선순위이기 때문에 따로 건들지 않았다.

수정 전

수정 후

 

hELLO 스킨의 다크여부에 따른 코드 색상 변경 제거

이번에는 HTML 목록에 들어가 아래의 코드를 지워주면 된다.

 

<!-- 아래 태그를 찾아 지운다. -->
<link rel="stylesheet" :href="`//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/${dark ? skinOptions.hljsDark : skinOptions.hljs}.min.css`">

 

 

드디어 원하는 mac 코드 스타일의 블럭이 완성되었다!

public class Test {
    public static void main(String[] args) {
        String str = "hello world";
        System.out.println(str);
    }
}

 

---

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

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

티스토리 코드블럭에 Jetbrains Mono(인텔리제이) 폰트 적용하기