There is empty space in html that I'm not able to remove

October 23, 2024

I wanted to make a code snippet in HTML using prism.js, but there is empty space that I can highlight like if there was empty lines.

Basically, using prism.js, I’m making a code snippet with HTML.
Here is the code :

    <div class="content" id="section1-sub1">
        <h2>Introduction</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <h4>Exemple de Code</h4>
        <div class="code-wrapper">
            <div class="code-header">
                <span class="language">JavaScript</span>
                <img src="copy.png" alt="" onclick="copyCode()" class="copy-btn">
            </div>
            <hr class="separator">
            <pre class="code">
                <code class="language-javascript">
async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
}
                </code>
            </pre>
        </div>
    </div>

And here is how it looks like :

preview

As you can see, I can select empty space in the container (invisible lines). Maybe making the code a one-liner and putting some
would solve the problem, but I don’t like this solution…
Any idea? Thanks for spending time on helping me anyway, you guys are so nice.

>Solution :

Its because of white spaces which you made by mistake or due to incompatible ide config, prism.js has this condition: every space in <pre></pre> is printed, remove it, gitcompare your text with my corrected code to see changes

<div class="content" id="section1-sub1">
  <h2>Introduction</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <h4>Exemple de Code</h4>
  <div class="code-wrapper">
    <div class="code-header">
      <span class="language">JavaScript</span>
      <img src="copy.png" alt="" onclick="copyCode()" class="copy-btn">
    </div>
    <hr class="separator">
    <pre class="code"><code class="language-javascript">async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
}</code></pre>
  </div>
</div>