what is the simplest way to print an indented text in javascript for html?

Question

what is the simplest way to print an indented text in javascript for html?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

How can you 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;
        }

This was a way I did:

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 the html and only printable the code, it is much easier, I do not need to do the indentation code. But I think the code gets very "dirty", so I decided to leave it separate in a javascript to start with in html. is there a simpler way to indent?

javascript html

asked by anonymous 19.04.2015 / 23:20

2 answers

How to do image UPDATE mysql php [closed] Is it possible to pass variables by reference in javascript? [duplicate]

score 2 · Answer 1

You can use the <pre> tag to place formatted code. For practical purposes you should still add <code> to the Browser to 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 display HTML, then you have to convert < to < , > to > and & to & . You can even convert quotation marks and other characters. I used this site for the example 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>

What will happen:

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

score 1 · Answer 2

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

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

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

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>