이전 글에서 티스토리의 코드블럭 디자인 방법을 정리하면서 마크 다운을 이용해봤는데, 이번에는 좀 더 세부적으로 정리해보려고 한다.
<이전 글 참고>
[tistory - 코드블럭] 티스토리 코드블럭 디자인
티스토리 코드블럭 디자인 변경 방법 1. 플러그인 사용 2. 마크다운(markdown) 사용 티스토리에서 코드블럭의 디자인을 바꾸는 방법이 있는데, 1번의 경우 간단하지만 디자인의 형태가 제한적이고,
coding-ga-ding.tistory.com
원하는 디자인
1. 코드 스타일 변경
2. 코드 줄마다 번호 부여
3. 코드가 너무 길어지면 스크롤 생기기
4. 폰트 설정
5. 폰트 크기 지정
모든 작업은 '블로그 관리 > 꾸미기 > 스킨 편집 > html 편집'에서 이루어지기 때문에 html 편집창까지 들어간 후 시작한다. 찾기 힘들다면 이전 글을 참고하자.
1. 코드 스타일 변경
1) html의 <head></head> 사이에 아래 코드 작성
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>2) highlight.js에서 지원하는 스타일 중 하나를 선택하여 적용하기
highlight.js demo
highlightjs.org
위 링크에서 마음에 드는 스타일을 골랐다면, 그 이름을 1)번 코드의 2번 줄 default 자리에 적어준다. 단, 여기서 주의해야 할 점이 있는데, 사이트에 나와있는 스타일 명을 그대로 쓰지 말고, 다음 2가지 규칙을 통해 바꿔준다.
- 스타일 명의 모든 글자는 소문자로 바꾸기
- 띄어쓰기는 -로 대신하기
ex) PHP Template -> php-template
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/php-template.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>▲ PHP Template 스타일을 적용한 예시
3) 위 코드의 바로 아랫줄에 아래 코드 추가
<script>hljs.initHighlightingOnLoad();</script>2. 코드 줄마다 번호 부여
1) html의 <head></head> 사이에 아래 코드 추가 (라이브러리 불러오기)
<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에 아래 코드 추가 (기본 설정 변경)
/* 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: #ccc;
/* border-right: 1px solid #CCC; */
vertical-align: top;
padding-right: 5px;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 10px;
text-indent: 0.75rem; /* indent added */
}3) css에서 내용 수정 (테이블 테두리 선이 보이는 것을 해결)
.article-view table {
border: 1px solid #dadce0;
border-collapse: collapse;
}
.article-view table thead tr {
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: #000;
}
.article-view table tr th,
.article-view table tr td {
padding: 7px;
border-left: 1px solid #dadce0;
}
.article-view table tr {
border-bottom: 1px solid #dadce0;
}
위의 코드를 아래와 같이 변경
.article-view > table {
border: 1px solid #dadce0;
border-collapse: collapse;
}
.article-view > table thead tr {
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: #000;
}
.article-view > table tr th,
.article-view > table tr td {
padding: 7px;
border-left: 1px solid #dadce0;
}
.article-view > table tr {
border-bottom: 1px solid #dadce0;
}
테마 형태에 따라 .article-view가 아니라 .entry-content일 수도 있다. (내 생각에는 목록 스타일 또는 테마에 따라 명칭이 다른 것은 아닌가... 추측하고 있다.)
3. 코드가 너무 길어지면 스크롤 생기기
1) css에 아래 코드 추가하기
pre > code {
margin: 1rem auto;
white-space: pre;
max-width:850px;
max-height:500px;
overflow:auto !important; /* scroll setting */
}
!important는 다른 css 설정에 덮어 씌워지지 않도록 하는 것.
4. 폰트 설정
1) css에 아래 코드 추가 (맨 아랫 부분에 추가하면 됨)
/* Code block style */
code {
padding: 0.25rem;
background-color: #F1F1F1;
border-radius: 5px;
font-family: "Consolas", "Sans Mono", "Courier", "monospace";
font-size: 0.75rem;
}
pre > code {
margin: 1rem auto;
}5. 폰트 크기 지정
1) html의 <head></head> 안에 아래 코드 작성
<style>
pre > code{
font-size: 1.0em;
}
</style>폰트 사이즈의 단위는 pt, px, em 등 다양하지만 em은 상대 단위라서 해상도가 바뀌어도 자동적으로 크기를 조절하기 때문에 사용이 편하다. 기본값은 1.0em이며, 0,5em은 50%, 2.0em은 200%이다.
<참고한 글>
[티스토리] 코드블럭 생성, 테마, 라인넘버 끝내기
Code Block 티스토리에서 코드 블록을 생성하는 방법과 적당히 예쁘게 꾸미는 방법을 알아봅니다. 코드블록(Code block) 생성 1) 티스토리 에디터 > 더보기버튼 > 코드블럭 으로 생성하는 방법 2) 마크
wordbe.tistory.com
티스토리 코드블럭 폰트 스타일 수정
다른 글 2020/09/05 - [블로그] - 티스토리 코드블럭 스타일 수정(여백, 줄간격 등) 서론 highlight.js로 코드블럭의 하이라이트를 이용하고 있었다. [티스토리] 티스토리 코드블럭에 하이라이트 넣기(hig
hydroponicglass.tistory.com
+) 다음에는 코드블럭을 감싸고 있는 회색 상자?를 없애는 법도 공부해야겠다.
'Tistory' 카테고리의 다른 글
| [tistory] 티스토리 코드블럭 회색배경 및 여백 (0) | 2021.12.29 |
|---|---|
| [tistory] 닉네임 2개- 닉네임 수식어 (0) | 2021.03.30 |
| [tistory - New 아이콘] 티스토리 새 글 New 아이콘 변경 (0) | 2021.03.17 |
| [tistory - markdown] 마크다운 활용 (0) | 2021.02.15 |
| [tistory - 코드블럭] 티스토리 코드블럭 디자인 (0) | 2021.02.15 |