Alignment of precode elements in css

Navigation
4

Example code without indent 

/*Exibindo trecho de código no HTML utilizando o <pre><code>*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <pre>
        <code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;h1&gt;JavaScript Functions&lt;/h1&gt;

&lt;p&gt;This example calls a function which performs a calculation, and returns the result:&lt;/p&gt;

&lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;

&lt;script&gt;
function myFunction(p1, p2) {
    return p1 * p2;
}
document.getElementById(&quot;demo&quot;).innerHTML = myFunction(4, 3);
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

        </code>
    </pre>
</body>
</html>

Indented Code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <pre>
        <code>
            &lt;!DOCTYPE html&gt;
            &lt;html&gt;
            &lt;body&gt;

            &lt;h1&gt;JavaScript Functions&lt;/h1&gt;

            &lt;p&gt;This example calls a function which performs a calculation, and returns the result:&lt;/p&gt;

            &lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;

            &lt;script&gt;
            function myFunction(p1, p2) {
                return p1 * p2;
            }
            document.getElementById(&quot;demo&quot;).innerHTML = myFunction(4, 3);
            &lt;/script&gt;

            &lt;/body&gt;
            &lt;/html&gt;
        </code>
    </pre>
</body>
</html>

In this way, the arquivo.html is indented, but it changes how the <pre><code> element is displayed on the page.

How can I align the code snippet to the left without disrupting the arquivo.html indent?

    
asked by anonymous 23.11.2016 / 14:51

1 answer

6

Places a class for the <pre> that contains the property below: 

white-space: pre-line;
    
23.11.2016 / 15:02
How do I set default properties for a variable that start with a specific text? How to return or extract more than one value from a function?