Skip to content

Commit f6a5626

Browse files
committed
docs(chip-wasm-guide): add images for vscode dev containers
1 parent 653684e commit f6a5626

File tree

3 files changed

+16
-2
lines changed

3 files changed

+16
-2
lines changed
257 KB
Loading
21.5 KB
Loading

docs/guides/custom-chips-to-wasm.md

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ description: Compile your custom chips to WASM for use with VS Code or the Wokwi
55
keywords: [Visual Studio Code, VS Code, custom chip, compiling, WASM, web assembly, API, chips, chip, docker]
66
---
77

8+
import VsCodeDevContainerImage from './custom-chips-as-wasm-vscode-dev-container.png';
9+
import VsCodeRemoteContainerImage from './custom-chips-as-wasm-vscode-remote-container-button.png';
10+
811
Custom components written with the [Chips API](/chips-api/getting-started) can be compiled into WebAssembly (WASM) for
912
use with the Wokwi VS Code extension or the Wokwi CLI.
1013

@@ -62,8 +65,19 @@ If you do not want to use this action, then see the steps for compiling locally.
6265
### VS Code dev container
6366
The inverter chip repository comes with a dev container configuration file that will automatically handle setting up a
6467
Docker container for you to build your binaries in. To make use of this, simply open the custom chip folder in a
65-
container by pressing <kbd>F1</kbd> and searching for "Dev Containers: Open Folder in Container...". Alternatively, you
66-
can click the icon bottom left of the VS Code window, and click on "Reopen in Container".
68+
container by pressing <kbd>F1</kbd> and searching for "Dev Containers: Open Folder in Container...".
69+
70+
<figure>
71+
<img src={VsCodeDevContainerImage} alt="Opening a dev container in VS Code via the command palette" />
72+
<figcaption>Opening a dev container in VS Code via the command palette</figcaption>
73+
</figure>
74+
75+
Alternatively, you can click the icon bottom left of the VS Code window, and click on "Reopen in Container".
76+
77+
<figure>
78+
<img src={VsCodeRemoteContainerImage} style={{margin: "auto"}} alt="Opening a dev container in VS Code via a dedicated button"/>
79+
<figcaption>Opening a dev container in VS Code via a dedicated button</figcaption>
80+
</figure>
6781

6882
Once done, you should be presented with a terminal window where you can now run `make`. This will run the `Makefile` in
6983
the repository, and your generated WASM files should appear in `dist/`.

0 commit comments

Comments
 (0)