1. Syntax Highlight
블로그에서 code 들을 보여줄 때, 명령어나 변수 type 들에 따라 색을 구분해줘 가시성을 높이는 방법이, "Syntax Highlight" 를 적용하는 것 입니다.
가시성도 좋고 적용하고 싶지만, Google Blogger 에 적용하는 것이 쉽지 않았습니다. 그 이유로는 적용의 방법의 차이가 있고, 요즘 사용하는 방법이 예전 방법과 다른 것이 원인인 듯 합니다.
한 마디로, 많은 삽질을 통해 가장 간편한 방법을 찾게 되어 공유 합니다.
2. Install
어떤 블로그 플렛폼을 사용하느냐에 따라 조금 씩 다를 수 있으나, 큰 틀에서는 동일합니다. 여기서는 Blogspot 을 기준으로 과정을 설명해 봅니다.
아래 사이트에서 CDN 을 통한 링크 정보를 받습니다. 아래에서 cdnj 방식으로 설정을 진행합니다.
* highlight.js (Syntax highlighting for the Web)
Blogger 사이트에서 나의 Theme 의 소스를 변경합니다.
Theme > Edit HTML
JavaScript 방식으로 설정되기 때문에 </head> 를 검색하여, 그 위에 아래 코드를 넣습니다.
....
<!-- hightlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
....
</head>
아래와 같이 말이죠.
3. Choose Highlight Theme
기본 default 를 적용하면, 아래 사진처럼 그냥 밑밑한 수준으로 적용됩니다.
Demo 페이지를 참조하여, 가장 원하는 theme 를 고릅니다.
저의 추천은 Atom One Dark / Androidstudio / Github Dark 등 입니다. 저는 최종적으로 Github Dark 를 적용 했습니다.
* highlight.js demo
원래 default 였던 것을 Atom One Dark 로 변경한 과정 입니다. 한 줄만 변경하면 됩니다.
FROM
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" />
TO
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css" />
원하는 highlight.js 의 theme 명으로 변경하변 됩니다만, 주의할 점은 {theme_name}.min.css 처럼, 중간에 min 이 들아가는 파일명으로 변경하는 것이 꼭 필요합니다. (여기서도 많은 삽질을 함)
4. Code Adaptation
실제 code 를 적용시 주의점으로는, <pre><code> 뒤에 바로 보여줄 코드를 적는 것 입니다. 그렇지 않으면, 아래 그림처럼 매번 한칸이 띄워져서 표시됩니다. (이것도 한참 만에 알게 됨)
아래 스샷처럼 code 선언 이후베 바로 표시할 코드를 적어야 합니다.
4. Line Height
문제 없이 쉽게 적용한 것은 좋은데, 줄간격이 Blogger 기준으로 넓게 되어 있어서, 코드 표시가 이쁘지 않습니다. 줄간격을 줄여야 합니다.
최종적으로 찾은 방법은 style 정의를 넣으면 됩니다. (이 방법을 찾는 것이 제일 많이 걸림)
위의 스샷처럼, skin 정의 완료 전에 pre > code 정의를 삽입하는 것 입니다.
]]></b:skin>
위의 skin 정의를 찾았으면, 그 바로 위에 아래 코드를 넣으면 됩니다. 의미는 pre 다음에 오는 code 정의 안에서는 줄간격을 16px 로 맞추라는 내용 입니다.
pre > code {
line-height: 16px;
}
그러면, 아래와 같이 이쁘게 표시가 됩니다.
가장 눈의 띄게 이쁘지 않았던 부분이 table 이었습니다.
pre > code 를 통하여 line-height 를 16px 로 맞추면, 아래 처럼 이쁘게 변경됩니다.
끝~
5. Old Methods
이 Blogger 를 시작하면서, 가장 먼저 시도해 본 내용 들 입니다. 아래에서 설명하는 내용을 조금 변경하여 적용해도 깔끔할 듯 합니다. 참고할 수 있도록, 위의 개선방법 이전에 설정했던 내용을 공유합니다.
아래 Blog 에서 설명하고 있는 내용을 그대로 따라 했습니다.
* Add syntax highlighting to my Blog
위의 소개 방법은 Widget 으로 install 을 시켜서 적용하는 방법 입니다.
위의 Blog 를 통하여 "ADD SYNTAX HIGHLIGHTING TO MY BLOG!" 를 클릭하면 위의 창이 뜨고, 아래 소스코드가 실행됩니다.
https://www.blogger.com/add-widget?widget.content=%3Clink+rel%3D%22stylesheet%22%0D%0A++++++href%3D%22%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fhighlight.js%2F9.9.0%2Fstyles%2Fandroidstudio.min.css%22%3E%0D%0A%3Cscript+src%3D%22%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fhighlight.js%2F9.9.0%2Fhighlight.min.js%22%3E%3C%2Fscript%3E%0D%0A%3Cscript%3Ehljs.initHighlightingOnLoad%28%29%3B%3C%2Fscript%3E
그러면, 아래 메뉴에 Syntax highlighter 가 생성된 것을 확인할 수 있습니다.
Layout > Sidebar > syntax highlighter
내용을 살펴보면, 소개 블로그에서 생성해준 코드가 그대로 들어가 있습니다.
이 소스 부분을 최신 버전의 highlight.js 로 변경해도 됩니다.
그렇다 한들, 결국 line-heigh 를 수정해야 하므로, "Theme > Edit HTML" 을 피해갈 수 없네요.
참고하세요~
FIN
댓글
댓글 쓰기