티스토리 코드블럭 테마, 폰트 변경하기

블로그 꾸미기

티스토리 코드블럭 테마, 폰트 변경하기

Yonggyu 2023. 6. 22. 18:42

티스토리 블로그를 시작하면서 코드블럭을 사용하게 되었는데

코드블럭이 이쁘지않고, 역슬래시(\)가 코드에선 달러표시로 나와

테마, 폰트를 변경하려고 찾아보았다.

테마 변경

우선 테마를 변경하도록 하겠다. 티스토리에서 제공하는 코드 문법 강조를 사용해도 되지만 내가 원하는 테마를 찾아보고 적용시키려면 밑의 사이트에 들어가야한다.

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

highlight.js demo

highlightjs.org

사이트에서 원하는 Theme을 고른다.

Theme을 골랐으면 밑에 코드처럼 원하는theme에 입력해야한다

참고로 띄어쓰기는 '-'로 대문자는 소문자로 바꿔야한다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/원하는theme.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

나는 A 11 Y Dark를 선택하였다.

이상하게 이것만 a11y-dark이렇게 적어야했다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/a11y-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

위에 코드를 복사한후에

블로그 설정 -> 스킨 편집 -> html편집 으로 들어가 <head> 바로 밑에 붙여넣기를 하면된다.

폰트 변경

폰트는 역슬래시 떄문에 변경하고 싶었다.

한글폰트는 역슬래시가 달러로 나와 영문폰트로 바꾸려했다.

우선 밑의 사이트에 들어가 원하는 폰트를 고른다.

https://fonts.google.com/

나는 Roboto mono를 선택했다. 선택해서 들어가면 밑의 그림처럼 뜬다

원하는 글씨밝기를 고른후 Select______ 클릭하고

오른쪽 맨위의 네모아이콘으 클릭한다.

클릭하면 옆에 창이 뜨는데

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;1,200;1,600&display=swap" rel="stylesheet">

이 위의 코드는 html <head>밑에 적용시키면된다. 아까 적용시켰던 테마 밑에 복사 붙여넣기하면된다.

그 밑의코드 font-family: 'Roboto Mono', monospace; 이것은

내 스킨편집 css에서 밑의 코드를 찾아 font-family를 바꿔주면된다.

code,
kbd,
samp {
    font-family: 'Roboto Mono', monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

이렇게 적용하면 테마와 폰트가 바뀐다.

728x90

현재글티스토리 코드블럭 테마, 폰트 변경하기

Yonggyu's IT Memo blog