구글 블로그에서 소스코드를 올릴 때 깔끔하고 보기 좋게 하기 위한 설정 방법을 찾다가 highlightjs 가 간단하고 편하다길래 공식 사이트에서 보니 맘에 든다.
앞으로 이것을 이용하여 소스들을 보기 좋게 올리려고 한다.
* https://highlightjs.org/ 에서 메뉴얼 및 스크립트를 다운로드 할 수 있다.
highlightjs 장점은 185개의 다양한 언어와 89개의 스타일을 지원, 소스 언어 종류를 자동으로 감지, 다국어 코드들을 강조 표시, node.js에서 이용할 수 있고, 모든 js 프레임워크들과 호환이 가능하다고 한다.
- 구글 Blogger 설정 방법
블로거 메뉴의 테마 > HTML 편집 에서 <head></head> 태그 사이에다가 아래 코드를 삽입하고 저장한다.
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/solarized-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
세번째 줄의 initHighlightingOnLoad();를 호출을 해야지만이 css 스타일이 활성화 된다.
다른 코드 스타일로 변경하고 싶다면 highlight 스타일 목록 을 참고하고, 원하는 css 이름을 위의 첫 줄에서 css 명만 수정을 해주면 된다. 여기 게시글의 스타일은 zenburn 스타일이 반영되어있다.
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/zenburn.min.css' rel='stylesheet'/>2. 변경할 코드 태그로 감싸기
아래와 같이 <pre><code></pre></code>로 감싸고 이 안에 블로그에 올릴 코드를 적으면 된다.
<pre><code class="html">...</code></pre>다만 HTML같은 경우 꺽쇠와 같은 특수문자는 코드로 작성해주어야 출력이 된다.
*문자열 이스케이프 자동 변경 사이트 참고
https://www.freeformatter.com/html-escape.html
https://accessify.com/tools-and-wizards/developer-tools/quick-escape/
3. 폰트 바꾸기
2번까지만 세팅했을 때 폰트까지는 변경이 안된다.
보기 좋은 폰트로 변경하려면 위에 <code><pre> 태그에 css 설정을 지정해주면 된다.
테마 > 맞춤 설정 > 고급 > CSS 추가 로 들어가서 아래와 같이 font-family 를 지정해준다.
pre > code {
font-family: "Sans Mono", "Courier New", "Courier", monospace;
}
cf) font-family
* family-name : 폰트명. Sans Mono, Courier , 바탕체 등.
* generic-family : 비슷한 폰트 계열들의 명칭. Serif, monospace 등.
monospace 속성은 가로 폭이 동일한 글꼴 속성이며 먼저 폰트명을 나열한 후, 마지막에 generic-family를 적는다.
참고)
https://www.w3schools.com/cssref/pr_font_font-family.asp
