Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Prettify (gallery-prettify)

Last Updated: 05/10/12

+ 0 -

Derek Gathright

YUI Developer

See 2 more by this user.

Created: 08/27/11
Project: YUI 3
License: Apache License, 2.0
YUI Version: 3.6.0pr1
Free for use.

A JavaScript module and CSS file that allows syntax highlighting of source code snippets in an html page.

Features

Works on HTML pages
Works even if code contains embedded links, line numbers, etc.
Simple API : include some JS&CSS and add an onload handler.
Lightweights : small download and does not block page from loading while running.
Customizable styles via CSS. See the themes gallery
Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
Extensible language handlers for other languages. You can specify the language.
Widely used with good cross-browser support. Powers code.google.com and stackoverflow.com

Code Sample

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="http://yui.yahooapis.com/3.4.0/build/yui/yui.js"></script>
    <script type="text/javascript">
        // Note, because of licensing restrictions, this module is not hosted on YUI's CDN. 
        // You should host this JS script and the CSS file (below) from your own domain.
        YUI({
            modules: {
                'gallery-prettify': {
                    fullpath: 'https://raw.github.com/derek/yui3-gallery/master/src/gallery-prettify/js/prettify.js',
                    requires: ['gallery-prettify-css-sam']
                },
                'gallery-prettify-css-sam': {
                    fullpath: 'http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css'
                },
                'gallery-prettify-css-night': {
                    fullpath: 'http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css'
                }
            }
        }).use('gallery-prettify', function(Y) {
            // It's loaded, now make everything pretty!
            Y.prettyPrint();
        });
    </script>
  </head>
 
  <body>
    <h1>Javascript</h1>
    <pre class="prettyprint">
    /**
     * nth element in the fibonacci series.
     * @param n >= 0
     * @return the nth element, >= 0.
     */
    function fib(n) {
      var a = 1, b = 1;
      var tmp;
      while (--n >= 0) {
        tmp = a;
        a += b;
        b = tmp;
      }
      return a;
    }
 
    document.write(fib(10));
    </pre>
  </body>
</html>

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="http://yui.yahooapis.com/3.4.0/build/yui/yui.js"></script>
    <script type="text/javascript">
        // Note, because of licensing restrictions, this module is not hosted on YUI's CDN. 
        // You should host this JS script and the CSS file (below) from your own domain.
        YUI({
            modules: {
                'gallery-prettify': {
                    fullpath: 'https://raw.github.com/derek/yui3-gallery/master/src/gallery-prettify/js/prettify.js',
                    requires: ['gallery-prettify-css-sam']
                },
                'gallery-prettify-css-sam': {
                    fullpath: 'http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css'
                },
                'gallery-prettify-css-night': {
                    fullpath: 'http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css'
                }
            }
        }).use('gallery-prettify', function(Y) {
            // It's loaded, now make everything pretty!
            Y.prettyPrint();
        });â��
    </script>
  </head>
  
  <body>
    <h1>Javascript</h1>
    <pre class="prettyprint">
    /**
     * nth element in the fibonacci series.
     * @param n >= 0
     * @return the nth element, >= 0.
     */
    function fib(n) {
      var a = 1, b = 1;
      var tmp;
      while (--n >= 0) {
        tmp = a;
        a += b;
        b = tmp;
      }
      return a;
    }

document.write(fib(10));
    </pre>
  </body>
</html>