highlight.js 도입 성공 😓

현재 사용하고 있는 F-light 테마는 highlight.js 를 지원하지 않아 직접 코드를 추가 해야 할 필요가 있었다.

하지만 본 블로그는 게임 리뷰를 주로 다루기 때문에 굳이 추가하지 않아도 될 기능이지만 나중을 위해선 추가할 필요가 있었고 이미 마음을 먹은 상황이기 때문에 곧바로 번역기와 F12 를 통한 소스 수정을 이용하여 테마를 뜯어 고치기 시작하였다.

다행히도 F-light 테마를 디자인한 ふじやん씨의 블로그에서 해당 코드에 대해 다루어 주었기에 코드 적용은 쉽게 끝낼 수 있었다. 그리고 제대로 작동하는지 미리보기를 통해 확인해보니

뭐야 내 코드 돌려줘요? 🤔

??? 제대로 작동은 하는 듯 하지만 <pre></pre> 안에 입력했던 코드가 보이지 않았다.

뭘 놓친게 있나 싶어서 글을 다시 한번 확인해보고 코드도 다시 넣어보고 해당 페이지를 소스로 뜯어서 그대로 복사도 해보고 쌩지랄을 하다 보니 테마가 걸레짝이 되어가기 시작했다. 여기서 백업의 중요성을 다시 한번 깨달았지만 이미 상황은 돌이킬 수 없는 상태였다. 코드에 대해선 단순한 태그만 알다보니 뭘 지웠는지도 모르겠고 어디서부터 수정을 해야 할 지 감도 안오고 계속해서 더 깊은 늪에 빠지는 느낌이였다.

결국 기존 테마를 날리고 처음부터 다시 해보자는 마음으로 체크해가면서 천천히 입력해보았다. 그리고 다시 확인을 해보았지만 여전히 코드가 나오지 않고 있었다.

결국 나의 커스터마이징 선생님 ChatGPT 님을 쪼아보니 힌트를 얻을 수 있었고 생각보다 단순한 문제였다.

< , > 이 괄호가 문제였다.

구글 블로그는 HTML 에디터에서 직접 코드를 입력하다 보니 < , > 가 들어가지 않은 단순한 CSS 코드는 문제가 없었지만 < , > 가 들어가는 HTML 이나 JAVASCRIPT 에 문제가 발생하고 있었던 것 이였다.

이런 단순한 문제라고는 생각도 못했던 게 티스토리에서 코드를 입력할 때는 단순하게 에디터에서 붙여넣기만 해도 아무런 문제가 없었기 때문에 구글 블로그에서도 그냥 붙여넣기만 하면 되는 줄 알았다. 편집기가 다르다는 생각은 안하고. 😞 

결국 코드를 자동으로 이스케이프 해주는 사이트를 이용하여 < 와 > 를 &lt; 와 &gt; 로 바꾸니 코드가 깔끔하게 잘 나와주었다.

조금 허탈하기도 했지만 그래도 해결되어서 다행이다.

💡 본인 블로그에 하이라이터를 조금 더 쉽게 올리고 싶다면 컬러 스크립터 사이트를 이용하자.