Displaying copy/pastable Arduino code on an HTML/CSS website

Question

I'm making an educational website with HTML and CSS to teach Arduino circuitry and code. I'm using the Atom text editor to edit the website. I want to put code into the text of the website so that someone can copy/paste the text directly into the Arduino IDE. I tried doing this with HTML's <code> tags, but after copying and pasting the code into the Arduino IDE, it showed a compiler error: "stray \342 in program".

After searching online, I found that part of the issue could be that the website characters are Unicode, and the Arduino IDE can't read Unicode. I tried changing the typeset in Atom from UTF-8 to Windows-1252, but that didn't work. I have also tried changing the <code> tags to <p> tags, but that didn't work either.

HTML code:

<code>
    <span style = "color: blue;"> void </span>
    <span> setup(){ </span>
    <br>&emsp; pinMode(3, OUTPUT);
    <br> }
    <br>
    <span style = "color: blue;"> void </span>
    <span> loop(){ </span>
    <br> &emsp;digitalWrite(3,HIGH);
    <br> &emsp;digitalWrite(5,LOW);
    <br> &emsp;delay (500);
    <br> &emsp;digitalWrite(5,HIGH);
    <br> &emsp;digitalWrite(3,LOW);
    <br> &emsp;delay (500);
    <br> }
</code>

Arduino IDE Error message (occurs on compile after pasting code):

sketch_aug07a:2:1: error: stray '\342' in program

   pinMode(3, OUTPUT);

 ^

sketch_aug07a:2:1: error: stray '\200' in program

sketch_aug07a:2:1: error: stray '\203' in program

sketch_aug07a:5:1: error: stray '\342' in program

  digitalWrite(3,HIGH);

 ^

sketch_aug07a:5:1: error: stray '\200' in program

sketch_aug07a:5:1: error: stray '\203' in program

sketch_aug07a:6:1: error: stray '\342' in program

  digitalWrite(5,LOW);

 ^

sketch_aug07a:6:1: error: stray '\200' in program

sketch_aug07a:6:1: error: stray '\203' in program

sketch_aug07a:7:1: error: stray '\342' in program

  delay (500);

 ^

sketch_aug07a:7:1: error: stray '\200' in program

sketch_aug07a:7:1: error: stray '\203' in program

sketch_aug07a:8:1: error: stray '\342' in program

  digitalWrite(5,HIGH);

 ^

sketch_aug07a:8:1: error: stray '\200' in program

sketch_aug07a:8:1: error: stray '\203' in program

sketch_aug07a:9:1: error: stray '\342' in program

  digitalWrite(3,LOW);

 ^

sketch_aug07a:9:1: error: stray '\200' in program

sketch_aug07a:9:1: error: stray '\203' in program

sketch_aug07a:10:1: error: stray '\342' in program

  delay (500);

 ^

sketch_aug07a:10:1: error: stray '\200' in program

sketch_aug07a:10:1: error: stray '\203' in program

exit status 1
stray '\342' in program

---

Note: The suggestion provided by MariposaGentil worked for me (using <pre> tags to format it instead of using &emsp; to indent.

Answer 1

The problem are that   characters. They can't be read by the Arduino IDE.

The &nmsp; or other special characters neither works because of the same reason. They are special characters that are not copied correctly into the IDE.

To avoid this issue, you could use the <pre></pre> tags that will render your HTML format code 'as is' with all spaces and tabulations like this:

<p><code><pre>
<span style="color: blue;">void</span> setup(){
    pinMode(3, OUTPUT);
}

<span style="color: blue;">void</span> loop(){
    digitalWrite(3,HIGH);
    digitalWrite(5,LOW);
    delay (500);

    digitalWrite(5,HIGH);
    digitalWrite(3,LOW);
    delay (500);
}
</pre></code></p>