Alignment of <pre><code> elements in css

Asked

Viewed 144 times

4

Example code without indentation

/*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>

Code Indented: 

<!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>

Thus the arquivo.html is indented but it modifies the way the element <pre><code> and viewed on the page.

How can I align the code snippet to the left without disturbing the indentation of the arquivo.html?

css html5

  • Disrupt identation? You want it to automatically align?

  • I want the code snippet to be displayed left-aligned independently of the way the code is written inside the <pre><code>

1 answer

6


Put a class to the <pre> containing the property below:

white-space: pre-line;
  • 1

    Our thanks ! would never know how to look for that kkkkk !

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.