如何打印带有缩进的HTML代码？

Question

I'm creating a layout page with the components that I'm using in a project for other people use the same design. My ideia is to let my script get my innerHTML code and print it for the user as a text;

Here's the codepen .

So far, I have this:

 // Get all divs with the ".topic" class and returns a list of it // @return list | array() function getTopicList() { // Create the list let list = []; // Populate the list $('.topic').map(function() { list.push($(this)); }); // Returns the list return list; } // Set the example code inside a "code" tag // @param topic | jquery object // @param exampleCode | string function setExampleCode(topic, exampleCode) { // Create a "code" tag inside the selected div $(topic).append('<code></code>'); // Set the example's code inside the "code" tag $(topic).find('code').text(exampleCode); } // Get the HTML code inside the div as a string // @param topic | jquery object function generateExampleCode(topic) { // Get the HTML code as string let exampleCode = $(topic).children('.example').html(); // Calls a function to append the code as a string into the div setExampleCode(topic, exampleCode); } $(document).ready(function() { // Get a list of all the divs that have the ".topic" class let topicList = getTopicList(); // Get the HTML code of all the ".topic" divs topicList.map(generateExampleCode); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Buttons --> <div class="topic white z-depth-1 u-padding-20"> <h5>Buttons</h5> <p class="u-margin-20-0">Materialize buttons.</p> <div class="example grey lighten-3 u-padding-20 u-margin-20-0 u-overflow-hidden u-box-shadow-inset-1"> <button class="btn left">Button</button> <button class="btn left"><i class="material-icons left">add</i>Button</button> <button class="btn left"><i class="material-icons right">add</i>Button</button> </div> </div> 

And my result is the following:

My expected result is:

I know that I can manipulate the string and replace the "<" for " < " and the ">" for " > ", but is it the only way to do it? Is there a simpler way to do it?

Answer 1

would it not be appropriate to use "pre" tag like.

    function setExampleCode(topic, exampleCode) {
    // Create a "code" tag inside the selected div
    $(topic).append('<code><pre></pre></code>');

    // Set the example's code inside the "code" tag
    $(topic).find('pre').text(exampleCode);

}

Answer 2

Maybe all you need is some CSS?

code {
    white-space: pre-line;
}

Working codepen from your example

Answer 3

You can use the "pre" element when displaying text with unusual formatting, or some sort of computer code. HTML pre Tag

 // Get all divs with the ".topic" class and returns a list of it // @return list | array() function getTopicList() { // Create the list let list = []; // Populate the list $('.topic').map(function() { list.push($(this)); }); // Returns the list return list; } // Set the example code inside a "code" tag // @param topic | jquery object // @param exampleCode | string function setExampleCode(topic, exampleCode) { // Create a "code" tag inside the selected div $(topic).append('<pre></pre>'); // Set the example's code inside the "code" tag $(topic).find('pre').text((exampleCode)); } // Get the HTML code inside the div as a string // @param topic | jquery object function generateExampleCode(topic) { // Get the HTML code as string let exampleCode = $(topic).children('.example').html(); // Calls a function to append the code as a string into the div setExampleCode(topic, exampleCode); } $(document).ready(function() { // Get a list of all the divs that have the ".topic" class let topicList = getTopicList(); // Get the HTML code of all the ".topic" divs topicList.map(generateExampleCode); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Buttons --> <div class="topic white z-depth-1 u-padding-20"> <h5>Buttons</h5> <p class="u-margin-20-0">Materialize buttons.</p> <div class="example grey lighten-3 u-padding-20 u-margin-20-0 u-overflow-hidden u-box-shadow-inset-1"> <button class="btn left">Button</button> <button class="btn left"><i class="material-icons left">add</i>Button</button> <button class="btn left"><i class="material-icons right">add</i>Button</button> </div> </div>