Technical Documentation Page - Build a Technical Documentation Page

[Buggie]

Need help making code snippet/block

Hello!

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 )

My Code

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

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

freeCodeCamp.org

[bbsmooth]

@Buggie

I tried using <pre> which did make a block, but the text was going outside of that for some reason.

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?

[Buggie]

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

[bbsmooth]

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.

[Buggie]

I got it! Thanks so much!!