1. 자신의 웹사이트(블로그)에 코드 구문 강조를 넣어보자(highlight.js 적용 방법)
3. highlight.js 줄 번호(line number), 가로 스크롤 추가 방법
highlight.js 적용이 안 돼요! - 문제점 파악하기
Tistory는 스킨 편집이 제공되는 몇 안 되는 블로그 서비스입니다. 스킨 편집이 제공되기 때문에, 스킨이 무궁무진하고, 다양하게 구현되어 사용되고 있죠.
블로그 서비스는 프로그램이라기보다는 웹 페이지이기 때문에, HTML/CSS 기반으로 구현이 되어있는데요, 이 HTML/CSS 디자인이, 하나의 페이지를 공통으로 사용하기 때문에, 의도가 다르거나, 중복되거나, 잘못 구현되면, 두더지 게임 잡듯이 하나 잡으면 다른 데서 튀어나오는 특징이 없지 않아 있어서 골치가 아플 때가 많아요.
아래 이미지는 제 블로그에 highlight.js만을 적용하고, 코드 블록을 사용했을 때, 나타난 마지막 현상입니다.
문제점을 파악해 봅시다. 저는 androidstudio.css를 적용했습니다.
highlight.js demo
highlightjs.org
demo에서 확인해보면, 아래처럼 알록달록 잘 나와야되는데, 배경은 어두워졌는데, 글씨도 같이 어두워져서 보이지도 않네요.
글자크기는 그렇다치고, 줄 간격도 긴 것 같고, 어두운 배경 뒤 회색 배경도 거슬립니다. 여기서는 모르겠지만, 주석(// Comment Test)을 작성할 때 Tab을 1칸 넣었는데, 비정상적으로 튀어나온 부분도 개선해야 될 것 같습니다.
차례대로 해봅시다. 일단 글자부터 보여야 할 것 같습니다.
웹사이트(블로그)의 CSS 분석 및 편집하기
블로그 관리 - 꾸미기의 스킨 편집 - HTML 편집으로 넘어가봅시다.
HTML/CSS를 모르시거나, 블로그 관리를 HTML 편집까지 안 해보신 분이면, 멘붕이 옵니다. 수 천 Line의 프로그램 코드를 마주해야 하기 때문이죠. 그래도 하나씩 차근차근하다 보면 원하는 결과를 얻을 수 있을 것 같습니다. HTML을 선택해주세요.
먼저 본인이 적용된 스킨의 에디터 영역을 확인해야 합니다. 보통은 article, article_view 등으로 되어있어요. article_view로 검색, article로 검색을 해보면서 찾아보세요.
저는 article_view네요. 이제 CSS로 넘어가 주세요.
HTML에서 span 태그는 div라는 태그와 유사하게 특별한 기능을 갖지 않고 CSS 설정 값으로 쓰이는 태그입니다. div와 차이점은 block이 아닌 inline 속성으로, 줄 바꿈이 안 되는 속성입니다.
div, span, p(문단), 등의 공통 속성 태그 위주로 검사를 해보았는데, span이 보이네요. color: #000;으로 글자 색상도 검은색으로 설정해주고 있습니다. 결론적으로, highlight.js에서 내부적으로 span 태그의 속성을 바꿔주는 부분이 있었습니다.
다음에 확인할 수 있게 표시를 해두고, 나머지는 주석 처리하였습니다. 개인적으로 본문 span 태그에 공통 속성은 빼는 것을 권장합니다. 문제가 많이 생기고, 나중에라도 스킨을 바꾸면서 이전 글들의 포맷이 깨질 수가 있어서 많이 안 좋습니다. (article_view span의 내용을 주석처리)
만약에, 혹시나, 혹~시나라도, span을 주석했더니, 이전 글들이 망가지더라 하시는 분들은 잘 생각해서 선택하셔야 합니다. 이전 글을 살릴 선택을 할지, 앞으로의 글을 확실하게 살릴지 말이죠.
이전글을 꼭 살려야겠다고 하시는 분들은 아래처럼 수정하시면 될 것 같습니다.
. article_view에서 바로 span이 나왔을 때만 적용되도록 .article_view > span 으로 '>'를 추가해주었습니다.
여기까지 하니까, 컬러 강조는 살아났네요.
highlight.js를 사용하니까, 회색 배경은 안 써도 될 것 같습니다. 수정해볼까요?
찾았어요. .article_view pre { }에 들어있네요. 과감하게 주석처리하겠습니다.
다시 볼까요?
이제 모양이 좀 잡혀가는 것 같아요. 뭔가 좋은데, 줄 간격이 길어서 긴 코드가 나오면 가독성이 팍팍 떨어질 것 같아서 추가로 수정을 좀 해주겠습니다.
하려고 보니까, 좀 난감한 상황이 생겼어요. 본문 전체에 줄간격이 지정되어있네요. 스킨 특성상 전체적인 줄 간격을 줄이면, 전체적으로 보기 안 좋아지니까요. 특히 저는 IT 전문 글만 작성하는 게 아니라, 영화/책/만화 리뷰 등까지 쓰고 있기 때문에, 저야말로 이전 글 유지가 필요해 보이네요.
제 판단은 이렇습니다. span은 공통으로 쓰이니까 영향이 너무 커서 버렸고, code는 코드 블록을 사용할 때만 사용하기 때문에 .article_view code { line_height: 1.2; }를 추가해줘서 코드 블록의 라인만 조절해주었습니다.
이제 좀 보기가 편해진 것 같아요. 그래도 이상하게 표현되면, 아래 항목을 펼쳐서 확인해보세요.
그래도 이상하게 표출되는 것 같다 하면, 더 살펴볼 곳들
그래도 이상하다 싶으면 극단적인 방법으로 찾아보는 방법도 있습니다.
줄 간격이 안 바뀐다 싶으면, line-height를 검색해서 사용하는 부분을 하나씩 바꿔보는 방법, 글꼴이 이상하면 font-family, 글자 크기가 이상하면 font-size 등 속성을 직접 검색하면서 찾아보는 방법입니다.
highlight.js - configure 옵션 설정 - 탭 길이(tab size)를 조절하자
보기 편해졌는데, TAB을 한 번만 눌렀는데, 8칸이나 떨어져 보입니다. 생각해보니 메모장에서 TAB을 누르면 8칸 정도가 밀려나던 것이 생각났습니다. 코딩을 할 때는 4칸이 보기 좋죠. 수정해 봅시다.
HTML 탭에서 <head> 부분에 추가한 부분 있죠? highlight.js를 초기화하는 부분에 옵션을 추가해주기만 하면 됩니다.
옵션을 사용하는 방법
hljs.configure({
tabReplace: ' ', // 4 spaces
classPrefix: '' // don't append class prefix
// … other options aren't changed
})
hljs.initHighlighting();
초기화 전에 hljs.configure 설정을 해주면 됩니다. 탭 사이즈를 4칸으로 변경하는 방법은 아래 코드를 추가하면 됩니다.
<script>
hljs.configure({tabReplace:' '}); <!-- 공백 4칸 -->
hljs.initHighlightingOnLoad();
</script>그럼 아래처럼 되겠죠?
이제야 보기 좋아진 것 같습니다.
추가적으로 옵션에는 tabReplace, useBR, classPrefix, languages가 있으니, 필요하신 분은 여기서 알아보시면 될 것 같습니다.
https://highlightjs.readthedocs.io/en/latest/api.html#configure-options
highlightjs.readthedocs.io
적용은 했는데, 제대로 적용이 안 될 때 커스터마이징 하는 방법과 configure 옵션을 사용하는 방법을 알아봤습니다.
다음 포스팅에는 줄 번호를 표시하는 방법 등 highlight.js를 좀 더 깊이 있게 꾸며(?) 보는 글로 찾아오겠습니다.
'WEB Programming > Blog' 카테고리의 다른 글
| [코드 구문 강조 - highlight.js]3. highlight.js 줄 번호(line number), 가로 스크롤 추가 방법 (6) | 2019.04.08 |
|---|---|
| [코드 구문 강조 - highlight.js]1. 자신의 웹사이트(블로그)에 코드 구문 강조를 넣어보자(highlight.js 적용 방법) (2) | 2019.04.05 |
