티스토리 | 코드블럭 한번에 꾸미기 part 2(폰트수정, 줄번호, 열기 및 닫기 버튼, 스크롤)

 

 

 

코드블럭 한 번에 꾸미기 #2

이번에는 코드블럭에 '폰트수정, 줄번호, 열기 및 닫기 버튼, 세로 스크롤'을 적용하는 법을 알아보겠습니다.

 

블로그를 시작하며 글을 작성할 때, 코드 블럭이 너무 단조로워 보인다는 생각이 들어, CSS와 HTML을 잘 모르지만 여기저기 블로그들을 참고하여 코드 블럭을 꾸미기 위한 다양한 방법을 모았습니다. 이 글에서는 제가 적용한 코드들을 공유하고자 합니다.

 

1. 코드블럭 '폰트'수정

1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다.

---

2. 아래 코드를 복사 후 </head> 위에 붙여 넣기를 해줍니다.

<!--코드블럭 폰트 시작-->
<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>
<!--코드블럭 폰트 끝-->

 

 

제 코드의 폰트는 구글의 나눔고딕입니다.

다른 폰트가 필요하시다면 구글폰트 사이트에 가셔서 다운로드하시기 바랍니다. (구글 로그인은 필수입니다.)

https://fonts.google.com/?subset=korean&noto.script=Kore

Google Fonts

 

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

이번에는 아래처럼 코드블럭에 '열기버튼 및 닫기버튼' 그리고 '줄 바꿈 버튼'을 적용하는 방법에 대해 알아보도록 하겠습니다.

닫기 버튼 및 줄 바꿈 버튼을 눌러보세요!

테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지, 테스트 페이지,

---

1. 먼저 아래의 코드를 복사 후 '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;
  }
/* 코드블럭 언어명,열기,닫기,줄바꿈 시작 끝*/

 

---

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

 

 

728x90

 

3. 코드블럭 '가로, 세로 스크롤' 만들기

코드의 내용이 길어질 경우 페이지를 너무 차지하는 경우가 발생해 메모장으로 코드를 올리곤 했는데, 이럴 때 가로 800 px 세로 600px 넘어가면 코드블럭에 스크롤로 처리가 되어 깔끔해 보입니다.

 

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

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

 

 

4. 코드블럭 '줄번호' 적용하기

마지막으로 가독성과 이해도를 높이기 위해 코드블럭 '줄번호'를 넣어보도록 하겠습니다.

 

1. 아래 linenumberV2.js 파일을 다운로드 후 '파일업로드'에 업로드해줍니다.

linenumberV2.js

0.01MB

 

---

 

2. 아래 코드를 복사해 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;
}
/* 코드블럭 줄번호 끝 */

 

---

 

3. 마지막으로 아래 코드를 복사해 </body> 위에 붙여 넣기를 해주면 됩니다.

 

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

 

 

마무리

이렇게 코드블럭 꾸미기가 완료되었습니다.

코드에 대해서 1도 모르는 제가 이쁘게 꾸며둔 코드블럭이 부러워 여기저기 끌어모은 코드들로 비슷하게는 만든 듯합니다.

더 이쁜 코드들은 검색해 보시면 더 많이 있으니 잘 찾아보시고, 원하는 코드들을 적용해 보시기 바랍니다.

 

• [˙티스토리 꾸미기] - 티스토리 I 코드블럭 한 번에 꾸미기 #1(복사 버튼, 하이라이트)

티스토리 I 코드블럭 한번에 꾸미기 #1(복사 버튼, 하이라이트)

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"