CODEWITHSUNDEEP
javajavascripthtmlpretty-print
Thorbjørn Ravn Andersen
Thorbjørn Ravn Andersen

Reputation: 75376

How to present a pretty printed Java source located outside the HTML file?

I am looking at writing a tutorial for a Java concept where it would be really nice if I could write the tutorial as a HTML-document with pretty printed Java sources.

I understand I can do this with e.g. http://code.google.com/p/google-code-prettify/ if I copy the various Java sources in my HTML document where I want them to be and put a styling class on the surrounding tag.

However, in order to ensure that the snippets are up to date I would really like to have the HTML page refer to the actual, real Java source files instead of a manually maintained copy.

To my understanding - which may be wrong - this is not supported directly by the Google Prettyprint library, but perhaps some trickery with Javascript pulling in the file and putting it in the DOM tree inside a <pre> tag could do it? I would like the HTML file to be present in the local file system, so doing server side scripting is not an option.

My question is - how can I do this?

(I intend to have the HTML file physically placed at the root of the source tree. This mean that all references from HTML to Java sources will be relative and without '..'. I do not know if that is important or not.)

Upvotes: 0

Views: 580

Answers (3)

paldepind
paldepind

Reputation: 4870

There is no way to access files directly using JavaScript. JavaScript is restricted in this way for obvious security reasons.

You will need your webserver to serve the Java files. You don't need to do server side scripting but the content of your Java files has to be available at some web address. If they are you can load the content of the Java files with AJAX and inset the content into your webpage.

Using jQuery loading the text could be done as follows

$.get('java/somefile.java', function(data) {
  $('#sourceCodeDestination').html(data);
  // Prettyprint neeeds to run again in order to see the newly added code
  prettyPrint();
}, "text");

This will load the url java/somefile.java get the content of it as plain text and insert it into the DOM element with the id sourceCodeDestination. For more information see the jQuery documentation on get() and ajax().

Here is a demo. As you can see it loads a minified version of the Prettyprint sourcecode from a CDN and pretty prints it.

Upvotes: 1

Paul S.
Paul S.

Reputation: 66334

Assuming prettify.js has been loaded previously you can invoke the function prettyPrint which takes arguments callback and rootNode.

<div id="foo">
    <pre id="bar"></pre>
</div>

var pre = document.getElementById('bar');
pre.textContent = 'function () {\n    return;\n}'; // assign code
pre.className = 'prettyprint';                     // assign class
prettyPrint(null, document.getElementById('foo')); // prettify

DEMO

Upvotes: 0

Chii
Chii

Reputation: 14738

if your users can accept the requirement of online access while reading your document, you could host your code somewhere like gist (https://gist.github.com/), and embed it in your html dopcument (see example by putting this into your document <script src="https://gist.github.com/sangohan/6494440.js"></script>)

Upvotes: 0

Related Questions