티스토리 코드를 이쁘게 꾸며보자.
티스토리 밖에 블로그를 운영해보지않아서 다른 블로그들은 잘 모르지만 아마 크게 다르지 않을것같다.
다양한 컴퓨터 언어들이 있는데 프로젝트를 진행하다보면 수천 수만 줄의 코드들이 작성된다.
사람의 인식범위에 한계가 있기때문에 이 많은 코드들을 개발자가 쉽게 인식할 수 있도록 다양한 방법들이 나타나게 된다. 그 중 대표적인 것이 코드의 역할이나 특성을 반영한 색깔로 구분을 주는 것인데 이를 'code highlighting'이라한다.
'code highlighting'으로 구글링하면 몇가지 라이브러리들이 검색되는데 그 중 프리즘(prizm)을 적용하는 방법을 정리해보았다.
1. 초기화
혹시 다른 하이라이팅을 적용을 위해 이것 저것 건드려놓은 것이 있다면 처음으로 되돌려놓자.
html, css 건드렸다가 남은 내용들이 있다면 잘 적용하고서도 안된 줄 알고 편두통이 올 수 도 있다. (이게 뭐라고)
※ 티스토리에서 플러그인으로 지원하는 하이라이팅도 꼭 해제해놔야한다.
2. css, js 다운받기
Download ▲ Prism
Customize your download Select your compression level, as well as the languages and plugins you need.
prismjs.com
- 테마 선택
테마 중에 하나를 선택해서 페이지 맨 하단에 가면 해당 테마가 적용된 예제 코드를 볼 수 있다
테마를 골랐다면 바로 아래 큼지막하게 있는 다운로드 CSS 버튼을 눌러 다운한다.
- 언어 선택
수많은 언어를 지원한다.
특정언어를 선택해도 되지만 나중에 어떤 언어를 포스팅할지 모르기때문에
전체 선택을 해준다. 그래봐야 500k정도 밖에 안된다.
다운은 위에 봤던 맨하단에 CSS다운로드 옆에 있다.
3. 업로드
- 이제 블로그 설정 페이지로 와서 꾸미기 > 스킨 편집 메뉴를 클릭한다.
- 새텝에서 페이지가 열릴텐데 우측 레이아웃 상단 부분에서 'html편집' 버튼을 클릭한다.
- 세개의 텝이 있는 모습으로 바뀔텐데 그 중 '파일업로드' 텝을 클릭한다.
그 다음 맨 하단으로 내려가 추가 버튼을 눌러 아까 다운받았던 css, js 파일을 올려준다.
prizm.js와 테마명.css가 추가 된 것을 확인할 수 있다.
(필자는 이것 저것 테마를 적용해보다가 tomorrow-night테마로 적용한 상태이다.)
4. import
다시 html텝으로 가서
head tag 맨 하단에 css를 import하고
body tag 맨 하단에 js를 import해야한다.
- css import
<!-- prism css -->
<link href="./images/tomorrow-night.css" rel="stylesheet" />다른 테마를 업로드했다면 css 명만 바꿔주면 된다.
- js import
맨 하단으로 가면 script.js가 import되어있는걸 볼 수 있는데
그 아래에 prizm.js를 import한다.
<script src="./images/prism.js"></script> <!-- prism js -->
- 적용
import를 했으면 반드시 적용 버튼을 눌러주자.
5. 사용
이제 셋팅은 끝났고 사용을 해보자.
- 코드 블럭에서 코드 작성
위 그림처럼 코드블럭을 선택하면 코드를 입력할 수 있는 팝업이 뜨는데 그곳에 코드를 입력하면 된다.
- class 변경
코드 블럭에서 코드를 작성한 뒤에 그대로 두면 안되고 html을 수정해야한다.
에디트 모드를 html로 바꾼다.
그러면 지금까지 작성했던 포스트들이 html형식으로 쫙 바뀔텐데 그 중에 코드블럭 tag를 찾아간다.
기본적으로 이러한 형식으로 복잡하게 작성이 되어있을텐데 이것을
이렇게 간단히 바꾸자
공식은 pre tag에 class="lang-언어"이다. 혹은 'language-언어'
공홈에는 code tag에 넣으라고 했으나 그렇게 되면 포스트를 수정할때 깨져버린다.
아마도 티스토리에서 뭔가 code tag에 메크로를 돌리는 모양이다.
- 미리보기로 확인
작성한 코드가 잘 적용되어있는지 하단 좌측에 있는 '미리보기'를 통해 확인 할 수 있다.
6. 마무리
- CSS 적용
좀더 예쁘게 꾸미기 위해 css를 건드려준다.
(폰트 크기 / 라인폭 / 폰트종류 등)
css 텝 맨 하단에 작성해주면 된다.
pre {
border-radius: 7px;
}
code {
font-size: 15px;
line-height: 1.5;
font-family: 'Source Code Pro', monospace;
}
- Font 적용
폰트 적용은 head tag에 구글폰트의 소스를 import하면 된다.
<!-- font-family: 'Source Code Pro', monospace; -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=Source+Code+Pro&display=swap" rel="stylesheet">Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
댓글