내 블로그를 방문해주신 분이 블로그 테마와 코드부분이 마음에 든다고 설정 방법을 물어보셨다.
누추한 곳에 . . . 귀한분이 . . 감사합니다 . .
하지만 설정을 한지 꽤 된 터라 자세하게 기억이....🥲 최대한 기억을 더듬어 작성해본다.
1. 1. 사용중인 테마
BookClub 을 커스텀해서 사용중!
2. 2. Highlights 라이브러리 추가
태그 내부에 코드블록 테마를 바꿔줄 highlights 라이브러리를 추가한다.
아래 링크에서 데모를 확인해보고, 마음에 드는 테마를 정한다.
나는 안드로이드스튜디오가 익숙해 안스로 정했다.
androidstudio 를 지우고 원하는 테마 이름을 적으면 된다.
이름 적어줄때 전부 소문자여야하고, 특수문자 없이 적어줘야했던걸로 기억이 난다. (상관없나..?😅)
<code />
<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>
...
무료폰트를 다운받을 수 있는 곳은 대표적으로 google폰트가 있는데
구글링 하다가 알게된 눈누 라는 사이트.
특이한 폰트도 많아서 블로그 글 말고도 다른 곳에도 활용도가 높을 것 같다.
폰트 아무거나 들어가서 보면 웹폰트로 사용이 있는데, 이걸 복사해서 css Web Font Load 영역에 적어주면 된다.
이제 css 원하는 곳에서 font: 'GmarketSansMedium' 이런식으로 써주면 된다.
<code />
/* 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;
}
<css />
/* ****** 블로그 제목 영역 스타일 ****** */
#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',
...
}
3.0.2. 2) 단어블록 css 설정
이렇게 보이는 단어블록을 만들수 있다. (이건 약간 야매인듯..)
단어블록(?) 커스텀을 위해 css 맨 아래에 복붙한다.
이게 소스코드를 적는 코드블록과 다른 점은
이건 p태그 내에 <code>이고, 소스코드의 <code>는 <pre> 태그 내부에 있어 소스코드에는 영향이 가지 않는다.
근데 문제는 기본모드에서는 적용시킬 수 없어서
마크다운 모드에서 `단어` 로 작성하거나
html 모드에서 <p><code>단어</code></p> 이렇게 작성해야 한다. ㅠ
마크다운 스타일을 좋아하는 나로서 약간 티스토리는 최적화되어있지 않아 불편한 점이 꽤 있다.
<css />
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.0.3.
3.0.4. 3) highlight css 설정
코드블록 테마에 추가적으로 커스텀을 하고싶을 때 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 로 수정해준다.
<css />
/* 코드 블럭 이상하게 나오는 것 > 처리 */
.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 로 개발자모드로 눌러가면서 컴포넌트들 찾았던것 같다 . ㅋㅋ
생노가다..인데 막상 찾아서 수정하다보면 재미도 있다.
시간은 너무 많이 쓰지 말고, 적당히 적용해보는 것을 추천 🤓
하지만 나도 초보인지라 안되는 부분도 있고 수정해야할 부분이 많다.
필요에 따라 코드 분석해서 수정해보시면 됩니다.
도움이 되셨다면 좋아요와 댓글 부탁드립니다 ! :)
