[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자.

현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에 해당 소스코드가 어떤 언어인지 표시가 되어있다.

필자와 같이 해당 기능을 추가해도록 해보자.

CSS 추가

우선 아래 CSS부터 추가 해주자.

.highlightTopDiv  {
    /*텍스트 관련*/
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;    /*대문자로 표시해주기*/
    /*색상 관련 - 각자 자기가 결정한 스킨에서 색을 추출하길 추천함*/
    color: #FFB871;
    background-color: #222222;
    /*그림자 효과 관련*/
    margin-left: -10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /*박스 관련*/
    margin-top: 10px;
    padding: 10px;
    position: relative;
  }

그리고 보통(나만 그런지 확실치 않지만) 티스토리에는 아래와 같이 코드 블럭 관련 CSS가 있다.

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 13px;
  padding: 10px;
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;  
  line-height: 1.71;
  overflow: auto;
  white-space: pre-wrap; 
  word-break: break-word;
}

필자가 폰트사이즈는 확실히 건들었다는걸 기억하고 있는데....

나머지는 뭘 추가했는지 지웠는지 기억을 못하는중이다.. ㅠㅠ

.article-view pre {    
    font-size: 16px;    
    white-space: pre-wrap;
    margin: 0;
  }

마지막으로 pre 관련 css에서 margin 0을 추가시켜주었다.

마찬가지로.. 나머진 뭘 수정했는지 확실히 기억을 못하고 있다...

HTML 추가

<script>
    //화면상의 pre를 모두 불러서 아래 코드를 실행
    $("pre").each(function() {
      var pre = this;             //PRE
      var name = this.className;  //PRE Class이름을 가져온다.(PRE class이름은 곧 사용하는 코드이름)
      
      if(name == "nohighlight")
      {
        //highlight.js에서 nohighlight속성은 아무것도 지원하지 않기 때문에
        //필자도 nohighlight일때는 아무것도 해주지 않는다.
      }
      else if(name == "plaintext")
      {
        //highlight.js에서 plaintext속성은 일반텍스트로 표현할때 쓰기때문에
        //라벨을 TEXT로 넣어줄까 말까 고민하다가 그냥 아무것도 해주지 않기로 결정했다.
        //TEXT라벨을 넣고 싶으면 아래 주석을 풀어주기만 하면 된다.
        //var $highlightTopDiv = $('<div class="highlightTopDiv">').text("TEXT");
          //$(this).before($highlightTopDiv);
      }
      else if(name == "")
      {
        //class가 지정되있지 않을때 highlight.js의 언어 자동감지를 사용한다는 뜻인데
        //자동감지를 할때 확인해보니 highlight.js에서 Class를 자동으로 입력해준다.
        //그래서 class가 ""일때는 highlight.js가 제대로 작동하지 않았을경우인데
        //아직 확인해본적이 없어서 일단 공란으로 놔두기로 했다.
      }
      else
      {
        //위의 경우를 제외하고 class가 지정되었을때 highlightTopDiv이라는 Div를 생성후
        //해당 코드를 표시해준다. (위 Css에서 highlightTopDiv 디자인을 미리 만들어두었다.)
        var $highlightTopDiv = $('<div class="highlightTopDiv">').text(name);
          $(this).before($highlightTopDiv);
      }
    });   
</script>

위 스크립트를 HTML소스 제일 아래 </body> 바로 위에 추가시켜주면 된다.

주의사항

소스강조가 아닌 그냥 기본 PRE를 사용할때 class에 "nohighlight"를 꼭 적어야 따로 충돌없이 PRE가 정상적으로 표현됩니다.

(혹시 제대로 적용이 안되거나 문제가 생길때 댓글로 물어보시면 최대한 빠르게 답변해드리겠습니다.)

(2025/01/09 기준 최소 6개월은 백수예정이라 바로 답변 가능함..)

관련글

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

[Blog] highlight.js 설치하기(티스토리에 설치하기)

[Blog] highlight.js 사용하기(기능확인 및 HTML로 사용하기)

[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가)

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome