I'm trying to display a block of code on my web page, but I have a problem. I use <pre> and <code> tags since those are the most recommended for doing such a thing, and almost every site that does this uses them, but if I do this:
<pre>
<code>
#include <iostream>
int main(){
std::cout << "Hello World!" << std::endl;
return 0;
}
</code>
</pre>
Or this:
<pre>
<code>
<span>
#include <iostream>
int main(){
std::cout << "Hello World!" << std::endl;
return 0;
}
</span>
</code>
</pre>
it leaves a next-line character that I can highlight while trying to copy the code, like this:
---blank highlightable---
#include <iostream>
int main(){
std::cout << "Hello World!" << std::endl;
return 0;
}
---blank but not highlightable---
which bothers me. For taking care of the spaces before the code lines in the editor, I added a CSS file with the white-space: pre-line; attribute for the <pre> tag, otherwise it the output would be this:
---blank highlightable---
#include <iostream>
int main(){
std::cout << "Hello World!" << std::endl;
return 0;
}
---blank but not highlightable---
but it still leaves the new line character before the first line and after the last line. I saw on various "learning sites" like W3Schools and others, that show code examples, that they write the first and the last line in the same line where they close the <span>, <code>, and <pre> tags, like this:
<pre><code><span>#include <iostream>
int main(){
std::cout << "Hello World!" << std::endl;
return 0;
}</span></code></pre>
with the various classes for each tag, but I find it a little confusing, especially when you'll need to modify something in that code after a long time. So I was wondering, is there any other way I can remove those spaces without writing the first and last line of that code in the same line where I open/close the tags?
P.S. Unfortunately I'm not able to upload any images at the moment because the site doesn't let me, so I've tried my best to represent the problem by writing the output code like it was in the editor