👀 코드 주석 스타일 변경
벨로그 코드블럭에서는 ``` 옆에 어떤 언어를 사용할 것인지를 명시해주면 해당 언어에 맞는 하이라이트를 적용해주었다. 티스토리 마크다운에서는 해당 기능을 지원하지 않고, 자동으로 코드를 인식하여 바뀌기 때문에 HTML에서는 //을 사용할 수 없어 상당히 불편했다. HTML은 주석을 남기는데 <!-- -->를 사용하기 때문이다.
따라서 //을 자동으로 주석처리해주는 (색을 바꾸어주는) 스크립트를 만들어 블로그에 적용시키기로 했다.
✔ 적용과정
//hljs xml이라는 클래스에 코드블럭의 모든 HTML이 저장되고 있었다.
//따라서 getElementsByClassName을 이용해 해당 클래스를 모두 가져왔다.
let list = document.getElementsByClassName('hljs xml');
//가져온 모든 hljs xml에 대해서 반복문 실행
for(let i = 0; i < list.length; i++){
//commentOG에 최종 표시할 문자열을, comment에는 주석을 처리하고 남은 문자열을 저장했다.
//num1이 주석의 시작 인덱스, num2가 주석의 종료 인덱스이다.
//num1은 '//'의 인덱스를, num2는 '\n`의 인덱스로 설정하였다.
let commentOG = document.getElementsByClassName('hljs xml')[i].innerHTML;
let comment = commentOG;
let num1 = comment.indexOf("//");
let num2 = num1 + comment.substring(num1).indexOf("\n");
//만약 num1이 존재한다면
while(num1 != -1){
//주석이 아닌, 'https://'도 같이 변경되어서 링크는 같이 변경되지 않도록 분기했다.
if(comment.substring(num1-1, num1) == ":"){
comment = commentOG;
num1 = comment.indexOf("//", num1 + 33);
num2 = num1 + comment.substring(num1).indexOf("\n");
continue;
}
//시작 인덱스와 종료 인덱스 사이에 span과 style=color, 그리고 font-style:italic을 넣어 색과 기울임을 추가해주었다.
commentOG = comment.substring(0, num1) + "<span style='color:#757575;font-style:italic;'>" + comment.substring(num1, num2) + "</span>" + comment.substring(num2);
//새로운 값으로 초기화
comment = commentOG;
num1 = comment.indexOf("//", num1 + 33);
num2 = num1 + comment.substring(num1).indexOf("\n");
}
//마지막으로 실제 문서의 HTML을 commentOG로 바꾸어준다.
document.getElementsByClassName('hljs xml')[i].innerHTML = commentOG;✔ 문제점
- JS가 적용되지 않는 문제
해당 JS가 적용되지 않는 문제가 있었다. 해당 JS가 홈페이지가 로드된 후에 수동으로 실행해 보았더니 그때는 잘 동작했으며, 이에 페이지에 코드블럭의 CSS가 로드되기 전에 JS가 작동하는게 아닐까라는 가설을 세우게 되었다.
- DOMContentsLoaded
addEventListener()를통해 DOM Content가 로드되면 실행하도록 했다. 하지만DOMContentsLoaded는 stylesheet은 기다리지 않으므로 효과가 없었다.
window.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded');
})- setTimeout
setTimeout()을 통해 충분한 시간을 주고 코드가 실행되도록 했다. 나는 1초로 설정했으며, 잘 동작했다.
setTimeout(function(){
...
}, 1000);✔ 개선방안
- highlight.js가 로드되면 해당 코드가 실행되도록 하기 또는
- highlight.js를 변형하여 스타일링을 바꾸기
사실 HTML이니까 원래 쓰는 주석을 쓰는 게 맞긴 한데 귀찮으니...
또 사실 모든 컨텐츠가 로드된 뒤에 이렇게 후처리로 바꾸는것보단, 처음부터 애초에 스타일링을 바꾸어주는 방법이 훨씬 효율적이고 편한 방법이겠다. 다만, 마크업을 확인해보니 //은 따로 어떠한 div로도 묶여있지 않았으며, 따라서 내가 highlight.js를 손대서 //를 찾아 div로 묶어주는 작업을 하지 않으면 스타일링을 바꿀 수 없겠다는 생각이 들어서 이렇게 진행했다.
다시 생각해보니 어차피 highlight.js에서도 해당 작업이 필요하겠구나. 그래도 페이지가 로드되고 나서 후처리를 하는 방법보단 애초에 생성될 때 스타일링이 적용되어 나오는 것이 의미론적 관점에서도 조금이나마 도움이 되지 않을까 싶다. highlight.js를 한번 들여다 보아야겠다.