24/11/9 하루종일 맥북앞에

 
1. 티스토리 hello 스킨 본문 폭 넓히기 CSS 에서 margin, padding 값 
2. 코드블럭 테마 변경 - Mac코드 스타일 + 플러그인 Darcula
3. 코드블럭 가로 크기 변경(본문 폭 넓히니까 알아서 됨)
4. 코드 블럭 폰트 변경 => Google Fonts
5. 본문 폭 벗어나는 이미지 처리방법
6. 코드 블럭 인라인 넘버
 
스택/큐 문제 2개 더 풀고 같은 유형 문제 정리 (시간이 없어서 못함)
시간 나면 어제 만들던 카드 뒤집기 게임 마저 마무리 하기 (시간이 없어서 못함)
저녁에 밖에 나가서 놀기 (시간이 없어서 못함)
 
https://changsroad.tistory.com/418

hELLO 스킨 커스텀

 
https://code-tips.tistory.com/entry/티스토리-코드-블럭에-복사-버튼-만들기 

[티스토리] 코드 블럭에 복사 버튼 만들기

 

https://yunheeverse.tistory.com/category/etc

'etc' 카테고리의 글 목록

 

티스토리 커스텀 하려고 맥북 앞에 하루 종일 앉아 있었더니 몸 상태가 말이 아니다. 얼굴에 뾰루지 나고 몸도 아프고 큰일이다....

코드블럭에 Mac 스킨 적용하는데 처음에는 계속 헤더부분이 깨져서 한시간동안 원인 규명에 나섰다. 알고보니까 미리 적용해 놨던 hljs 인라인넘버 <script> 태그 2개랑 충돌나서 그런거였다. 이거 고치고 나니까 코드블럭 모양도 그럴싸하고 js도 연결 됐는데 여기서 copy 버튼이 안 먹힘 

처음에는 금방 해결할줄 알았다. 구글링하다가 나랑 같은 문제를 겪은 사람들이 js파일 수정해서 올려놓은 걸 발견했기 때문이다.

해당문제에 대해서 heLLO스킨 개발자 정상우님께서 트러블슈팅을 하셨는데 이미지 지연 로딩에 대한 해결책으로 본문의 데이터 처리방식 바꾸는 작업으로 heLLO 스킨이 업데이트되면서 기존의 js 파일이 제대로 호환되지 않는 것이었다.

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

그래서 hui 님 블로그에 있는 수정된 js파일을 가져왔다.
전체 코드를 함수로 감싸고 마지막에 렌더링 후 함수를 호출 해주는 js 파일

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

 
이 글이 24년 1월에 올라온거라서 비교적 최근인걸 감안해서 당연히 될거라 생각하고 수정된 js파일 연동했는데 그래도 copy 버튼은 안 먹힌다.

해당 js파일을 vscode로 열어 봤는데 copyBlockCode가 선언만 되고 호출이 안 된걸로 보임 
아래 문자열로 호출이 된 부분이 있으나 안먹힌 것으로 보임
실제로 copy 버튼 누르고 개발자도구에서 디버깅해도 copyBlockCode(this)에서 오류남

onclick="copyBlockCode(this)">${COPY_BUTTON_TEXT_BEFORE}

그래서 onclick 속성에서 문자열을 호출하는  대신 addEventListener로 호출해 줬으나  그래도 안됨

어떤 블로그에서 copyBlockCode를 전역 변수 선언하라고 해서 했는데도 안됨
그래서 결국 코드블럭 Copy 버튼 안 먹히는 문제 2시간째 못고치고 있음 
 

맥북

무튼 최알라미가 봐준다고 했는데 생각보다 문제가 심각하다

맥북에서는 copy 버튼만 안 되지만 모양새라도 갖춰져서 나오는데 데스크탑 PC에서 보니까 코드블럭이 완전 깨져서 나옴...
 

윈도우

윈도우에서 어떤 브라우저로 켜 봐도 저런 식으로 나옴...
아... copy 버튼이 문제가 아니고 지금까지한거 그냥 다 원상복구 해야겠다ㅠㅠ 흐....