블로그에서 code block을 이쁘게 표현하기 위한 javascript library, google code-prettify

기술 블로그를 쓰다보면 code를 전달하기 위해 code block이 필요할 때가 있다. 이럴 경우 html tag를 조합해서 넣기도 해야하고 혹은 code script와 같은 web site의 힘을 빌리기도 한다.

google의 code block을 위한 js library를 사용한다면 블로그에 code넣는 것이 한결 수월해진다. 

그리고 간단한 css 옵션 추가를 통해 더 이쁘게 코드를 작성, 전달 할 수 있다.

code-prettify.js

Github url : https://github.com/google/code-prettify

How to use?

1) 설치방법

블로그의 최하단에 아래의 script를 넣는다.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

2) CSS 꾸미는 방법

각자 나름대로 css를 통해 code block을 꾸미겠지만, github의 markdown에 나오는 code와 최대한 비슷하게 보이게 하려고 아래와 같이 만들었다.

pre.prettyprint {
    padding: 14px; //padding 설정
    font-size: 1.1rem;
    line-height: 1.45; 
    background-color: #f6f8fa; //code block background color
    border-radius: 3px; //code block radius border
    border: 1px solid #fff;
    margin: 2px; //margin 설정
}

3) 사용방법

블로그 글을 쓸때 아래와 같이 html tag안에 코드를 작성한다.

<pre class="prettyprint">class Person{private String name;private Int age;}</pre>

만약 특정 language의 color로 색을 입히고 싶다면 아래와 같이 작성하면 된다.
(작성하지 않는 경우 auto detect)

<pre class="prettyprint lang-html">html language에 맞는 color</pre>
<pre class="prettyprint lang-java">java language에 맞는 color</pre>
<pre class="prettyprint lang-c">c language에 맞는 color</pre>
<pre class="prettyprint lang-*">* language에 맞는 color</pre>

지원하는 language는 아래와 같다.

"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

4) 사용 예

class Person{
    private String name;
    private Int age;
}

감사합니다.

※ 추가적으로 code pretty 안에 <> 와 같은 특수문자를 넣고 싶다면 xmp tag를 추가한다.

<pre class="prettyprint"><xmp><script> 와 같은 특수문자가 들어갈 경우!!