티스토리에 개발관련 글 작성 하실 때 코드블럭 사용해야하는 경우가 많습니다.
기본 테마로 할 경우에는 가독성이 좀 떨어져 한눈에 알아보기가 힘들기 때문에
코드블럭 테마를 변경해서 사용하는 경우가 많습니다.
오늘은 코드블럭 테마 및 폰트 변경하는 법에 대해서 알아보겠습니다.
1. 기본 플러그인 사용
아래 이미지와 같이 '관리' 페이지로 들어가 '플러그인' 항목으로 들어갑니다.
플러그인 항목 중 아래와 같이 코드 문법 강조 (Syntax Highlight) 항목으로 들어갑니다.
가장 기본상태는 테마가 '기본' 으로 설정되어 있을 것이라 원하시는 테마로 변경하시고 적용 눌러주시면 됩니다.
기본 테마 변경은 끝!
2. 나만의 테마 적용하기
위와 같이 기본 플러그인에서 테마를 사용하지 않고, 나만의 테마를 사용하겠다 하는 경우 방법을 알려드립니다.
우선, 기본적으로 '사용중' 으로 되어있는 코드 문법 강조를 '해제' 합니다.
이걸 해제 하지 않으면 테마를 변경해도 적용되지 않습니다.
그 후 아래 사이트에 들어가 Themes부분에서 맘에 드는 테마를 선택합니다.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
Themes 에서 각각 눌러보면서 어떤 식으로 표현이 되는지 테마를 확인해보고, 마음에 드는 테마 이름을 복사해 줍니다.
그리고 해당 테마 이름을 아래 스크립트의 <link rel="stylesheet" ~~ 로 시작하는 줄에서 '테마이름' 부분에 넣어줍니다.
단, 대문자 -> 소문자 로 변경하고 띄어쓰기는 '-' (하이픈) 으로 변경해서 넣어줍니다.
Ex) Atom One Dark -> atom-one-dark
<!-- 테마 변경 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/테마이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<!-- load() -->
<script>hljs.initHighlightingOnLoad();</script>
그리고, 위 코드를 그대로 복사하여 아래 경로에 붙여넣기 해줍니다.
관리 -> 꾸미기의 '스킨편집' 으로 들어간 후
스킨편집에서 'html편집' 을 눌러줍니다.
그 후, HTML에 <head> 와 </head>사이에 복사한 위 코드를 복사붙여넣기해주면 되는데
그냥 아래와 같이 <head> 바로 밑에다가 복사붙여넣기 해줍니다.
그 후, '적용' 을 눌러주고 저장을 눌러준 후 새로고침을 해서 확인해보면 정상적으로 적용된 것을 확인 하실 수 있습니다.
제 코드블럭 테마는 Atom One dark 라 저기 5번째 줄의 11.2.0/styles/ 뒤에 'atom-one-dark' 라고 변경해준 것을 보실 수 있으십니다.
3. 나만의 폰트 적용하기
코드블럭의 기본 테마가 아닌 커스터마이징을 통한 나만의 테마를 만들었는데, 그 테마에 사용되는 폰트도 바꾸고 싶을 수 있습니다. 그럴 때는 또 커스터마이징을 한 나만의 폰트로 변경할 수 있습니다.
이번에도 '관리' 메뉴에서 '스킨편집'으로 들어간 후 'html편집' 을 누르는 것 까지는 동일합니다.
그 후, HTML이 아닌 'CSS' 로 들어가 줍니다.
그 후, 아래 코드를 그대로 복사해서 아래와 같이 CSS에 복사붙여 넣기 해줍니다.
code,
kbd,
samp {
font-family: 'Roboto Mono', monospace;
line-height: 150%;
/* 1 */
font-size: 1em;
/* 2 */
}
여기서 font-family 는 원하는 폰트이고, font-size는 폰트크기를 뜻합니다.
font-family : 원하는 폰트
font-size : 폰트크기
일단 여러 폰트를 볼 수 있는 사이트는 아래와 같습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
이 Google Fonts 사이트에 들어간 후, 원하는 폰트를 선택합니다.
저의 경우는 Roboto mono폰트를 선택하였고, 아래와 같은 화면이 나옵니다.
아래 1번의 코드는 '스킨편집' 의 'html편집' 의 HTML 에 붙여넣을 것입니다.
1번 관련하여 HTML에 실제 코드를 붙여넣은 제 경우의 예시를 보여드리면 아래와 같습니다.
HTML에 붙여넣을 위치는 마찬가지로 <head>와 </head>내에 넣어주시면 됩니다.
아래 2번 코드는 '스킨편집' 의 'html편집'의 CSS에 사용할 것입니다.
2번 CSS 관련하여 실제 코드를 붙여넣은 제 경우의 예시를 보여드리면 아래와 같습니다.
이렇게 변경 하신 후, 적용, 저장 누르시고 새로고침을 해보시면
코드블럭의 폰트 또한 변경된 것을 보실 수 있으십니다.
여기까지 코드블럭 테마 및 폰트 변경에 대한 완벽 가이드를 말씀드렸습니다.
그대로 따라해보시면 적용되는것을 확인하실 수 있습니다.
감사합니다.
'IT 이것저것' 카테고리의 다른 글
| [메모리 구조] 힙(Heap), 스택(Stack) 설명 (3) | 2023.01.12 |
|---|---|
| [언박싱] 한성컴퓨터 언더케이지 TFX4470HW 르누아르 14인치 노트북 후기 (1) | 2023.01.12 |
| [오라클에러] ORA-01062:버퍼정의를 위해 메모리 할당할 수 없음 (2) | 2023.01.09 |
| SQLD:시험팁과 공부방법은 알고가자 (1) | 2023.01.08 |
| JDBC,JDK,JRE,JVM 의미 및 설명 (2) | 2023.01.07 |
댓글