javascript code beautify (pretty print)

HTML에서 코드를 이쁘게 표현하기 위한 javascript 라이브러리를 찾아봤다. 

내가 하고 싶은 것은 아래 세가지 였고 다했다. 

1. 내가 화면에 보여줄 code (xml)의 HTML escaping 

INPUT    : "<root><leaf/></root>" 

OUTPUT : "&lt;root&gt;&lt;leaf/&gt;&lt;/root&gt;"

해결 : 간단한 html escaping 함수 

function escapeHtml(unsafe) {

    return unsafe

         .replace(/&/g, "&amp;")

         .replace(/</g, "&lt;")

         .replace(/>/g, "&gt;")

         .replace(/"/g, "&quot;")

         .replace(/'/g, "&#039;");

 }

2. 한줄로 되어 있는 xml string의 auto indentation 

INPUT 

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE foo SYSTEM "Foo.dtd"><a><b>bbb</b><c/><d><soapenv:Envelope xmlns:soapenv="http://xxx" xmlns:xsd="http://yyy" xmlns:xsi="http://zzz"></soapenv></d><e><![CDATA[ <z></z> ]]></e><f><g></g></f></a>

OUTPUT

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE foo SYSTEM "Foo.dtd">

<a>

    <b>bbb</b>

    <c/>

    <d>

        <soapenv:Envelope 

            xmlns:soapenv="http://xxx" 

            xmlns:xsd="http://yyy" 

            xmlns:xsi="http://zzz">

        </soapenv>

    </d>

    <e>

        <![CDATA[ <z></z> ]]>

    </e>

    <f>

        <g></g>

    </f>

</a>

해결 : vkBeautify 라이브러리 사용

참고1 - http://www.eslinstructor.net/vkbeautify/

참고2 - https://code.google.com/p/vkbeautify/

라이브러리 로드 

• Include in the page head: <script type="text/javascript" src="vkbeautify.js"></script>

사용법 : 나는 vkbeautify.xml(text)를 호출

Usage:

• Pretty print 
  
  vkbeautify.xml(text [,indent_pattern]); 
vkbeautify.json(text [,indent_pattern]); 
vkbeautify.css(text [,indent_pattern]); 
vkbeautify.sql(text [,indent_pattern]); 

@text - String; text to beatufy; 
  @indent_pattern - Integer | String; 
          Integer - number of white spaces;
          String - character string to visualize indentation ( can also be a set of white spaces )
  

• Minify 
  
  vkbeautify.xmlmin(text [,preserve_comments]); 
vkbeautify.jsonmin(text); 
vkbeautify.cssmin(text [,preserve_comments]); 
vkbeautify.sqlmin(text);

@text - String; text to minify; 
  @preserve_comments - Bool; [optional];
          Set this flag to true to prevent removing comments from @text ( minxml and mincss functions only. ) 
• 
  

3. indentation된 xml 문서를 예쁘게 pretty printing

The original	Prettier
class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded tags. }	class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded tags. }

해결 : google code prettify 사용

참고 - http://google-code-prettify.googlecode.com/svn/trunk/README.html

라이브러리 로드 

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

사용법 

Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty printed.

The original	Prettier
class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded tags. }	class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded tags. }

끗~!