티스토리 코드 블럭에 코드 하이라이트 적용 + Nord 주석 색 바꾸기
티스토리 블로그에서 코드블럭을 사용하고 포스팅을 하면,
코드 하이라이트가 적용이 안 되는 경우가 있습니다.
이럴 때는 플러그인에서 코드 문법 강조를 적용하면 되지만, 테마가 마음에 들지 않을 때가 많죠.
그럼 지금부터 코드 블럭에 커스텀 테마 넣는 법을 알아보도록 하겠습니다.
// 1.
우선, highlights에서 원하는 테마를 찾습니다.
highlight.js demo
highlightjs.org
많은 테마 중에서 Nord 테마가 마음에 드네요.
하지만, 주석 색깔이 연해서 잘 보이지 않습니다.
직접 색깔을 바꿔 보도록 하겠습니다.
// 2.
highlightjs에서 테마를 다운로드합니다.
Getting highlight.js
Hosted A prebuilt version of highlight.js with 39 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig
highlightjs.org
필요한 언어를 선택할 수 있는데, 저는 그냥 그대로 했습니다.
설정을 마치면, 다운로드 버튼을 눌러줍니다.
// 3.
다운로드한. zip 파일의 압축을 풀어줍니다.
그럼 아래와 같이 나오는데,
여기서 style 폴더 클릭 후 nord.css를 열어줍니다. (마우스 우클릭-연결 프로그램-메모장)
// 4.
nord 테마의 주석 색깔을 바꾸기 위해,
.hljs-comment 블록에서 color를 바꿔줍니다. (저는 #999999로 바꿨습니다.)
// 5.
이제 티스토리에 적용을 시켜 봅시다.
관리자 - 스킨 편집 - html 편집 - 파일 업로드에 들어가고, 추가 버튼을 클릭하여
highlight.pack.js 와 nord.css를 추가합니다.
적용 버튼을 클릭해줍니다.
// 6.
파일 업로드 탭에서 첫 번째에 있는 HTML로 들어갑니다.
<head> </head> 안에 아래 코드를 삽입합니다.
<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/nord.css">
<script>hljs.initHighlightingOnLoad();</script>
적용 버튼을 누르고, 결과를 확인합니다.
// 결과
코드 블럭에 커스텀 테마가 적용됨을 확인할 수 있습니다.
주석 색깔도 잘 바뀌었네요!
// 코드 하이라이트가 적용 안 되는 경우
관리자-플러그인에서 코드 문법 강조를 해제하셨는지 확인해보세요.
// 참고
티스토리 강좌 / 코드블럭으로 코드 입력하고 highlight.js로 예쁘게 출력하는 방법
티스토리에는 코딩 관련 자료가 많습니다. 그런데, 글을 작성할 때 코드를 삽입하는 것은 쉽지 않았습니다. 특히 HTML 관련 코드를 넣을 때는 특정 문자를 변환해야 하는 불편도 있었습니다. 그러
www.jbfactory.net
티스토리 코드블럭(코드 하이라이트) 적용 따라하기
#잡설 기존 티스토리에는 포스트에디터는 잘 모르겠으나 엊그저께 티스토리로 블로그를 옮긴 나는 현재 뉴에디터 기준으로 코드블럭을 적용했다. IT 비전공자에게 있어서 코드를 다루지 않으면
suzxc2468.tistory.com