티스토리 꾸미기 :: 줄번호,스크롤,열기 및 닫기 버튼

 

 

 

≣ 목차

 

 

 

 

저번 시간에 코드블럭 복사 버튼에 이어서 줄번호, 스크롤 버튼 열기 및 닫기 버튼을 만들어 보겠습니다.

 

 

코드 블럭 꾸미기

 

코드 블럭 '열기','닫기' 및 줄바꿈 버튼 만들기

 

관리자 홈 > html 편집 > CSS 탭에서 아래 코드를 맨아래에 붙여 주면 됩니다.

 

/* 코드블럭 언어명,열기,닫기,줄바꿈 시작 */
  .codeLabel {
    position: relative;
    margin: 10px 5px 0px 0px;
  }
  .codeLabel * {
    user-select: none;
    cursor: pointer;
    font-size: 14px; /* 코드명 크기 */
  }
  .codeLabel > div {
    display: inline-block;
    color: #3fc9ff; /* 코드명 색상 */
    font-weight: Bold; /* 코드명 굵게 */
    text-transform: uppercase;
    background-color: rgb(40, 44, 52);
    padding: 6px 15px;
    border-radius: 10px 10px 0px 0px; /* 코드명 테두리 상단 둥글게 */
  }
  .codeLabel span {
    color: #555;
    margin: 0 0 0 10px;
  }
  .codeLabel span ~ label {
    position: absolute;
    right: 0;
    top: 6px;
  }
  .codeLabel span ~ label input {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
/* 코드블럭 언어명,열기,닫기,줄바꿈 시작 끝*/

 

두번째 아래 코드는 복사하여 html 탭의 </body> 윗 부분에 붙여넣기 해줍니다.

 

 

 

<!--코드블럭 언어명,열기,닫기,줄바꿈 시작-->
<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' checked='checked'> 줄바꿈 </label>");
    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");
    });
    $wrapBtn.find("input").first().on("click", function() {
      $(pre).css({'white-space': (this.checked)?'pre-wrap':'pre', 'word-wrap': (this.checked)?'break-word':'normal'});
      if (typeof setLnHeight === 'function') {
        setLnHeight(pre);
      }
    });
    $labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
    var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
    $(this).before($codeLabel);
  });
  $(window).on("load", function() {
    if ($('code').length) {
			var col = window.getComputedStyle($('code').first()[0], null).getPropertyValue("color");
			var bgc = window.getComputedStyle($('code').first()[0], null).getPropertyValue("background-color");
      $('.codeLabel div').css({'background-color': bgc});
    }
  });
</script>
<!--코드블럭 언어명,열기,닫기,줄바꿈 끝-->

 

 

'가로', '세로' 스크롤 만들기

코드가 길어질 때 보기가 힘든데 가로 800 세로 600으로 지정해 놓으면 보기가 훨씬 편합니다.

 

아래 코드를 복사하여 CSS 탭 맨 아래에 붙여넣어주세요.

 

/* 코드블럭 스크롤 */
code {
    white-space: pre;
    max-width: 800px; /* 가로 넓이 */
    max-height: 600px; /* 세로 높이 */
    overflow: auto !important;
    border-radius: 0px 0px 10px 10px; /* 코드블럭 모서리 하단 둥글게 */
}
/* 코드블럭 스크롤 끝 */

 

 

 

줄번호 넣어주기

가독성을 높여주기 위해 코드블럭에 줄번호를 넣어줘보겠습니다.

 

linenumberV2.js

0.01MB

 

 

 

html 편집의 파일업로드 탭에서 linenumberV2.js 파일을 업로드 해줍니다.

 

그 후 아래 코드를 css 탭의 맨 아래 붙여넣어줍니다.

/* 코드블럭 줄번호 */
pre[data-ke-type='codeblock'] {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 17px;
}
pre[data-ke-type='codeblock'] > code {
  display: block;
  overflow-x: auto;
  font-family: consolas, monospace;
}
pre[data-ke-type='codeblock'] > code.lnWrap {
  position: relative;
  padding-left: 50px; /* 40px; 코드 여백 */
}

pre[data-ke-type='codeblock'] > code .ln[data-ln]::before,
pre[data-ke-type='codeblock'] > code .ln[data-ln--before]::before {
  content: attr(data-ln);
}

pre[data-ke-type='codeblock'] > code .ln,
pre[data-ke-type='codeblock'] > code .lnBorder {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  display: inline-block;
  width: 45px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

pre[data-ke-type='codeblock'] > code .lnBorder {
  z-index: 1;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-right-color: #ccc;
}

pre[data-ke-type='codeblock'] > code .ln {
  z-index: 0;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
pre[data-ke-type='codeblock'] > code .lc {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding-left: 10px;
}
pre[data-ke-type='codeblock'] > code.noline .lc {
  padding-left: 0;
}

pre[data-ke-type='codeblock'] > code .ln.marker {
  background-color: rgba(40, 70, 100, 1);
  background: linear-gradient(to left, rgba(40, 70, 100, 1) 80%, transparent);
  color: white !important;
}

pre[data-ke-type='codeblock'] > code .colBox {
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-right: 4px;
  outline: 1px solid grey;
}

pre[data-ke-type='codeblock'] > code .hover, pre[data-ke-type='codeblock'] > code .clicked {
  outline: solid 1px gold;
}
pre[data-ke-type='codeblock'] > code .solo:hover {
  color: red;
}
/* 코드블럭 줄번호 끝 */

 

 

그 후 아래 코드를 html 탭의 </body> 윗 부분에 붙여넣기를 해줍니다.

<!--코드블럭 줄번호 시작-->
<script src="./images/linenumberV2.js"></script>
<!--코드블럭 줄번호 끝-->

 

 

마무리

 

티스토리 코드블럭 꾸미기를 알아 봤는데요. 공부가 정말 끝이 없는 것 같네요. css, html 소스공부도 열심히 해봐야겠습니다.

 

2025.08.18 - [일상/티스토리 꾸미기] - 티스토리 꾸미기 :: 코드블럭 복사버튼 만들기

티스토리 꾸미기 :: 코드블럭 복사버튼 만들기