티스토리 코드블럭 꾸미기 (열림, 닫힘, 줄바꿈, 스크롤)

티스토리 코드블럭 꾸미기 (열림, 닫힘, 줄바꿈, 스크롤)

 

티스토리 코드블럭에 복사버튼을 넣었는데 복사해야 하는 코드가 깔끔하게 나오지 않습니다. 코드블럭에 코드 줄번호나 줄 바꿈. 스크롤 등을 적용해 주면 훨씬 깔끔하게 보이니 참고해서 수정하시기 바랍니다.

 

 

 

목차

1. 코드블럭 폰트 수정

2. 코드블럭 스크롤 만들기

3. 코드블럭 줄 바꿈, 열기, 닫기 버튼 만들기

4. 코드블럭 줄번호 넣기

 

 

 

 

티스토리 코드블럭 꾸미기

1. 코드블럭 폰트 수정

 

코드블럭을 기본으로 사용하면 폰트가 너무 붙어있기도 하고 글꼴이 이쁘지 않아서 가독성 좋은 폰트로 변경해 주면 좋습니다.

폰트는 블로그 관리 홈에서 '꾸미기> 스킨편집> HTML편집> HTML'로 들어가서 아래코드를 입력해 주면 완료입니다.

 

<!--코드블럭 폰트 시작-->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style>
    pre>code {
        font-family: 'Nanum Gothic' !important; 
        font-size: 14px !important;
    }
</style>
<!--코드블럭 폰트 끝-->

 

위코드를 </head> 바로 위에 입력하시면 됩니다.

폰트는 나눔고딕 폰트입니다. 

 

다른 폰트가 필요하시면 구글폰트사이트에서 다운로드해서 사용하시면 됩니다.

 

 

 

 

 

티스토리 코드블럭 꾸미기

2. 코드블럭 스크롤 만들기

코드가 길어지면 페이지를 많이 차지하기 때문에 스크롤을 넣어주면 깔끔하게 보일 수 있습니다.

 

아래 코드를 복사해서 CSS 맨 아래 붙여 넣기 해주시면 됩니다.

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

 

 

 

 

 

티스토리 코드블럭 꾸미기

3. 코드블럭 줄 바꿈, 열기, 닫기 버튼 만들기

코드가 길어지면 화면에서 한 줄로 계속 늘어지는 경우가 있는데 이런 경우 줄 바꿈 설정을 해두면 한 화면에 보일 수 있어서 포스팅이 깔끔해집니다.

 

아래 코드를 복사해서 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>
<!--코드블럭 언어명,열기,닫기,줄바꿈 끝-->

 

 

 

 

티스토리 코드블럭 꾸미기

4. 코드블럭 줄번호 넣기

코드블럭에 줄번호가 있으면 코드를 해석하거나 누락된 부분을 찾을 때 용이합니다. 가독성은 추가로 얻을 수 있는 점이니 필요하시면 적용하시기 바랍니다.

 

먼저 아래 파일을 다운로드 후 CSS 옆에 파일업로드에 올려줍니다.

linenumberV2.js

0.01MB

 

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>
<!--코드블럭 줄번호 끝-->

 

 

모두 적용하셨으면 아래 이미지처럼 보여지면서 완료됩니다.

코드에 줄번호가 생기고,  닫기 버튼과 줄 바꿈 버튼이 보입니다. 닫아두면 접히고, 열림버튼이 보이게 됩니다.

 

적용하기 전에 비해서 코드를 읽어내기가 훨씬 쉽고 편하게 사용하실 수 있습니다.

 

이상으로 코드블럭 꾸미기 포스팅을 마칩니다.