인터넷에서 예쁘게 코드 입력하기 (Syntax Highlighter - google code prettify)

뭐 여러가지 js가 있는거 같긴한데 개인적으론 이거 쓰면서 만족하고 있음. Google 직원이 만들었으니 잘 만들었겠지. 뭔가 에러처리 (잘 안생길거 같은 에러들도 이것저것 처리를 해놓은듯) 를 잘해놔서 코드가 복잡하긴한데, 잘 돌아감. 상당히 빠른거 같고.
HTML에서 약속된 문법들은 escape해줘야 제대로 표현됨. 예를 들면 { < : &lt; }, { > : &gt; }, { & : &amp; } 같은 것들. 'less than', 'greater than', 'ampersand'의 약자일듯. JavaScript - String - replace(RegExp, txt) method 쓰면 편함. 하지만 여전히 escaping은 미리 신경써줘야 함. script 안에 들어가 있지 않는 한. HTML document가 이상하게 rendering 될수도 있음.
아래는 예제. HTML 예제 코드에 어떻게 사용하는지도 간단하게 나와있음. 자세한 설명은 official page 가서...

Posting History

  • 2014-??-??: First Posting.

Table of Contents

Examples of Code pretty-printed

HTML code (How to pretty-print)

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<!-- 위와 같은 script를 넣어주고 pre class="prettyprint" tag안에 code를 작성해주면 나머지는 대부분 자동적으로 예쁘게 처리해줌. -->

<div class="subsec code"><h3>HTML code</h3>
	<pre class="prettyprint linenums lang-html"> // lang(code language)은 굳이 class에 설정해놓지 않아도 자동으로 알아서 어떤 code인지 알아내서 highlight 시킨다고 하긴 함.
HTML code( &lt;html>&lt;/html> )를 여기 넣으면 highlight 됨.
<!-- HTML 표현할때는 주의해야 하는게... '<'랑 '>'가 html tag에 쓰이니까.
'<'=&lt; , '>'=&gt;으로 표현해야 함. (&는 &amp;로)
몇개는 자동으로 처리해 주는듯 하기도 하기도 함. ('>'랑 '&'는 굳이 안바꿔도 되는듯.)
몇개 예제들을 보니 javascript 통해서 처리하는듯도. replace(/regExp/g, str) function 이용. (g는 global하게 찾으라는 의미.)
뭐 find all and replace 지원하는 editor가 많으니 '<'=&lt; 요것만 바꿔서 처리하면 될듯. --></pre>
</div>

