Arduino IDE 2.2.1 - How to "Copy as HTML"?

Development Tools IDE 2.x
1

Hi all,

I recently upgraded to IDE 2.2.1, and have noticed the absence of the very useful feature "Copy as HTML". I used to sometimes place chunks of formatted Arduino code on my website when making little tutorials, but now I've upgraded to the latest IDE, this nice function appears to have disappeared. Is there a way I can turn it back on?

Ctrl + Alt + C used to be a keyboard shortcut for this too, but sadly now also does not work.

eg: https://scottbouch.com/flightgear-sim-arduino-serial-hardware-2-axis-potentiometer-joystick.html

Can anyone help please?

Many thanks, Scott.

2

Does not seem high priority given it was reported mid 2021

(To format C++ code in HTML using a JavaScript package, you can use a code formatting library like “Prism” or “highlight.js.”)

3

Oh I see, thank you.

So in that comment, copying the code to a previous version of the IDE and then copying as HTML is reported as a workaround, but also, thank for sharing the javascript ideas too.

Cheers, Scott.

4

something like this could get you going

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>C++ Code Example</title>

  <!-- Highlight.js CSS and JS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
  <script>hljs.highlightAll();</script>
</head>
<body>

<h1>Here you go</h1>
<p>This is the most advanced Arduino sketch ever</p>

<pre><code class="cpp">
void setup() {
  Serial.begin(115200); 
  Serial.println("Hello World);
}

void loop() {}
</code></pre>

</body>
</html>
2 Likes
5

Ooooh, I like that a lot, thank you!!

It's a much neater result (in terms of code) than the Arduino IDE "copy as HTML" output anyway.

Can it be configured to "wrap" test to the next line when the text is wider than the window? Just thinking about mobile browsing on narrow vertical screens.

Many thanks, Scott

6

if you add

  <style>code {white-space: pre-wrap;}</style>

at the end of the head section (just before the </head>) then the text will wrap when you resize the window.

it's a general CSS attribute so it does not take into account that it's C++

1 Like
7

I really appreciate your help on this, many thanks indeed!!

Cheers, Scott.

8

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.