What is the simplest way to print an idented javascript text to html?

Question

have to print this in an easier way?

        public static void swap(int[] list, int i, int j) {
            /* This method simply takes an array
            and swaps its values at index i and j */

            int temp = list[i];
            list[i] = list[j];
            list[j] = temp;
        }

That’s one way I did it:

HTML

                <div class="modal-body">
                    <span id="codigoJava"></span>
                </div>

Javascript

    var string = 
        '<textarea wrap="off" readonly style="width:100%; height:400px; overflow:scroll; font-family:Arial; font-size:8pt;">'+"\n"+
        "\t"+"public static void swap(int[] list, int i, int j) {"+"\n"+     
        "\t"+"\t"+"int temp = list[i];"+"\n"+
        "\t"+"\t"+"list[i] = list[j];"+"\n"+
        "\t"+"\t"+"list[j] = temp;"+"\n"+
        "\t"+"}"+"\n"+
        '</textarea>'   
        ;
    document.getElementById('codigoJava').innerHTML = string;   

If I create a textarea directly in html and only print the code, it’s much easier, I don’t need to do the indentation code. But I think the code is very "dirty", so I decided to leave it separate in a javascript to print in html. there is a simpler way to indent?

Answer 1

You can use the tag <pre> to put formatted code. For good practical purposes you must still join <code> to let the browser know what content it shows.

Example (jsFiddle):

<code><pre>
public static void swap(int[] list, int i, int j) {
    /* This method simply takes an array
            and swaps its values at index i and j */

    int temp = list[i];
    list[i] = list[j];
    list[j] = temp;
}
</pre></code>

If you want to show HTML, then you have to convert the < for <, the > for > and the & for &. You can even convert quotes and other characters. I used this site for the example I set below:

Example:

<pre><code>
&lt;div class=&quot;modal-body&quot;&gt; 
    &lt;span id=&quot;codigoJava&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

that will give:

<div class="modal-body"> 
    <span id="codigoJava"></span>
</div>

Answer 2

I don’t know if I understand your question, I believe you have a code saved in a database or text file and you want to display your source in an HTML, if this is it, you can use the <pre>:

<div class="modal-body">
    <pre id="codigoJava"></pre>
</div>

You can also use CSS combined with the tag <code>:

var myCode = "\t" + "public static void swap(int[] list, int i, int j) {" + "\n" +     
            "\t" + "\t" + "int temp = list[i];" + "\n" +
            "\t" + "\t" + "list[i] = list[j];" + "\n" +
            "\t" + "\t" + "list[j] = temp;" + "\n" +
            "\t" + "}" + "\n";

document.getElementById("codigoJava").innerHTML = myCode.replace(/[<]/g, "&lt;").replace(/[>]/g, "&gt;");

#codigoJava {
    padding: 5px 0;
    width: 500px;                /* Ajuste conforme a necessidade  */
    display: block;
    background-color: #cfcfcf;

    white-space: pre-wrap;                 /* CSS3 browsers  */
    white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
    white-space: -pre-wrap;                /* Opera 4 thru 6 */
    white-space: -o-pre-wrap;              /* Opera 7 and up */
      word-wrap: break-word;               /* IE 5.5+ and up */
}

<div class="modal-body">
    <code id="codigoJava"></code>
</div>