티스토리 코드 블럭 mac 스타일로 무작정 바꿔보기

첫 블로그 생성

처음으로 다른 사람들이 볼 수 있는 블로그를 생성했다. 
책을 좋아하지만, 쓰는 것은 습관이 되어있지않던 나로써는 비공개도 아닌, 공개적인 공간에 내 생각을 나열하는게 많이 어색하다. 

지금도 겨우 2줄을 쓰는 과정에서조차 많은 생각을 거치고, 한글자씩 써내려가고 있다. 

그리고 방금 깨달은 건데, 글을 거의 과거형으로 쓴다는 점이다. 그래서 계속 현재형으로 쓰려고 몇번씩이나 지웠다가 쓰고 있다 ㅎㅎ.. 

아마 글을 쓰는 걸로는 그나마 일기 형식으로 자주 써서 그런 것 같다. 

어쨌든 공개적인 공간에 처음으로 써보는 거라, 많이 서투르고 전달력이 아직은 부족하겠지만 노력해봐야겠다. 

본론 

현재는 hELLO 스킨을 사용하여, 코드블럭의 js 파일이 적용되지 않고 있습니다. 완성된 사진을 참고해주세요.

 

 

코드 블록 mac 스타일로 변경하기 

나의 블로그 환경 
- 스킨 : 티스토리 기본 지원 스킨인 #2 
- 플러그인 : 코드 문법 강조 - Syntax Highlight(Atom One Dark 테마이용) 

mac 코드 블럭 스타일로 바꾸게 되면서 깨달았던게, 플러그인 과 스킨에서 스타일의 차이점이 있음을 알게되었기 때문에 
현재 내 블로그의 환경도 공유한다.

 

(혹시 나와 완전히 똑같은 블로그 환경을 만드는 것을 원할 수도 있으니 블로그 생성시 기본적으로 선택 되어있는 플러그인도 말하자면
  Daum 검색창 / 드래그 검색 / 위치 로그 표시 / 이전 발행 글 넣기 / 카테고리 글 더 보기 를 사용중이다. 
  하지만 이 맥 코드블럭에 영향을 끼칠거라 생각하는 플러그인은 코드 문법 강조라고 생각된다.) 

추가적으로 티스토리를 기술 블로그로 사용하는 개발자 같은 경우에 다른 블로그를 따라하다,
highlight.js 를 html 편집에서 링크를 넣은 사람도 있을텐데 나는 적용을 하지 않은 상태이다. 
mac 코드 블럭 스타일로 바꾼 뒤에 필요성을 느끼지 않아서 적용을 하지 않았다. 

hELLO 스킨에서 mac 코드 블럭이 먹히지 않는 문제

사실 나도 티스토리를 사용하는 개발자들이 많이 이용하는 hELLO 스킨을 적용했었다. 

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

hELLO 스킨은 진짜 만드신 분이 잘 만드셔서 너무 마음에 든 스킨이었다. 
하지만..

mac 코드 블럭 스타일과 함께 사용하고 싶었지만 어떤 이유에서인지 hELLO 스킨에서는 먹히지 않았다 . ᵕ᷄≀ ̠˘᷅  (힝) 

해결하려고 개발자 도구로 찾으려고 했으나 나의 미숙한 개발실력으로는 찾을 수가 없었다.
이 글을 본 방문자 분들 중 아시는 분이 계신다면, 댓글로 도움을 주시면 너무나도 감사할 것 같습니다 !!! 

 

미리 보는 mac 코드 블럭 스타일     
현재는 hELLO 스킨이므로 완성된 맥 코드블럭이 아닙니다.

  

    
    
    
    
  
 class HelloWorld {
          public static void main (String args[]) {
               System.out.println("Hello World");
          }
     }

 

 

mac 코드 블럭 스타일 만들기

해당 mac 코드 블럭 스타일은 둉이님의 블로그 를 통해 진행하였다. 

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

둉이님의 블로그에서도 상세하게 나와있지만, 이를 요약해보자면 

스킨 편집 -> html 편집 -> CSS 코드 수정 -> JS 파일 업로드 -> HTML 에 JS 파일 링크 넣은 후 적용

 

사진으로 상세하게 설명해보자면, 
[스킨 편집] 을 들어간다. 

해당 위치는 블로그 관리에서 확인 가능하다.

[html 편집] 을 누른다.

스킨 편집을 누르자마자 뜨는 화면

[CSS] 코드를 수정한다. 

css 클릭 시 화면 -> 코드 화면을 클릭 후 ctrl + f 를 누르면 hljs 를 검색할 수 있다.

hljs 를 검색 하여 기존 hljs 코드를 지운(혹시 모르니 주석처리 또는 기존 스킨을 보관해두자) 뒤, 
둉이님의 블로그에서 CSS 파일을 다운 받아 열어서, 코드를 해당 위치에 복사붙여넣기 한다.  

 

여기서 어떤 블로그를 보면 기존의 CSS 코드 맨 밑에 해당 코드를 복붙하는데, 나는 그냥 해당 위치에 코드 붙여넣었다. 

