[Tistory] Code block Custom - 코드 블럭 언어명 표시, 접기 버튼

[편집 전 필독]

 

티스토리 스킨 편집의 기초 상식

[Tistory] 티스토리 스킨 편집의 기초 - HTML, CSS, JavaScript

 

---

 

[언어명 표시 및 접기 버튼 추가]

 

1. HTML 코드 수정

 

<!--Code Block Hader(언어명) 적용 시작-->
<!-- 코드 블럭 언어표시 스크립트 -->
<script>
  // pre 요소 중 data-ke-type 속성이 'codeblock'인 각각의 요소에 대해 작업
  $("pre[data-ke-type='codeblock']").each(function() {
    var showTxt = "펼치기", hideTxt = "접기";  // 버튼 텍스트 지정
    var pre = this;  // 현재 pre 요소 저장
    var code = this.dataset.keLanguage;  // 코드 언어 가져오기
    var $labelDiv = $("<div>");  // 레이블을 담는 div 요소 생성
    var $labelBtn = $("<span>");  // 버튼을 담는 span 요소 생성
    var $wrapBtn = $("<label><input type='checkbox'>");  // 래핑을 위한 label과 input 생성
    var $code = $(this).find("code").first();  // pre 내의 첫 번째 code 요소 선택
    var codeHtml = $code.html();  // code 요소의 내용 가져오기

    // 코드 내에 '&lt;hide/&gt;\n' 문자열이 있는지 또는 data-hide 속성이 있는지 검사
    if (codeHtml.search('&lt;hide/&gt;\n') > -1 || pre.dataset.hide) {
      $code.html(codeHtml.replace('&lt;hide/&gt;\n',''));  // 코드 내의 '&lt;hide/&gt;\n' 문자열을 제거
      $labelBtn.text(showTxt);  // 버튼 텍스트를 '펼치기'로 변경
      $wrapBtn.hide();  // 래핑 버튼 숨기기
      $(this).hide();  // pre 요소 숨기기
      $(this).attr('data-hide', 1);  // data-hide 속성 추가
    } else {
      $labelBtn.text(hideTxt);  // 버튼 텍스트를 '접기'로 변경
      $(this).show();  // pre 요소 보이기
    }

    // 레이블 버튼 클릭 시 이벤트 핸들링
    $labelBtn.on("click", function() {
      var txt = $(this).text();  // 버튼 텍스트 가져오기
      $(this).text((txt==showTxt)?hideTxt:showTxt);  // 버튼 텍스트 변경
      if (txt==showTxt) {
        $wrapBtn.show();  // 래핑 버튼 보이기
        $(pre).removeAttr('data-hide');  // data-hide 속성 제거
      } else {
        $wrapBtn.hide();  // 래핑 버튼 숨기기
      }
      $(pre).toggle();  // pre 요소 토글 (보이기/숨기기)
    });

    // 레이블 div 클릭 시 버튼 클릭 이벤트 트리거
    $labelDiv.on("click", function() {
      $labelBtn.triggerHandler("click");
    });

    // 레이블 div에 코드 정보 추가
    $labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);

    // 스타일이 적용된 레이블과 버튼을 담는 div 요소 생성 후 pre 요소 이전에 추가
    var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
    $(this).before($codeLabel);
  });
</script>
<!-- 코드 블럭 언어표시 스크립트 끝 -->
<!--Code Block Hader(언어명) 적용 끝-->

위 코드를 </body> 위에 삽입

 

2. CSS 코드 삽입

 

/*Code Block Hader(언어명) 적용 시작*/
/* 코드블럭 언어 표시 스타일 */

/* 코드 블럭 레이블 컨테이너 */
.codeLabel {
    position: relative;  /* 요소를 상대적인 위치로 설정하여 배치합니다. */
    margin: 10px 0 0;    /* 위쪽 여백을 10px, 아래와 좌우 여백을 0으로 설정합니다. */
}

/* 모든 내용에 대한 선택 금지 및 커서 설정 */
.codeLabel * { // 폰트 사이즈 변경
    user-select: none;   /* 사용자의 텍스트 선택을 금지합니다. */
    cursor: pointer;     /* 커서 모양을 포인터로 설정하여 클릭 가능한 요소임을 나타냅니다. */
    font-size: 0.7em;    /* 요소 내용의 글꼴 크기를 0.7em으로 줄입니다. */
}

/* 레이블 및 디자인 요소 컨테이너 */
.codeLabel > div { // 언어 표시창 배경색 및 글씨 색 변경
    display: inline-block;   /* 요소를 인라인 블록으로 설정하여 다른 요소와 나란히 배치합니다. */
    color: #ccc;             /* 텍스트의 색상을 회색(#ccc)으로 설정합니다. */
    text-transform: uppercase;   /* 텍스트를 모두 대문자로 변환하여 표시합니다. */
    background-color: #282c34;  /* 배경 색상을 어두운 회색(#282c34)으로 설정합니다. */
    padding: 6px 10px;         /* 안쪽 여백을 6px 위쪽/아래쪽, 10px 좌우로 설정합니다. */
		border-top-left-radius: 10px;    /* 왼쪽 상단 모서리 둥글게 반지름 설정 */
    border-top-right-radius: 10px;   /* 오른쪽 상단 모서리 둥글게 반지름 설정 */
}

/* 보조 정보에 대한 스타일 */
.codeLabel span { // 숨김/펼치기 색상 변경
    color: #9c9c9c;   /* 텍스트의 색상을 연한 회색(#9c9c9c)으로 설정합니다. */
    margin: 10px;      /* 위아래 여백을 10px으로 추가하여 다른 요소와의 간격을 설정합니다. */
}

/* 호버 시 색상 변경 */
.codeLabel *:hover {
    color: #ff5544;   /* 마우스 호버 시 텍스트의 색상을 빨간색(#ff5544)으로 변경합니다. */
}

/* 스타일이 적용된 요소 뒤에 오는 input 요소 스타일 변경 */
.codeLabel span ~ label input {
    height: auto !important;   /* 높이를 자동으로 설정하되 중요성을 강조합니다. */
    padding: 0 !important;     /* 안쪽 여백을 0으로 설정하되 중요성을 강조합니다. */
    margin: 0 !important;      /* 좌우 여백을 0으로 설정하되 중요성을 강조합니다. */
}
/*Code Block Hader(언어명) 적용 끝*/

 

CSS 가장 마지막 라인에 위 코드 추가

 

3. 적용 결과