You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/arduino-cloud/04.cloud-editor/embedding-create-iframes/embedding-create-iframes.md
+47-18Lines changed: 47 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,16 @@
1
1
---
2
-
title: 'Embedding your sketches into an HTML page'
2
+
title: 'Embedding Sketches with Iframes'
3
3
description: 'Learn about different methods when embedding your sketches in a website.'
4
-
author: 'Karl Söderby'
4
+
author: 'Karl Söderby, Hannes Siebeneicher'
5
5
---
6
6
7
7
The Cloud Editor is a great tool for creating and uploading programs while also collecting all of your sketches in one place. Another great feature is embedding them as iframes, such as articles, blogposts or journals.
8
8
9
-
To embed an iframe is very easy, and we just need to copy and paste a link from our sketch in the Cloud Editor. But we can also do a series of modifications to that iframe, and in this tutorial we will take a look at how to do that.
9
+
Embedding an iframe is easy. Simply copy and paste the link from your sketch in the Cloud Editor. But we can also do a series of modifications to that iframe, and in this tutorial we will take a look at how to do that.
10
10
11
11
## Let's start
12
12
13
-
First of all, we need to navigate to the [Cloud Editor](https://create.arduino.cc/editor). If we do not have an account, we can register one with just a few simple steps.
13
+
First of all, we need to navigate to the [Cloud Editor](https://app.arduino.cc/sketches). If we do not have an account, we can register one with just a few simple steps.
14
14
15
15
Then, we need to have a code. In this tutorial, we are just going to use the good old **blink** example. When we have our sketch ready, click on the **share** button next to the serial monitor tool. This will open up a new window, that will have two fields: **link** and **embed**. Copy the embed field.
16
16
@@ -24,52 +24,81 @@ It should look something like this:
24
24
25
25
This iframe can now simply be embedded in a HTML page, and it will look like this:
But there are many ways we can modify the iframe to look different. So let's take a look the available modifications we can make!
30
30
31
31
## Creating a snippet
32
32
33
33
First up is the easiest: making a simple snippet. This removes the other information, such as sketch name and author, and simply presents a good looking snippet!
34
34
35
-
To do this, we just need to add the following code to the end of the URL:
35
+
To do this, we need to change `view-mode=` from `embed` to`snippet` at the end of the URL:
You can highlight as many lines as you want, and it is easily configurable. For example, if we want to highlight line 4 and 6-9, we simply need to add the following to the URL:
69
+
70
+
```
71
+
&highlight=L4,L6-L9
72
+
```
73
+
74
+
## Scope
75
+
76
+
It's also possible to only show specific lines by adding the `scope` parameter, like this:
You can highlight as many lines as you want, and it is easily configurable. For example, if we want to highlight line 1, 3 and 5-8, we simply need to add the following to the URL:
91
+
## Hide Numbers
92
+
93
+
To hide the line numbers in the embedded snippet, add the `&hide-numbers` parameter, like this:
0 commit comments