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.

so do you just need a syntax highlighter for the code that you can cut & paste? If so I have used a react plugin that implemented Prism and it works great (https://prismjs.com/) — Jon B, Aug 08 '19 at 05:23
The \342 is a signature (start of a UTF-8 sequence). \342 \200 \203: 342 200 203 (octal) → 0xE2 0x80 0x83 (hexadecimal) → UTF-8 sequence for Unicode code point U+2003 ([EM SPACE](https://www.charset.org/utf-8/9)). This is ***not*** a common Unicode character in this scenario. It can be searched for (and replaced) by the regular expression `\x{2003}` in any modern text editor (but not the Arduino IDE; it has to be done in some other editor (e.g., [Geany](https://pmortensen.eu/world2/2020/03/29/using-geany/) or [Visual Studio Code](https://en.wikipedia.org/wiki/Visual_Studio_Code))). — Peter Mortensen, Apr 26 '23 at 22:35
This is a ***very*** common error when copying code from web pages, [PDF](https://en.wikipedia.org/wiki/Portable_Document_Format) documents, through chat (e.g. [Skype Chat](https://en.wikipedia.org/wiki/Features_of_Skype#Skype_chat) or [Facebook Messenger](https://en.wikipedia.org/wiki/Facebook_Messenger)), etc. And in this case it is sort of deliberate (through HTML ` ` listed in the first part). The canonical question is *[Compilation error: stray ‘\302’ in program, etc.](https://stackoverflow.com/questions/19198332)*. — Peter Mortensen, Apr 26 '23 at 22:39
Does this answer your question? [Compilation error: stray ‘\302’ in program, etc](https://stackoverflow.com/questions/19198332/compilation-error-stray-302-in-program-etc) — TomServo, Apr 27 '23 at 03:18
Note: The notation is different in Visual Studio Code (and probably others): `\u2003` (instead of `\x{2003}`) — Peter Mortensen, Apr 27 '23 at 13:12

score 0 · Accepted Answer · edited Apr 26 '23 at 22:17

The problem are that &emsp; 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>

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

1 Answers1