Question 60894 in Html Question posted in
Some basic documentation can be found here.

Pre to start for column 0 – Html

The snippet below will create a pre formatted. But the problem is when you have a <pre> inside many tags, the text displayed after skipping to many columns it become hideous to the eye:

<body>
     <main>
      ... // many other tags
           <pre>
            <code>
              # include <iostream>
              using namespace std;

              int main()
              { 
                  if(true)
                  {
                     return 1;
                  }
                  return 0; 
              }
            </code>
           </pre>
     </main>
    </body>

I want the pre-formatted text to be displayed at the column 0 without indenting the code element to the the row 0:

<body>
 <main>
  ... // many other tags
       <pre>
<code>
  ... content
</code>
       </pre>
 </main>
</body>

Is this possible. Thanks.

Tags:

2

Answers


  1. 0

    But see if I can help you solve the problem

     pre {
    margin: 0;
    padding: 0;
  }
  code {
    display: block;
    white-space: pre;
    margin: 0;
    padding: 0;
  }
    <body>
  <main>
    ... // many other tags
    <pre>
      <code>
        ... content
      </code>
    </pre>
  </main>
</body>
    Login or Signup to reply.
  2. 0

    Add a style on your pre tag not enough to achieve the correct output, so I add an script.

    Before

    <main>
... // many other tags
     <pre>
        <code>
          ... content
        </code>
     </pre>
</main>

    After (Edited) -> CSS(not as expected)

    pre, code {
    white-space: pre-line;
}
    <main>
   ... // many other tags
      <pre>
         <code>
            # include <iostream>
            using namespace std;
   
            int main()
            { return 0; }
         </code>
      </pre>
</main>

    After 2 (New) ->JS(working!)

    (function() {
    function preCode(selector) {
        var els = Array.prototype.slice.call(document.querySelectorAll(selector), 0);

        els.forEach(function(el) {
            var txt = el.textContent
                .replace(/^[rn]+/, "")    // strip leading newline
                .replace(/s+$/g, "");      // strip trailing whitespace

            if (/^S/gm.test(txt)) {
                el.textContent = txt;
                return;
            }

            var mat, str, re = /^[t ]+/gm, len, min = 1e3;

            while (mat = re.exec(txt)) {
                len = mat[0].length;

                if (len < min) {
                    min = len;
                    str = mat[0];
                }
            }

            if (min == 1e3)
                return;

            el.textContent = txt.replace(new RegExp("^" + str, 'gm'), "");
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        preCode("pre code, textarea");
    }, false);
})();
    body{
   color: gray;
}
pre{
   color: black;
}
    <main>
   ... // many other tags<br>
      ...//other tags<br>
         ...//another tags<br>
            ...//this is tag too<br>
               ...//too many tags<br>
                  <pre><code>
                     # include <iostream>
                     using namespace std;
                     int main()
                     { 
                        if(true)
                        {
                           if(false)
                           {
                              if(true)
                              {
                                 return 1;
                              }
                           }
                        }
                        return 0; 
                     }
                  </code></pre>
               ...//end of tag 5<br>
            ...//end of tag 4<br>
         ...//end of tag 3<br>
      ...//end of tag 2<br>
   ...//end of tag 1<br>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search