수정된 스킨은 코드 하이라이팅을 지원하지만 플레인 자바스크립트로 빌드된 커스텀 버전이라 모든 언어를 지원하지 않아 기존에 사용하던 Highlight.js를 다시 가져와서 수정했습니다.
Highlight.js까지는 어플리케이션이 잘 돌아가는데 Highlight.js에 줄번호를 추가하는 플러그인(highlightjs-line-numbers.js)이 스킨과 충돌해서 제대로 적용되지 않았다.
늘 그렇듯 새벽 5시까지 머리를 굴리며 원인을 찾아봤지만 개발자 도구를 열어서 찾아본 결과 CSS ::Before 선택기가 제대로 적용되지 않았다.
내가 웹 개발을 싫어하는 이유 중 하나는 이 CSS입니다.
웹을 깊이 파고들지 않아서 그런 css 충돌에 대응하는 방법은 !
important 를 사용하거나 각각을 체크해제해서 원인을 찾아서 지우고 노가다로 css 옵션을 주입하는 것이 더 좋은 방법이지만 웹 개발 자체가 내 주요 관심 분야가 아닙니다.
아시는 분 계시면 답변 부탁드립니다
여하튼 js로 삽입되지 않은 css 스타일을 수동으로 삽입하여 해결했습니다.
글꼴(VSCode 기본 글꼴, Consolas)도 수정하여 둥글게 만들었습니다.
복사 버튼도 추가되었습니다.
복사 버튼은 JS와 함께 동적으로 추가됩니다.
코드는 ChatGPT의 형에게 물어서 만들었습니다.
다만 아쉬운 점은 웹사이트용 속도계인 구글의 페이지 속도 인사이트 속도 점수가 10점 정도 떨어졌다는 점이다.
. 비동기로 불러오기도 해봤는데 그 점수를 지우는 방법을 모르겠습니다.
사람은 아직 배워야 한다고 생각합니다.
내가 웹 개발을 많이 했다면 합리적으로 잘 처리할 수 있었을 것이다.
암튼 스킨 바꾸고 나니 지독한 로딩속도가 사라졌으니 만족해야 할까요? ;