hljs 를 지우는게, 기존 스킨에서 hljs 와 부딪히기 때문인 것 같다.
이유는 자세히 모르지만 개인적인 생각!

 

[JS 파일 업로드 ]

해당 사진은 CSS 옆에 파일업로드 를 클릭하면 나오는 화면

둉이님의 블로그에서 codeblock.js 파일을 다운 받아 해당 사진의 추가버튼을 통해 업로드 한다.

여기서 나는 codeblock1.js 로 되어있는데, 이는 아래에서 설명하겠다. 

[HTML 에 JS 파일 링크 넣기]

  

    
    
    
    
  
<script defer src="./images/codeblock1.js"></script>

이 코드를 아래 사진과 같이 닫는 body 태그 쪽에 붙여넣기 해준다. 

해당 사진은 CSS 의 왼쪽 부분에 위치한 HTML 을 클릭하면 나오는 화면이다.

 

그런 다음 대각선 오른쪽 위에 적용버튼을 클릭하고, 새로고침을 하게되면 
자신의 블로그의 코드 블럭 부분이 바뀐 것을 확인할 수 있을 것이다.

#2 스킨의 스킨편집에서 클릭이 안되는 문제

참고로, 내가 사용하고 있는 스킨 #2 에서는 스킨 편집 화면으로 들어갔을 때 다른 곳으로 이동(클릭도)이 안된다. 

그래서
게시글을 클릭해서 코드 블럭 상태를 못봐서 그냥 스킨 편집 화면 나와서 블로그 페이지로 이동했더니 적용된 것을 확인할 수 있었다. 
hELLO 스킨에서는 스킨 편집 화면에서도 잘 이동되던데 나만의 문제인건지는 확인하지 못한 상태이다. 

 

mac 코드 블럭의 그림자가 안 생기는 문제

  

    
    
    
    
  
<!-- 생략 -->

<h1>그림자 테스트라네</h1>

<!-- 생략 -->

원래는 mac 코드 블럭 적용 시 이렇게 코드블럭이 둥둥 띄어져있는 것처럼 그림자가 생겨야 하는데, 
나는 그림자가 생기지 않았다. 
그래서 개발자 도구로 하나하나 CSS 스타일을 체크해제해보고 체크해보고 하면서 테스트하다가

  

    
    
    
    
  
pre {
  position: relative;
  
  // 수정 후 생긴 스타일 
  box-shadow: 0 12px 24px rgb(0 0 0 / 40%);
}
pre::after {
  content: attr(data-ke-language);
  position: absolute;
  bottom: 8px;
  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: #343131;
  font-family: Menlo, Courier, monospace;
}

아까 위에서 html 편집에서 CSS 부분에 복사붙여넣기 했던 코드의 pre 스타일에 
해당 [수정 후 생긴 스타일] 부분을 붙여넣었더니 가능했다. 
개발자 도구안에서의 box 스타일은 취소선 없었어서 잘 적용되고 있다고 생각을 하다가, pre 부분이 
티스토리 내에서 pre > code > span + text 로 이루어져있음을 둉이님의 블로그를 통해 알 수 있었기에 
pre 가 hljs 에 적용된 box-shadow 이 어디에선가 가려지고 있다고 생각을 하였다.
그래서 pre 에 바로 box-shadw 스타일을 추가했더니 가능하게 되었다. 

 

여기서 드디어 스스로 해결했던 문제였기에 
정말 별거 아닌 문제겠지만, 기분이 넘나리 좋은 .. 히히
하지만 이 부분이 다른 부분과 부딪혀 또 다른 문제를 야기할 수도 있다. 
이 코드를 추가함으로써 문제가 생기신 분이 계시다면 댓글로 알려주시면 감사하겠습니다!

 

mac 코드 블럭에서 빈 라인이 하나 더 만들어지는 상황

이는 아래 첨부된 해당 블로그에서 가져온 사진입니다.

이를 해결하기 위해 뉴뉴의 메모장님의 블로그를 참고했다.

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

그래서 내가 파일업로드 시 사진에 첨부된 JS 파일명이 codeblock1.js 가 된 것이었다. 

 

마무리

처음으로 블로그를 만들어서 글을 써보는건데, 생각보다 글 하나 쓰는데 오랜 시간이 걸린다는 것을 알게 되었다.
누군가에게 정보를 줄 수 있음과 동시에 내가 잘못된 정보를 공유할 시 내 블로그를 보는 다른 사람들에게 영향이 갈꺼라 생각하니
하나의 정보를 알더라도 완전하게 이해를 하고 정보를 공유해야 한다는 것을 깨달았다.
그러다보니, 시간이 좀 더 걸린 것 같다.
확실히 공개적인 공간에 글을 쓰는 것은 내게 많은 도움이 될 뿐만 아니라, 이로 인해 다른 사람들에게 많이 도움이 될거라 생각하니
쓸 맛이 난다!!  더 자주, 꾸준히 블로그를 써보도록 노력해야겠다. 

 

처음이어서 많이 부족한 제 글을 끝까지 봐주신 분들께 감사드립니다.