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

블로그 코드블럭을 예쁘게 보이는 것을 중요하게 생각한다.

맥 스타일로 코드블럭을 꾸미는 것이 예쁘게 보여, 한 번 시도해 보았다.

https://guiyomi.tistory.com/132

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

님의 블로그에 올라온 방법으로 진행했고, 몇가지만 커스텀했다.

 

1. 먼저 블로그 스킨편집 > html편집 > html 에서 첨부된 js 임포트 코드를 복사해 넣는다.
2. 파일업로드 탭에서 js 파일을 업로드 한다.
3. css 탭에서 css 코드를 붙여넣기 한다.

 

현재 나는 '프라푸치노 공간' 테마를 사용중인데,
제대로 적용하기 위해선 아래 속성중

'번호 사용', '번호 사용 시 줄무늬', '일부 번호에 줄 바꿈' 기능을 off 했다.

그리고 몇가지를 커스텀했다.

훗날 되돌리기 위해서 기록!

 

커스텀 설정

box-shadow css 제거

.hljs {
  box-shadow: 0 12px 24px rgb(0 0 0 / 40%);
}

설정 제거

 

헤더 패딩 감소

헤더가 너무 넓은것같아 줄였다.

.hljs .code-header {
  padding: 6px;
  padding-left: 8px;
}

14 -> 6

왼쪽패딩은 8

 

삼색버튼(?) 사이즈 감소

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

width, height 15 -> 12

 

트러블슈팅

빈 라인이 하나 더 출력되는 문제

마지막에 빈 라인이 하나 더 출력되는 문제가 있었다.

js코드를 보니, reduce 구문에서 마지막 element에도 처리를 하게되어 문제가 생기는 것 같아 해당 코드를 수정했다.

// 수정 전
const processedCodes = codes.reduce((prevCodes, curCode) => prevCodes + 
`<div class="line">${curCode}</div>`, '');

// 수정 후
const processedCodes = codes.reduce((prevCodes, curCode, counter) => {
    if (counter == codes.length - 1) {
      return prevCodes;
    } else {
      counter += 1;
      return prevCodes + `<div class="line">${curCode}</div>`
    }
  },'');

수정 후에는 내가 작성한 만큼 코드가 잘 출력되는 것을 확인할 수 있다.

 

 

 

 

모바일에선 없는 것이 나을 수도 있겠다만,,
개발 블로그는 거의 pc에서 많이 본다고 생각해 pc 화면 위주로 커스텀 할 생각이다.