Technical Documentation Page - Build a Technical Documentation Page

Need help making code snippet/block


I want to include multiple lines of code in a block. I tried using <pre> which did make a block, but the text was going outside of that for some reason. I also tried nesting paragraphs under my <code> tag but it also looked silly.

Of course, I can make a <div> instead of an actual code snippet, but I would prefer not to if possible! I didn’t style the <div> in this snippet by the way .

(Also, this comes from freecodecamp’s table tutorial :slight_smile: )

My Code

<section class="main-section" id="Table_Syntax">
        <header>Table Syntax</header>
        <div class="code-block">
            &lt;td>Cell 1&lt;/td&gt;
            &lt;td>Cell 2&lt;/td&gt;
            &lt;td>Cell 3&lt;/td&gt;
            &lt;td>Cell 4&lt;/td&gt;
            &lt;td>Cell 5&lt;/td&gt;
            &lt;td>Cell 6&lt;/td&gt;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

I don’t understand what you mean by this. The pre element is what you want if you want to preserve newlines/white space in your display code. Could you be more specific about what wasn’t working for you with pre?

1 Like

My mistake. Thanks for informing me!

I’m not really sure how to explain what’s happening properly. There is a block, but the code text is being pushed to the side of it. I’ll add a screenshot just incase

That’s because the pre element preserves the white space in your HTML. If you don’t want it pushed over like that then remove the white space at the beginning of each line.

1 Like

I got it! Thanks so much!!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.