티스토리 코드블럭 커스터마이징, 폰트 변경방법

티스토리 코드블럭 커스터마이징, 폰트 변경방법

2021. 2. 24. 15:27ㆍ𝖲𝖾𝗍𝗍𝗂𝗇𝗀𝗌

1. 코드블럭을 커스터마이징하는 HTML 코드

원하는 코드블럭 테마 highlightjs.org/에서 가져오고, 아래 코드를 HTML의 <head></head> 사이에 붙여넣는다.

(폰트 커스터마이징, 스크롤 생성, 라인넘버 기능 포함)

<!-- 색상 등의 css파일  -->
<link
  rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/styles/atom-one-light.min.css"
/>

<!-- 하이라이트 적용  -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
</script>

<!-- 코드블럭 폰트 종류&크기 변경  -->
<link
  href="https://fonts.googleapis.com/css?family=Source Code Pro"
  rel="stylesheet"
/>
<style>
  code {
    padding: 0.25rem;
    border-radius: 5px;
    font-family: 'Source Code Pro' !important;
    font-size: 13.5px !important;
  }
  pre > code {
    margin: 1rem auto;
    white-space: pre;
    max-width: 1000px;
    /* 코드블럭 스크롤 생성 */
    overflow: auto !important;
  }
</style>

<!-- 라인 넘버 설정 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>
  hljs.initLineNumbersOnLoad();
</script>

테마 변경시에는 아래 표시된 부분에 해당 테마명을 붙여넣으면된다

이때, 대문자는 소문자로, 띄어쓰기는 '-'를 반드시 넣어줘야한다

2. 코드블럭을 커스터마이징하는 CSS코드

기존에는 모든 테이블에 영향을 받아서 UI상에서 표형태로 나타나게 된다.

따라서 아래 코드처럼 자식인 테이블이라 지정하고, 그 경우에만 속성을 사용하도록 바꿔준다.

.entry-content > table {
    width:100%;
    margin-bottom: 22px;
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.9375em;
    line-height: 1.5714;
    color: #666;
}
.entry-content > table thead th {
    padding:7px 0 11px;
    border-left: 1px solid #e6e6e6;
}
.entry-content > table tbody td {
    padding:7px 0 11px;
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}

다음은 라인넘버 꾸미기

라인넘버에 색상을 지정해주지 않으면 아마 검정색으로 보일텐데,

코드와 헷갈릴 수 있기때문에 그레이 색상으로 바꿔주었다.

그리고 들여쓰기 필수!!! text-indent: 1rem; 이부분이 들여쓰기 속성을 말한다.

/* for block of numbers */
.hljs-ln-numbers {
    text-align: center;
    color: #ccc;
    vertical-align: top;
    padding-right: 5px;
}
 
/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
    text-indent: 1rem; 
}

2. 본문 글꼴 변경

블로그 제목, 본문 내용 글꼴은 '눈누'(noonnu.cc/)라는 사이트에서 가져왔다

아래 코드를 CSS에 붙여넣는다.

@font-face {
    font-family: 'ON-IGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eleven@1.0/ON-IGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}