[티스토리 꾸미기] highlight.js와 코드 블록, inline 코드 블록 꾸미기

요즘 티꾸(티스토리 꾸미기) 에 맛들렸다.

파비콘도 새로 설정하구 아이콘도 내가 바꾼 색상에 맞춘 이미지로 설정 끝~

ㅋㅋㅋ

이젠 코드 블록이다.... 특히 인라인 코드블록이 너무 못생겨서 일부러 내가 따로 색 입히고 그랬음 ㅠㅜ

구선생님께 여쭤보니 highlight.js를 많이 쓰는 듯

관련글
🔗 [티스토리 꾸미기] highlight.js와 코드 블록, inline 코드 블록 꾸미기

1. 테마 고르기

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

이 페이지에 들어가면 여러 테마들의 데모들을 볼 수 있다

그중에서 마음에 드는 걸 골라보자.

내가 고른 테마는 Lioshi.

뭔가 감자가 테마? 이다 보니까 너무 쨍한 테마는 별로 안맞는거 같아서 적당히 채도가 낮은 Lioshi로 골랐다.

2. js 추가하기

https://highlightjs.org/download/

참고한 블로그 따라서 cdnjs를 선택했다.

블로그 관리 > 스킨 편집 > html 편집에 들어가서 <head> ... </head> 태그 사이 아무곳에나 아래의 코드를 붙여넣어준다.

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<!-- 실행을 위한 태그 -->
<script> hljs.initHighlightingOnLoad(); </script>

맨 위에 <link> 태그에 보면 ".../default.min.css" 가 있는데 아까 골랐던 테마의 이름을 default 대신 적으면 된다.
단, 전부 소문자로, 띄어쓰기는 하이픈(-)으로 적어준다.

<!-- ex) Lioshi -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/lioshi.min.css">

<!-- ex) Stackoverflow Dark -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/stackoverflow-dark.min.css">

3. 폰트 및 CSS 적용하기

나는 참고한 블로그의 폰트와 CSS를 그대로 따왔다. 작성자분이 노션과 유사하게 작성해주셔서 넘 맘에 들었음
🔗참고한 블로그

[tistory] code block, inline code block 꾸미기 w/highlight.js & Google Fonts

기존에도 너무너무 티스토리 기본 코드 신택스 하이라이터가 너무 못생겨서 플러그인도 깔아봤지만, 별 소용이 없었다. 한동안은 Github Gist의 에디터가 예뻐서 썼지만, 일일이 스크립트 태그를

uiyoji-journal.tistory.com

1) 폰트 적용하기

🔗구글 폰트에서 Inconsolata 폰트를 받았다.

<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=Inconsolata:wght@300;400;500&display=swap" rel="stylesheet">

원하는 폰트를 받아 아까처럼 <head> 태그 사이에 넣어준다.

CSS 파일이 따로 있다면 그 파일에 작성해서 관리해도 됨.
대신 CSS 파일에서 관리하려면 <link>가 아니라 @import로 받아와야한다.

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500&display=swap');

2) CSS 적용하기

아래 코드를 <head> 사이에 <style> 태그를 만들어 그 사이에 넣어준다.
마찬가지로 CSS 파일이 따로 있다면 거기에서 관리해도 됨.

pre > code {
    font-family: 'Inconsolata', monospace !important;
    line-height: 1.5;
    font-size: 14px;
}
pre {
    background: #282c34 !important;
    border-radius: 10px;
}
code {
    font-family: 'Inconsolata', monospace !important;
    line-height: normal;
    background: rgba(135,131,120,0.15);
    color: #EB5757;
    border-radius: 3px;
    font-size: 85%;
    padding: 0.2em 0.4em;
}
img {
    border-radius: '10px'
}