highlight.js 로 구문 장식하기
highlight.js 로 구문 장식하기
Blogger의 theme에서 HTML을 수정해 다음을 넣는다. <head></head> 사이에 넣으면 충분할 듯.Blogger Theme 수정
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>테마는 https://highlightjs.org/static/demo/ 의 왼쪽 메뉴의 Syles에서 골라서 CDN URL에 테마 css 파일을 지정해 주면 된다. 다음은 Github Gist 스타일 파일을 사용한 예:
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/github-gist.min.css" rel="stylesheet"></link>
사용방법
글 작성시 HTML 모드로 들어가 아래 태그를 추가하고, 사용할 언어를 class로 넣은 후에, 코드를 넣으면 된다.<pre><code class="html">
</code></pre>단,
HTML 같이 태그 기반 언어는 태그, 공백 등을 회피문자로 바꿔야 한다.
다음 같은 서비스 이용.
http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
폰트 설정
https://fonts.google.com 에서 고정폭 글꼴을 선택하면 CSS import 구문을 얻을 수 있다.<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">선택한 폰트를 Blogger -> 템플릿 -> 설정 -> 고급 -> CSS추가 위치에 <pre> 태그의 폰트로 사용한다.
pre { font-family: 'Source Code Pro', monospace; margin: 0px 0px; font-size: 10pt; }
콘솔 쉘 을 표현하기 위해서 class="console" 를 사용한다.
$ find ./ -name
참고
Blogger에서 소스코드를 예쁘게 - Syntax Highlighterhttps://highlightjs.org/usage/
댓글
댓글 쓰기