[티스토리] JavaScript 소스코드 하이라이트 추가하기

 

문제점

 

해당 블로그는 티스토리에서 제공해주는 플러그인 코드 테마를 사용하고 있습니다.

 

 

하지만 JavaScript 코드 블록에 소스코드를 입력하면 메서드 부분이 똑같은 검은색이어서 가독성을 해치는 것 같았습니다.

 

예시

 

highlight.js를 사용해보기도 하였고 다른 방법을 찾아보았지만 만족하는 코드 하이라이트를 찾지 못하였습니다.

결국 나온 결론이 " 구현되어있는 하이라이트 원하는 기능에 추가를 시키자! "였습니다.

 

해결

먼저 하이라이트 된 코드의 색깔 스타일을 추가했습니다.

 

css 코드

 

그 후 선언된 하이라이트 코드 블록 모두를 가져와 정규식으로 메서드인 코드만을 구분했고 스타일을 적용시켰습니다.

 

 $target
    .html(html.replace(/(\.[A-z]+\()/g, `<span class="hljs-method">$1</span>`))
    .html(html
      .replace(/(\(\<\/span>)/g, `</span>(`)
      .replace(/(<span class="hljs-method">\.)/g, `.<span class="hljs-method">`))

 

 

하지만 그대로 코드를 실행시키면 기존의 하이라이트 코드와 겹쳐 제대로 동작이 안되기 때문에 약간의 딜레이를 주고 코드를 실행시켜 주었습니다.

 

setTimeout(() => {
  $(`.hljs`).each((i, el) => {
    const $target = $(el);
    const html = $target.html();

  $target
    .html(html.replace(/(\.[A-z]+\()/g, `<span class="hljs-method">$1</span>`))
    .html(html
      .replace(/(\(\<\/span>)/g, `</span>(`)
      .replace(/(<span class="hljs-method">\.)/g, `.<span class="hljs-method">`))
  });
}, 40);

 

결과

원하는 대로 메서드 부분에 색이 입혀져 가독성이 더 좋아진 느낌이 듭니다.

 

아래와 같은 변수가 많이 사용되는 상황에서도 getTime 같은 메서드가 눈에 확 들어오는 것 같습니다.