1. Highlight.js
코드 구문 강조를 위한 자바스크립트 라이브러리이다. 자동으로 언어를 감지하여 알맞는 표식을 삽입한다.
- http://highlightjs.org/ 사이트에서 다운로드가 가능하다.
홈페이지에 보면 hosted와 custom package 두 가지 방법이 있다고 나와 있는데, google blog는 hosted 방식을 사용하면 된다. 아래 소스를 html 소스 중 <head></head> 안에 삽입하면 사용할 준비는 끝이다.
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css" />이제 포스팅 할때 <pre><code>소스코드 </code></pre> 이렇게 사용하면 된다. 간혹 언어를 인식하지 못하는 경우가 있는데 그럴 경우는 <pre><code="language-html>소스코드 </code></pre> 이런식으로 사용하고자 하는 언어를 입력하면 된다.
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
import execjs
execjs.eval("'red yellow blue'.split(' ')")
ctx = execjs.compile("""
function add(x, y) {
return x + y;
}
""")
print(ctx.call("add", 1, 2))
파이썬 코드를 예시로 들면 이런 형태의 디자인이 된다. 또한 css 파일의 링크를 바꾸면 원하는 디자인으로 테마를 마음대로 바꿀 수 있다.
** TIPS
가끔 다른 종류의 태그가 삽입되면 하이라이트가 작동 못하는 경우가 있는데, 이 경우 해당 사이트(http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php)에서 코드를 넣고 스크립트를 치환하여 시도해보자.
예를들면, <strong>굵게</strong> 를 <strong>굵게</strong> 이렇게!