(티스토리) 코드블럭 - 언어명 표시 / 접기 / 펼치기

서근

2021. 4. 16. 17:51

QUOTE THE DAY

이번에는 티스토리에서 코드블럭을 사용할때 상단에 어떤 언어를 사용하고 있는지를 확인할 수 있는 스크립트를 구현하고 적용하는 방법에 대해 알아보겠습니다.

만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스

seons-dev.tistory.com

코드블럭 언어명 표시 및 접기 버튼 추가

사용법은 아주 간단합니다. 아래 코드를 </body> 바로 위에 <script> </script> 로 감싸서 넣어주기만 하면 됩니다.

사용방법

<html>
  <header>
        ...
       </header>
 
   <body>
       
       <!--이곳에 추가-->
       
        </body>
 </html>

코드

<!--코드블럭 언어표시-->
<script>
  $("pre[data-ke-type='codeblock']").each(function() {
    var showTxt = "펼치기", hideTxt = "접기", pre = this;
    var code = this.dataset.keLanguage;
    var $labelDiv = $("<div>");
    var $labelBtn = $("<span>");
    var $wrapBtn = $("<label><input type='checkbox'>");
    var $code = $(this).find("code").first();
    var codeHtml = $code.html();
    if (codeHtml.search('&lt;hide/&gt;\n') > -1 || pre.dataset.hide) {
      $code.html(codeHtml.replace('&lt;hide/&gt;\n',''));
      $labelBtn.text(showTxt);
      $wrapBtn.hide();
      $(this).hide();
      $(this).attr('data-hide', 1);
    } else {
      $labelBtn.text(hideTxt);
      $(this).show();
    }
    $labelBtn.on("click", function() {
      var txt = $(this).text();
      $(this).text((txt==showTxt)?hideTxt:showTxt);
      if (txt==showTxt) {
        $wrapBtn.show();
        $(pre).removeAttr('data-hide');
      } else {
        $wrapBtn.hide();
      }
      $(pre).toggle();
    });
    $labelDiv.on("click", function() {
      $labelBtn.triggerHandler("click");
    });
    $labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
    var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
    $(this).before($codeLabel);
  });
</script>

스타일 설정

이제 사용자의 스킨에 맞게 코드블럭 언어창의 색을 변경해줄 수 있습니다. 아래와 코드를 CSS에 넣어주세요.

/*코드블럭 언어 표시*/
  .codeLabel {
    position: relative;
    margin: 10px 0 0;
  }
  .codeLabel * {
    user-select: none;
    cursor: pointer;
    font-size: 0.7em;
  }
  .codeLabel > div {
    display: inline-block;
    color: #ccc;
    text-transform: uppercase;
    background-color: #282c34;
    padding: 6px 10px;
  }
  .codeLabel span {
    color: #9c9c9c;
    margin: 10px;
  }
   .codeLabel *:hover {
    color: #ff5544;
  }
  .codeLabel span ~ label input {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

.codeLabel * : 폰트 사이즈 변경

.codeLabel > div : 언어표시창 배경색 및 글씨 색 변경

.codeLabel span : 숨김 / 펼치기 색상 변경

TIP

접힌 상태 유지 방법 1
이미 접힌 상태로 나오길 원하면 코드블럭에 소스 입력 시 제일 첫 줄에 <hide/>라고 넣고 그다음 줄부터 내용을 넣으시면 됩니다.

(또한, 페이지 로딩될때 아예 안 보이게 스킨의 css에서 pre를 찾아 { display: none; }을 추가해주시길 추천합니다.)

// <hide/> 를 맨위에 추가하여 코드블럭을 접는다.
    
    <---- 이곳에 추가
     
<hide/>

 VStack {
   Text("서근블로그")
 }

TIP

접힌 상태 유지 방법 2
글 작성 시 html에서 해당 코드 블록의 <pre> 태그에 <pre data-hide=1>을 추가해주면 동일하게 사용할 수 있습니다.

읽어주셔서 감사합니다🤟

저작자표시

'FRONT-END > CSS' 카테고리의 다른 글

(티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼) (12)	2022.03.20
(티스토리) 코드블럭에 클립보드로 복사 버튼 추가 (7)	2022.01.21
(티스토리) 본문에 형광펜 효과 주는 방법 (3)	2021.04.15
(HTML/CSS/Javascript) 코드 정리해주는 사이트 모음 (0)	2021.04.15
(티스토리) 스크롤시 부드럽게 이동하기 (4)	2021.04.14