[ 목차 ]
1. 코드블럭 테두리 제거
2. 코드블럭 테마 변경
2.5 기본 테마 외 내가 원하는 테마 적용
3. 코드블럭 폰트 변경
1. 코드블럭 테두리 제거하기
티스토리에 코드를 작성한 후, 글을 올려 확인해보면 이렇게 블럭에 테두리가 생성되어 있다.
이 테두리를 없애보자.
블로그 관리 페이지에서 꾸미기 텝 → [스킨 편집]을 클릭한다.
오른쪽 상단에서 [html 편집]을 클릭한다.
오른쪽 상단에서 CSS 옵션을 클릭 하고, Ctrl + F 키보드를 눌러 검색창을 띄운 후 'article-view pre' 를 입력한다.
입력하면 padding 부분의 값을 0px로 만들어주기만 하면 된다.
2. 코드블럭 테마 변경하기
티스토리에서 기본으로 제공되는 여러 코드블럭 테마들이 존재하니 적용시켜보자.
블로그 관리 페이지에서 플러그인 텝 → [코드 문법 강조]를 클릭한다.
기본 테마 외에도 7개의 테마가 더 존재하는데 원하는 테마를 선택해서 적용시켜 주면 된다.
👇각 테마 적용 모습
2.5 내가 원하는 테마 찾아 적용하기
현재 Atom One Light을 사용하고 있는 상태인데, 티스토리에서 제공하는 거 말고 다른 테마를 적용해보자.
먼저 테마를 적용시키기 전에, 관리 페이지에서 [플러그인] 텝에서 코드 문법 강조를 사용 해제해주어야 한다.
※ 이를 해제해 놓지 않으면 테마를 번경해도 적용되지 않는다.
Demo - highlight.js
...
highlightjs.org
위 웹 사이트에 들어가 원하는 테마를 골라본다.
직접 코드를 써서 해당 테마가 적용된 모습을 확인해 보며 맘에 드는 걸 찾아보자. 선택지가 엄청 많다!😃
별의별 쌈뽕한 테마가 다 존재한다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/테마이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
테마를 골랐다면 위 코드에 '테마이름' 부분에 고른 테마의 이름을 넣어준다.
이름을 넣어준 코드를 복사해두자.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/base16/edge-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
※ 이유는 모르나 base16의 경우 base16-humanoid-light이 아닌 base16/humanoid-light으로 작성해야 코드가 적용된다.
관리 페이지로 돌아와 [스킨 편집] → [html 편집]을 클릭해준다.
이제 HTML에 <head>와 </head> 사이에 복사한 코드를 붙여주고 적용해주면 끝이다.
3. 코드블럭 폰트 변경하기
이어서 폰트까지 변경해보자!
pre > code {
font-family: 'Roboto Mono', monospace !important;
line-height: 1.7;
font-size: 15px;
}
pre {
background: #FAFAFA !important; /*#에 원하는 색상 입력*/
border-radius: 10px;
}
• font-family: 사용할 폰트 입력
• line-height: 줄 간격
• font-size: 글자 크기
동그란 테두리까지 추가해주었다.
• background: 배경색
• border-radius: 테두리 모서리를 동글게
자, 이제 위 코드를 복사한 후 다시 스킨 편집에 들어간다.
[html 편집]에서 CSS탭에 복사한 코드를 넣어준다.
확실히 읽기 편해진 모습이다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
글씨체나 글씨체 굵기는 위의 사이트에서 코드를 가져와 변경이 가능하다. 직접 변경해보자!
웹 사이트에 들어가 사용할 폰트를 클릭해준다.
오른쪽 상단에 'Get Font'를 클릭한다.
이어서 '<> Get embed code'를 클릭한다.
Italic으로 기울임과 Weight로 폰트의 굵기를 원하는 만큼 조정한 후에, 먼저 HTML에 붙일 코드를 복사해준다.
[스킨 편집] → [html 편집] → HTML탭에 마찬가지로 <head>와 </head> 내로 복사한 코드를 붙여준다.
이제 구글 폰트 웹사이트에서 CSS에 붙일 코드를 복사해주면 된다. 폰트 설정과 관련된 안에 내용물을 복사하고
CSS 텝에서 pre > code 블럭안에 넣어주면 된다!
※ 참고로 모바일에서도 바뀐 테마가 적용되게 할려먼 관리 페이지 [꾸미기] → [모바일] → 모바일웹 자동 연결을 '사용하지 않습니다'로 적용해야만 한다.
'메모 > 블로그관리' 카테고리의 다른 글
| 구글 애드센스 승인 이후 광고 연결 방법 (1) | 2024.06.16 |
|---|---|
| 구글 애드센스 신청 방법 (4) | 2024.06.14 |
| 티스토리 카카오 애드핏 신청·연결 방법 및 광고 설정 방법 (1) | 2024.06.12 |