How to Display Source Code with Indent in a Web Page? HTML? CSS

How to display source code with indent in a web page? HTML? CSS?

The <pre> element (using <code> elements with appropriate class names to mark up the parts you want to syntax highlight)

<pre><code class="javascript"><code class="keyword">function</code> <code class="name">foo</code>()…

How do I use indentation in a code tag?

<code>
    <pre>
        int main(){  
            printf("Hello World!");
        }
    </pre>
</code>

You can use the "pre" tag, which defines preformatted text. Text in a "pre" element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. It is used when displaying text with unusual formatting, or some sort of computer code. And you will not need additional "br" tags.

Your code should look like the above one.

You can find more about the tag here.

Why does first line of pre code text display with some indent when formatting is changed with CSS?

Please update your code a bit, remove margins from styles for the code element and make it a block element:

pre {
    display: block;
    width: auto;
    max-height: 600px;
    overflow: auto;
    background-color: #eee;
    border-radius: 10px;
    border: 1px solid;
    border-color: var(--cassiopeia-color-primary, #111 );
    scrollbar-color: #ccc transparent;
    margin: 20px 40px;
    padding: 30px;
    word-wrap: normal;
}

pre > code {
    display: block;
    font-size: 1.0rem;
    text-indent: 0;
    color: #111;
    white-space: inherit;
}

How do I indent code elements? Example in details

To indent each <code> block, you can use something like:

code{
     display: block;
     margin: 0 40px;
}

To indent only the first line of each <code> block,

code{
     text-indent: 40px;
}

40px is just a suggestion; you can adjust the indentation width to suit your visual needs.

Auto-indent HTML Code and Display It

You can use htmLawed

http://www.bioinformatics.org/phplabware/internal_utilities/htmLawed/

this would be your code:

<?php
  require("htmLawed/htmLawed.php");
  echo "<pre>";
  echo htmlspecialchars(
         htmLawed('<div><p><span>some text</span></p></div>', array('tidy'=>4))
       );
  echo "</pre>";
?>

Indent code on a web page like in a code editor?

Algorithm

1. Get the contents of the element, and generate a list of all lines.
2. Use the element to measure the width of a space character.
3. Create a document fragment (for optimal performance!).
4. Loop through all lines. For each line:
   
   • Count the number of preceeding white space.
   • Create a block-level element (such as <div>).
   • Set the marginLeft (or paddingLeft, if you wish) property to the product of the size of a single space and the number of prefixed spaces.
   • Append The contents of the line (left trimmed).
5. Replace the contents of the actual element with the fragment.

Code (demo: http://jsfiddle.net/YPnhX/):

/**
 * Auto-indent overflowing lines
 * @author Rob W http://stackoverflow.com/u/938089
 * @param code_elem HTMLCodeElement (or any element containing *plain text*)
 */
function autoindent(code_elem) {
    // Grab the lines
    var textContent = document.textContent === null ? 'textContent' : 'innerText';
    var lines = code_elem[textContent].split(/\r?\n/),
        fragment = document.createDocumentFragment(),
        dummy, space_width, i, prefix_len, line_elem;

    // Calculate the width of white space
    // Assume that inline element inherit styles from parent (<code>)
    dummy = document.createElement('span');
    code_elem.appendChild(dummy);
    // offsetWidth includes padding and border, explicitly override the style:
    dummy.style.cssText = 'border:0;padding:0;';
    dummy[textContent] = ' ';
    space_width = dummy.offsetWidth;
    // Wipe contents
    code_elem.innerHTML = '';

    for (i=0; i<lines.length; i++) {
        // NOTE: All preceeding white space (including tabs is included)
        prefix_len = /^\s*/.exec(lines[i])[0].length;
        line_elem = fragment.appendChild(document.createElement('div'));
        line_elem.style.marginLeft = space_width * prefix_len + 'px';
        line_elem[textContent] = lines[i].substring(prefix_len);
    }
    // Finally, append (all elements inside) the fragment:
    code_elem.appendChild(fragment);
}

Browser compatibility

• IE8 + (IE7- doesn't support white-space:pre-wrap)
• Chrome 1+
• Firefox 3+
• Safari 3+
• Opera 9+ (previous versions untested)

Notes

• In this example, I calculated the width of a space (U+0020) character. The similar method is used if you want to calculate different values for other white-space characters.
• Follow-up to the previous note: To account for tabs, you have to take a hard route, which degrades performance. For each line, set the contents of the dummy (appended to code_elem!) to the prefixed white space, then calculate the width using .offsetWidth.
  
  Each time, the element is rendered. For hundreds of lines, this method may cause a spike in the CPU usage. Don't ever use tabs to display code in a web page!
• The autoindent function assumes that the contents of a element is plain text.

---

Related Topics