It can be very time consuming to make your jQuery code neat and tidy. Fortunately, there are online tools and heaps of plugins that can automate this task for us. I recently had the need to generate JavaScript/jQuery code dynamically and thus it comes through messy and unreadable. So I decided to use beautify.js to neaten jQuery code so it is uniform, tidy and people can read it. I have extensively used this to neaten the jQuery code in the function demos section of the blog. Just click on “View Code” to see it in action on any of the function example pages.


With syntax highlighter applied.
Live Demo
Download Demo Package


  1. Download beautify package from GitHub.
  2. Modify the code to suit your setup (ie – I didn’t need the obfuscation unpackers so I removed them to reduce unused code and I then added in a parameter to the beautify function so that it can apply the beautifier to a specific element then looped the elements of class=”raw” which contain the jQuery code).
  3. Include the beautifier call in a DOM ready and then after you could apply a syntax highlighter if you wish. You can use one of these 10 syntax highlighters.

The Code

Include the scripts.

/* beutify all code with class="raw" */
$(document).ready(function() {


Specify your code elements inside a pre tag with class="raw".


I have modified version of beautify() function and removed the code unpacker functions and put them into a new file called “mybeautifier.js”. The contents of this file:

var the = {
    beautify_in_progress: false

// this dummy function alleviates Chrome large string corruption by probably shoveling the corruption bug to some other area
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
    String.prototype.old_charAt = String.prototype.charAt;
    String.prototype.charAt = function (n) { return this.old_charAt(n); }

function unpacker_filter(source) {
    var trailing_comments = '';
    var comment = '';
    var found = false;

    do {
        found = false;
        if (/^s*/*/.test(source)) {
            found = true;
            comment = source.substr(0, source.indexOf('*/') + 2);
            source = source.substr(comment.length).replace(/^s+/, '');
            trailing_comments += comment + "n";
        } else if (/^s*///.test(source)) {
            found = true;
            comment = source.match(/^s*//.*/)[0];
            source = source.substr(comment.length).replace(/^s+/, '');
            trailing_comments += comment + "n";
    } while (found);

    return trailing_comments + source;

function beautify(elem) {
    if (the.beautify_in_progress) return;

    the.beautify_in_progress = true;
    var source = $(elem).html();

    var indent_size = $('#tabsize').val();
    var indent_char = indent_size == 1 ? 't' : ' ';
    var preserve_newlines = $('#preserve-newlines').attr('checked');
    var keep_array_indentation = $('#keep-array-indentation').attr('checked');
    var brace_style = $('#brace-style').val();

    if ($('#detect-packers').attr('checked')) {
        source = unpacker_filter(source);

    var comment_mark = '<-' + '-';
    var opts = {
                indent_size: indent_size,
                indent_char: indent_char,
                brace_style: brace_style,

    if (source && source[0] === '<' && source.substring(0, 4) !== comment_mark) {
            style_html(source, opts)
    } else {
        var v = js_beautify(unpacker_filter(source), opts);

    the.beautify_in_progress = false;
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • terry

    it does NOT work in IE

    • jquery4u

      Unfortunately, I’ve only tested in FF5, Chrome 12 and IE9.

      Which version of IE was being IE?

  • syndrael

    Live demo button doesn’t target to the wanted page.. i think so.

    • jquery4u

      @syndrael, It goes to the function demo pages, which are running the code, just click “View Code” to see it in action.

  • karatika

    Nothing works ! please update this article !

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.