<script>
prettyPrint(); // 마지막에 이런 script를 추가해야 함? 안해줘도 되던데...
// 되도록 run_prettify.js 추가를 마지막 부분에 하는게 좋은듯.
</script>
/* 여러가지 스타일도 제공하긴 하는데, css를 어느정도 아신다면 활용해 보시는 것도. 아래는 제가 이 글에서 사용한 css. */
/* Pretty printing styles. Used with prettify.js*/
/* Vim sunburst theme by David Leibovic 를 약간 수정함. */
pre .str, code .str {color:#65B042}/* string  - green */
pre .kwd, code .kwd {color:#E28964}/* keyword - dark pink */
pre .com, code .com {color:#AEAEAE; font-style: italic}/* comment - gray */
pre .typ, code .typ {color:#89bdff}/* type - light blue */
pre .lit, code .lit {color:#3387CC}/* literal - blue */
pre .pun, code .pun {color:#fff}/* punctuation - white */
pre .pln, code .pln {color:#fff}/* plaintext - white */
pre .tag, code .tag {color:#89bdff}/* html/xml tag    - light blue */
pre .atn, code .atn {color:#bdb76b}/* html/xml attribute name  - khaki */
pre .atv, code .atv {color:#F3FF64}/* html/xml attribute value - yellow */
pre .dec, code .dec {color:#3387CC}/* decimal - blue */

pre, code {font-family:inherit; overflow-wrap:break-word}
pre.prettyprint, code.prettyprint {background-color:#000}
pre.prettyprint {padding:0.5em}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {margin-top:0; margin-bottom:0; color:#AEAEAE; padding-left:2em}/* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {list-style-type:none}
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 {background:rgb(12, 12, 12)}

@media print {
  pre .str, code .str {color:#060}
  pre .kwd, code .kwd {color:#006; font-weight:bold}
  pre .com, code .com {color:#600; font-style:italic}
  pre .typ, code .typ {color:#404; font-weight:bold}
  pre .lit, code .lit {color:#044}
  pre .pun, code .pun {color:#440}
  pre .pln, code .pln {color:#000}
  pre .tag, code .tag {color:#006; font-weight:bold}
  pre .atn, code .atn {color:#404}
  pre .atv, code .atv {color:#060}
}
<pre class="prettyprint linenums lang-html" style="font-size:1.6em;" width=300 height=200>
<a href="http://kipid.tistory.com/entry/Syntax-Highlighter-in-HTML-google-code-prettify" target="_blank" class="link">인터넷에서 예쁘게 코드 입력하기 (google code prettify)</a>
<div class="예제">HTML 예제가 잘 출력될까나?</div>
css 출력도 별로 예쁘지 않고, sql이나 이런것도 완벽하지는 않은듯 -ㅇ-;;;
c, c++, java 같은 것들 공유하라고 만든 prettifier라 그런듯?
// 자세한 설명은 reference 참고 .

C++ code

#include <iostream>
#include <cmath>

using namespace std;

class Voila {
  private:
    int x,y,z;
  public:
    // Voila
    static const string VOILA = "Voila";
    // will not interfere with embedded tags.
    // HTML tag(<span> 같은)를 넣어도 된다는거 같은데... color(font)는 못바꾸는듯?
	// tab 크기가 너무 큰거 같아서 여기서는 space 두개로 code를 썼는데... tab 넓이 설정은 어찌 못바꾸나?
	// 이것저것 css나 javascript를 다운 받아서 살펴봐야할듯;;;; 없으면 고쳐써야하나;
	
    Voila(int x=0, int y=0, int z=0){ this.x=x; this.y=y; this.z=z; };
    ~Voila();
    
    friend ostream &operator<<(ostream &os, const Voila &obj);
};

int main(){
	return 0;
}

SQL code

// Database: 데이터가 실질적으로 적재되는 테이블들을 분류하는 상위 개념

// 생성
// SQL CREATE DATABASE Syntax
CREATE DATABASE dbname;
create database dbname;
Create Database dbname; // 첫글자를 대문자로 쓴것만 제대로 표시되는듯? ㅡ,.ㅡ;;;
Create Database `데이터베이스명` Character Set utf8 Collate utf8_general_ci;

// 생성 Ex.
Create Database my_db;
Create Database `class0` Character Set utf8 Collate utf8_general_ci;
Create Database `class1` Character Set utf8 Collate utf8_general_ci;

// 삭제/제거
Drop Database `데이터베이스명`; // Drop Table 과 구분하기 위해 Database, Table 써줘야 함.

// 열람
Show Databases; // 복수(pl: s붙음)
+--------------------+
| Database           |
+--------------------+
| information_schema |
| class0             |
| class1             |
| my_db              |
| mysql              |
| phpmyadmin         |
+--------------------+

// 선택
Use `데이터베이스명`;

JAVA code

class FirstJavaProgram{
	public static void main(String[] args){
		System.out.println("Welcome to Java");
		System.out.println("First Java Program");
	}
}

References and Related Articles

  1. Google code prettify - Getting Started, README.html;
    // This is a syntax highlighter written in javascript. It powers code.google.com and stackoverflow.com.
  2. Blog - craig.is - rainbows (syntax highlighting library written in Javascript);
    // I haven't used this syntax highlighter (javascript). I refer this as it seems good.
  3. Web - puzzleware.net - Code Htmler;
    // This site directly converts your code into colorized HTML texts. You can simply copy and paste it. Not excellent but quite simple way. (No option for HTML codes.)
  4. Blog - alexgorbatchev.com - Syntax Highlighter;
    // I tested this. But I don't like it much since it requires many scripts and is not stable because of table structure used in wrong manner.
저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 냥냥 kipid
comments powered by Disqus


티스토리 툴바