본문 바로가기

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

by Galam. 2023. 3. 23.

티스토리 코드블럭 꾸미기

 
 
 

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

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

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

📌 알림 

웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

 [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

더보기

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

코드 수정 주의사항

 

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

코드 수정 주의사항
코드 수정 주의사항

 

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

 

티스토리 코드블럭 꾸미기

 

제 코드의 폰트는 D2Coding 코딩체 입니다.

 

2024.11.30-티스토리 북클럽 | 코드블럭에 D2Coding 코팅체 적용하기

 

티스토리 북클럽 | 코드블럭에 D2Coding 코팅체 적용하기

코드블럭에 D2 Coding 코팅체 적용하기개발자들 사이에서 한글과 영문의 조화가 잘 되어 평이 좋은 네이버 D2Coding 폰트를 코드 블록에 적용해 보겠습니다. 모든 폰트를 바꾸는 것은 아니며, 코드

galam.tistory.com

728x90

 

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

 

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>
<!--코드블럭 언어명,열기,닫기,줄바꿈 끝-->

 

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

 

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; /* 코드블럭 모서리 하단 둥글게 */
}
/* 코드블럭 스크롤 끝 */

 

2. 위 코드가 정상적으로 적용되지 않을 경우 아래 코드를 사용해 보세요.

/* 코드블럭 스크롤 */
pre {
    margin: 1rem auto;
    white-space: pre;
    max-height:600px; 
    overflow:auto !important;
    border-radius: 0px 0px 10px 10px; /* scroll setting */
}
/* 코드블럭 스크롤 끝 */

 

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

 

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

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

 

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

linenumberV2.js
0.01MB

 

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

 

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;
}
/* 코드블럭 줄번호 끝 */

 

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

 

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

 

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

 

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

 

5. 코드블럭 '라인 간격' 조절(2024.02.08 추가)

위의 코드를 모두 입력하면 구버전의 북클럽 스킨에서는 코드블럭이 정상적으로 작동하지만, 최신 버전에서는 1px의 라인이 생기고 코드가 코드번호와 겹치는 현상이 발생합니다.

코드블럭 꾸미기

 

마지막으로 이 문제를 해결하는 방법에 대해 알아보겠습니다.

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

코드블럭 꾸미기

 

2) CSS 탭에서 [Ctrl]+[F]키를 이용해 #article-view pre code.hljs {을 찾아줍니다.

#article-view pre code.hljs {

코드블럭 꾸미기
▲ 수정전

 

3) #article-view pre code.hljs {의 코드를 아래의 코드로 바꿔줍니다.

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 14px;
/*padding: 20px;
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  border: solid 1px #ebebeb;*/
  line-height: 1.71;
  overflow: auto;
}

코드블럭 꾸미기
▲ 수정후

 

4) 미리보기로 확인 후 [적용]을 클릭하여 '저장'합니다.

코드블럭 꾸미기

728x90

 

마무리

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

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

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

 

 

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

코드블럭 한 번에 꾸미기 #1 이번에는 코드블럭에 복사 버튼, 하이라이트, 줄번호, 세로 스크롤바, 열기 및 닫기 버튼, 폰트 중 '복사 버튼 및 하이라이트' 를 적용하는 법을 알아보겠습니다. 아래

galam.tistory.com

마감로고

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

 
반응형
저작자표시 비영리 변경금지

'▸티스토리 이야기 > 티스토리 꾸미기' 카테고리의 다른 글

티스토리 댓글 작성 시 로그인 풀림 및 2차 도메인 댓글 문제 임시 해결 방법  (11) 2023.05.16
티스토리 북클럽 스킨 | "h1 태그가 2개입니다." 문제 원인과 해결 방법  (27) 2023.04.27
티스토리 | 코드블럭 한번에 꾸미기 part 1(복사 버튼, 하이라이트)  (15) 2023.03.23
티스토리 I 마우스 오버시 썸네일이 움직이는 애니메이션 효과 만들기  (2) 2023.03.21
티스토리 북클럽 스킨 | 태그(Tag) 숨기는 방법  (0) 2023.03.14
top

티스토리툴바