티스토리 코드블록 커스텀 하기/마크다운처럼 단어블록/내 블로그 테마 설정

내 블로그를 방문해주신 분이 블로그 테마와 코드부분이 마음에 든다고 설정 방법을 물어보셨다.

누추한 곳에 . . . 귀한분이 . . 감사합니다 . .

하지만 설정을 한지 꽤 된 터라 자세하게 기억이....🥲 최대한 기억을 더듬어 작성해본다.

1. 사용중인 테마

BookClub 을 커스텀해서 사용중!

2. Highlights 라이브러리 추가

태그 내부에 코드블록 테마를 바꿔줄 highlights 라이브러리를 추가한다.

아래 링크에서 데모를 확인해보고, 마음에 드는 테마를 정한다.

나는 안드로이드스튜디오가 익숙해 안스로 정했다.

androidstudio 를 지우고 원하는 테마 이름을 적으면 된다.

이름 적어줄때 전부 소문자여야하고, 특수문자 없이 적어줘야했던걸로 기억이 난다. (상관없나..?😅)

https://highlightjs.org/static/demo/

highlight.js demo

highlightjs.org

<head>
    <title>띠오니블로그</title>
    ...
    ...
    <link rel="stylesheet" href="./style.css">
    <script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
    <!-- 여기서부터 -->
    <link rel="stylesheet"  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/androidstudio.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
    <script>hljs.initLineNumbersOnLoad();</script>
    <!-- 여기까지 -->
    <style type="text/css">
    ...
    ...
</head>
<body>
...

3. CSS 설정

1) Font 폰트 설정

무료폰트를 다운받을 수 있는 곳은 대표적으로 google폰트가 있는데

구글링 하다가 알게된 눈누 라는 사이트.

특이한 폰트도 많아서 블로그 글 말고도 다른 곳에도 활용도가 높을 것 같다.

https://noonnu.cc/

눈누

상업용 무료한글폰트 사이트

noonnu.cc

폰트 아무거나 들어가서 보면 웹폰트로 사용이 있는데, 이걸 복사해서 css Web Font Load 영역에 적어주면 된다.

이제 css 원하는 곳에서 font: 'GmarketSansMedium' 이런식으로 써주면 된다.

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IM_Hyemin-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'D2Coding';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ****** 블로그 제목 영역 스타일 ****** */
#header h1 {
  padding: 23px 0 ;
  font-family: 'IM_Hyemin-Regular';
  font-weight: 800;
  font-size: 1.75em;
  line-height: 32px;
  letter-spacing: -0.2px;
  color: #333;
}


/* ******** [참고] 게시물 영역은 .entry-content 입니다. 
	게시물의 필요한 각 태그에 속성을 추가해주면 됩니다. ********** */
.entry-content h1 {
	...
    font-family: 'GmarketMedium',
    ...
}

.entry-content h2 {
	...
    font-family: 'GmarketMedium',
    ...
}

.entry-content p {
	...
    font-family: 'GmarketLight',
    ...
}

2) 단어블록 css 설정

이렇게 보이는 단어블록을 만들수 있다. (이건 약간 야매인듯..)

단어블록(?) 커스텀을 위해 css 맨 아래에 복붙한다.

이게 소스코드를 적는 코드블록과 다른 점은

이건 p태그 내에 <code>이고, 소스코드의 <code>는 <pre> 태그 내부에 있어 소스코드에는 영향이 가지 않는다.

근데 문제는 기본모드에서는 적용시킬 수 없어서

마크다운 모드에서 `단어` 로 작성하거나

html 모드에서 <p><code>단어</code></p> 이렇게 작성해야 한다. ㅠ

마크다운 스타일을 좋아하는 나로서 약간 티스토리는 최적화되어있지 않아 불편한 점이 꽤 있다.

code {
  white-space: pre;
  max-width : 850px;
  max-height: 600px;
  overflow: auto !important;
}

/* 본문 내 단어블록 */
p > code {
  background : #ebebeb;
  padding : 6px 6px 4px 6px;
  margin: 0 1px 2px 1px; 
  border-radius : 9px;
  font-size: 0.94em;
  line-height: 2;
  font-family: 'GmarketSansMedium';
  color: #FF27AA;  /* 핑크색 */
}

/* li 내에서 단어블록 사용할 때 */
ul > li > code {
  background : #ebebeb;
  padding : 6px 6px 4px 6px;
  margin: 0 1px 2px 1px; 
  border-radius : 9px;
  font-size: 0.94em;
  font-family: 'GmarketSansMedium';
  line-height: 2;
  color: #FF27AA;  /* 핑크색 */
}

/* li 내에서 단어블록 사용할 때 */
ol > li > code {
  background : #ebebeb;
  padding : 6px 6px 4px 6px;
  margin: 0 1px 2px 1px; 
  border-radius : 9px;
  font-size: 0.94em;
  font-family: 'GmarketSansMedium';
  line-height: 2;
  color: #FF27AA;   /* 핑크색 */
}

3) highlight css 설정

코드블록 테마에 추가적으로 커스텀을 하고싶을 때 css 맨 아래에 복붙해서 수정해주면된다.

/* for block of numbers : 코드줄수 숫자 스타일 */
.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  color: #f09;
  border-right: 0px solid #CCC;
  vertical-align: bottom;
  padding-right: 50px;
  font-size: 12.5px;
  font-family: 'D2Coding';
  width: 30px;
}
 
/* your custom style here */
.hljs-ln td.hljs-ln-code {
  padding-left: 10px;
  line-height: 1.6;
}
 
/* for block of code */
.hljs-ln-code {
  vertical-align: center;
  padding-left: 50px;
  font-size: 13.5px;
  font-family: 'D2Coding';
}

* 참고

종종 코드가 막 가운데 정렬이 되거나 , 테이블 형태로 되어버리는 경우가 있는데

테이블 속성과 겹쳐서 그런듯 하다.

.entry-content table 이렇게 된 걸, .entry-content > table 로 수정해준다.

/* 코드 블럭 이상하게 나오는 것 > 처리 */
.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;
}

이것들이 내가 설정했던 부분인데

웬만한건 F12 로 개발자모드로 눌러가면서 컴포넌트들 찾았던것 같다 . ㅋㅋ

생노가다..인데 막상 찾아서 수정하다보면 재미도 있다.

시간은 너무 많이 쓰지 말고, 적당히 적용해보는 것을 추천 🤓

하지만 나도 초보인지라 안되는 부분도 있고 수정해야할 부분이 많다.
필요에 따라 코드 분석해서 수정해보시면 됩니다.

도움이 되셨다면 좋아요와 댓글 부탁드립니다 ! :)

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