Tistory에 개발 블로그를 운영하다 보면 코드 블럭 삽입은 필수다.
에디터에서 코드블럭을 클릭하면 새 창이 뜨고, 코드를 입력할 수 있다.
(단축키는 Command + Option + ,)
그런데 문제는...예쁘지가 않다.
나는 IntelliJ나 Eclipse같은 IDE에서처럼 예쁘게 하이라이트 된 코드를 보고싶기 때문이다.
티스토리에서 하이라이트된 코드블럭을 설정하고 싶다면 크게 두가지 방법이 있다.
1. Tistory 플러그인 사용
제일 간단한 방법으로 5분 안에 설정을 끝낼 수 있다.
1. 블로그 관리 > 플러그인 클릭
2. "syntax" 또는 "코드" 검색
3. 코드 문법 강조 플러그인 클릭 > 새창 > 테마 선택 후 적용 클릭
4. 적용 끝!
여러가지 테마 중 본인 취향에 따라 고르면 된다 :)
2. Highlight.js 사용하기
플러그인보다 더 다양한 템플릿을 사용하고 싶을 때 사용한다.
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
1. Get version을 누릅니다. 현재(2023년 2월 기준)는 11.7.0이 제일 최신 버젼
2. 여기에서 나오는 cdnjs 밑의 코드를 복사한다. 아무거나 골라도 상관 없음.
3. 블로그 설정 > 스킨 편집 > html 편집 창으로 이동
4. html 편집 창의 </head> 바로 위에 추가
** 실행하는 코드도 함께 추가
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
5. 적용을 눌러주면 끝!
블로그에서 잘 되는지 확인해보기
!! 만약에 적용이 제대로 안된다면, 플러그인 설정이 되어 있지는 않는지 확인해봅니다.
처음에 설명했던 코드 문법 강조 플러그인은 사용 해제 되어 있어야 합니다.
2-1. 테마 설정하기
Highlight의 stylesheet URL을 보면 default.min.css로 되어있다.
위의 코드는 테마를 바꿔주어 설정되어 있는 url이 다름. 이 url 설정하는 방법에 대해 알아보자.
1. 데모페이지로 이동
highlight.js demo
highlightjs.org
2. 언어와 테마를 고르기
common을 선택하면 오른쪽에 여러 언어가 나오는데, 내가 제일 자주 쓸만한 언어를 중점적으로 놓고 고른다.
Themes를 선택하면 테마가 바뀐다.
나는 Kotlin으로 놓고 봤을 때 Paraiso Dark가 가장 마음에 들어 선택했다.
그런데 css에 넣으려고 보니 url주소가 없다!?
3. URL 주소 확인
개발자 모드를 켜고 테마 이름을 검색한다.(크롬은 F12)
href옆의 css 주소를 확인하고, default 대신 입력한다. min을 붙여줘도 상관없다.
4. 완료 후 테스트
fun test(data: String): String {
var a = "Test Data"
var result = a + data
println(result)
return(result)
}
이렇게 나오면 드디어 끝!
