Google Code Prettify In My Server

I summarized how to use Google Code Prettify in own server, not using CDN.

Step1 : Download souce code from github

Clone repository or Download zip from the folloing repository.

https://github.com/googlearchive/code-prettify

Step2 : Choice js files

“prettify.js” in “src” folder is a required js file that you use Google Code Prerrify.

Additionaly you may need to pick up language files such as “lang-css.js” in same directory, if you want to display your code written by a cartain language other than JavaScript.prettify.js seems to support JavaScript and HTML code. But if your code is CSS for example, you need to use “lang-css.js”.

That is, if you want to display JavaScript, HTML and CSS code,  the following files are required.

<script src="./js/prettify.js" charset="utf-8"></script>
<script src="./js/lang-css.js" charset="utf-8"></script>

Step3 : Set Style

Google Code Prettify offers some theme by style sheets in “style” folder. If you want to use”sunburst” theme, embed link tag with “sunburst.css” in your html code.

<link rel="stylesheet" href="./css/sunburst.css">

Step4 : Run prettyPrint()

Finally run prettyPrint() function to convert strings in  <pre class=”prettyprint”> into code for Google Code Prettify. So, you need to run this function after loading DOM elements.

<script type="text/javascript">
  !(function(){
    function init(event) {
      prettyPrint();
    }

    if( window.addEventListener ){
      window.addEventListener( 'load', init, false );
    } else if( window.attachEvent ){
      window.attachEvent( 'onload', init );
    } else {
      window.onload = init;
    }
  }());
</script>

Conclusion

You can get HTML code from Step1 to Step 4.

<!DOCTYPE html>
  <html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Google Code Prettify</title>
    <script src="./js/prettify.js" charset="utf-8"></script>
    <script src="./js/lang-css.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./css/sunburst.css">
  </head>

  <body>

    <pre class="prettyprint lang-html">&lt;p&gt;Google Code Prettify&lt;/p&gt;</pre>

    <script type="text/javascript">
      !(function() {
        function init(event) {
          prettyPrint();
        }

        if (window.addEventListener) {
          window.addEventListener('load', init, false);
        } else if (window.attachEvent) {
          window.attachEvent('onload', init);
        } else {
          window.onload = init;
        }
      }());
    </script>
  </body>

</html>

Related Posts