在 html/css 网站上显示复制/粘贴的 Arduino 代码答案

【问题标题】：Displaying copy/pastable Arduino code on an html/css website在 html/css 网站上显示复制/粘贴的 Arduino 代码
【发布时间】：2019-12-15 17:39:00
【问题描述】：

注意：MariposaGentil 提供的建议对我有用（使用

 标签格式化 is 而不是使用   缩进。

我正在制作一个带有 html 和 css 的教育网站来教授 Arduino 电路和代码。我正在使用 Atom 文本编辑器来编辑网站。我想将代码放入网站的文本中，以便有人可以将文本直接复制/粘贴到 Arduino IDE 中。我尝试使用 html 的  标签执行此操作，但在将代码复制并粘贴到 Arduino IDE 后，它显示编译器错误：“程序中的流浪 \342”。
在网上搜索后，我发现部分问题可能是网站字符是 unicode，而 Arduino IDE 无法读取 unicode。我尝试将 atom 中的排版从 UTF-8 更改为 Windows 1252，但这没有用。我也尝试将  标签更改为 
 标签，但也没有用。


HTML 代码：

<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 错误信息（粘贴代码后编译时出现）：

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

【问题讨论】：

那么您是否只需要一个语法高亮显示您可以剪切和粘贴的代码？如果是这样，我使用了一个实现 Prism 的 react 插件，效果很好 (prismjs.com)

标签： html css unicode arduino ascii

【解决方案1】：

问题是 &emsp; 字符，它们无法被 Arduino IDE 读取。 &nmsp; 或其他特殊字符由于同样的原因都不起作用，它们是未正确复制到 ide 中的特殊字符。

为避免此问题，您可以使用<pre></pre> tags，它将“按原样”呈现您的 html 格式代码，所有空格和列表如下所示：

<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>

【讨论】：