format cheerp codeblocks

leaningtech · Sep 25, 2023 · 5f06747 · 5f06747
1 parent a754272
commit 5f06747
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 52 deletions.
diff --git a/src/content/docs/cheerp/00-installation/10-source/01-linux.md b/src/content/docs/cheerp/00-installation/10-source/01-linux.md
@@ -174,22 +174,6 @@ cmake --install build_asmjs
 cd ../..
 ```
 
-## "Hello, World" in Cheerp
-
-```cpp
-//save as example.cpp
-#include <iostream>
-
-int main()
-{
-    std::cout << "Hello, World!\n";
-    return 0;
-}
-```
-
-`/opt/cheerp/bin/clang++ example.cpp -o cheerp_example.js -O3 && node cheerp_example.js`
-Should compile and execute the relevant file.
-
 ## Cheerp unit tests
 
 ```bash

diff --git a/src/content/docs/cheerp/01-tutorials/00-getting-started/index.md b/src/content/docs/cheerp/01-tutorials/00-getting-started/index.md
@@ -10,18 +10,14 @@ Cheerp in itself has no dependencies, but the recommended workflow and the tutor
 - an HTTP server (such as http-server)
 - a web browser
 
-If you don't have these, see [recommended workflow](/cheerp/tutorials/getting-started/recommended-workflow). If you're not sure, make sure that the following commands work in your terminal:
-
-1. `/opt/cheerp/bin/clang++ --version` (`C:\cheerp\bin\clang++ --version` on Windows systems)
-2. `nodejs --version`
-3. `http-server -o`
+If you don't have these, see [recommended workflow](/cheerp/tutorials/getting-started/recommended-workflow).
 
 ## Compiling your first application
 
 You are now ready for compiling your first Web application using Cheerp.
 Move to a folder of your choice and save the following C++ program as `hello.cpp`.
 
-```cpp
+```cpp title="hello.cpp"
 // The cheerp/clientlib.h header contains declarations for the browser APIs
 #include <cheerp/clientlib.h>
 
@@ -34,19 +30,19 @@ void webMain()
 
 You can then compile this program using the following command line:
 
-```
+```shell
 /opt/cheerp/bin/clang++ -target cheerp hello.cpp -o hello.js
 ```
 
 Great, you have compiled your first program with Cheerp. You can now run the generated JavaScript directly with
 
-```
-nodejs hello.js
+```shell
+node hello.js
 ```
 
 You can also save this HTML file as `hello.html`:
 
-```html
+```html title="hello.html"
 <!doctype html>
 <html lang="en">
 	<head>

diff --git a/src/content/docs/cheerp/01-tutorials/01-hello-wasm.md b/src/content/docs/cheerp/01-tutorials/01-hello-wasm.md
@@ -14,15 +14,21 @@ I picked a computational heavy task: "Counting how many primes are smaller than
 
 First, save [segmented_sieve.cpp](/cheerp/tutorials/hello_wasm/segmented_sieve.cpp) on your computer and try to compile it natively:
 
-`g++ segmented_sieve.cpp -o segmented_sieve -O3`
+```shell
+g++ segmented_sieve.cpp -o segmented_sieve -O3
+```
+
 (or `clang++` or equivalent command line C++ compiler)
 
 and then we run it:
-`./segmented_sieve`
+
+```shell
+./segmented_sieve
+```
 
 the output to the console will be something like:
 
-```
+```text frame="terminal"
 4.0052e-05s	to sieve in the interval (1, 10)	4 primes found
 5.8115e-05s	to sieve in the interval (1, 100)	25 primes found
 2.2484e-05s	to sieve in the interval (1, 1000)	168 primes found
@@ -46,7 +52,7 @@ and then we run it:
 
 the output to the console will be something like:
 
-```
+```text frame="terminal"
 0.006s	to sieve in the interval (1, 10)	4 primes found
 0.007s	to sieve in the interval (1, 100)	25 primes found
 0.008s	to sieve in the interval (1, 1000)	168 primes found
@@ -62,7 +68,7 @@ It works, internally it does equivalents calculations. There is a performance sl
 
 Want to see it inside a browser?
 
-```html
+```html title="segmented_sieve.html"
 <!doctype html>
 <html lang="en">
 	<head>
@@ -87,7 +93,9 @@ Now we will get to the serious stuff, compiling to a mix of JavaScript (that wil
 
 The command line it's basically the same, just changing the target:
 
-<code>/opt/cheerp/bin/clang++ -target cheerp-wasm segmented_sieve.cpp -o segmented_sieve_wasm.js -O3</code>
+```shell
+/opt/cheerp/bin/clang++ -target cheerp-wasm segmented_sieve.cpp -o segmented_sieve_wasm.js -O3
+```
 
 Note that we are using the **cheerp-wasm** target, not the **cheerp** target. This marks all code to be compiled into wasm (or asmjs) by default, including the C and C++ standard libraries.
 
@@ -126,7 +134,9 @@ Take the previous html file, and change `segmented_sieve.js` to `segmented_sieve
 
 Next, run a web server:
 
-`http-server -o`
+```shell
+http-server -o
+```
 
 This will open a new tab on your favorite browser with a list of the files in the current folder. Choose `segmented_sieve.html` (or whatever name you gave to the file), way few second for the execution and open the console. You should be able to see similar results to the one computed via `nodejs`.
 

diff --git a/src/content/docs/cheerp/01-tutorials/02-dom.md b/src/content/docs/cheerp/01-tutorials/02-dom.md
@@ -63,11 +63,14 @@ void webMain()
 ```
 
 Compiling with:
-`/opt/cheerp/bin/clang++ -O3 dom.cpp -o dom.js`
+
+```shell
+/opt/cheerp/bin/clang++ -O3 dom.cpp -o dom.js
+```
 
 Now we need a [html file](/cheerp/tutorials/dom_access/dom.html):
 
-```html
+```html title="dom.html"
 <!doctype html>
 <html lang="en">
 	<head>

diff --git a/src/content/docs/cheerp/01-tutorials/03-pong.md b/src/content/docs/cheerp/01-tutorials/03-pong.md
@@ -8,7 +8,7 @@ This tutorial will guide you through the steps to create a simple game of pong i
 
 Let's create a new C++ file `pong.cpp` as follows:
 
-```cpp
+```cpp title="pong.cpp"
 #include <cheerp/clientlib.h>
 #include <cheerp/client.h>
 
@@ -33,7 +33,7 @@ This command will generate two files: a JavaScript loader (`pong.js`) and a WebA
 
 All we need to run this Hello World is a simple HTML page:
 
-```html
+```html title="pong.html"
 <!doctype html>
 <html lang="en">
 	<head>
@@ -63,7 +63,7 @@ What we will do in this tutorial is keeping all the Canvas manipulation in the J
 
 Let's have a look a this example:
 
-```cpp
+```cpp title="pong.cpp"
 #include <cheerp/clientlib.h>
 #include <cheerp/client.h>
 
@@ -120,7 +120,7 @@ For this, we will create a `Platform` object, which will be the only controllabl
 
 Let’s create a new class for the Platform. We will **not** use the [[cheerp::genericjs]] attribute on this class so that all it’s code will be compiled in WebAssembly.
 
-```cpp
+```cpp title="pong.cpp"
 class Platform
 {
 private:
@@ -170,7 +170,7 @@ The class has some basic properties and a render function which then delegates t
 
 We now need an instance of the Platform object, let’s put it in the global scope for convenience, and also add a top level function `mainLoop` to handle the main loop of the application. This function will clear the background and then render the platform:
 
-```cpp
+```cpp title="pong.cpp"
 // Define a global instance for the platform object. A more serious game
 // would manage these objects dynamically
 Platform platform(185, 380, 30, 7);
@@ -215,7 +215,7 @@ We now need to be able to move the platform around. We will add a `keydown` even
 
 Let's add two new methods to `Platform`:
 
-```cpp
+```cpp title="pong.cpp"
     	void moveLeft()
     	{
             x -= 5;
@@ -229,7 +229,7 @@ Let's add two new methods to `Platform`:
 
 as well as a keyDown event handler to the Graphics class which lives in `genericjs` code.
 
-```cpp
+```cpp title="pong.cpp"
 void Graphics::keyDownHandler(client::KeyboardEvent* e)
 {
     	if(e->get_keyCode() == 37)
@@ -241,7 +241,7 @@ void Graphics::keyDownHandler(client::KeyboardEvent* e)
 
 Let's also register an `EventListener` in `Graphics::initializeCanvas`.
 
-```cpp
+```cpp title="pong.cpp"
     			client::document.addEventListener("keydown", cheerp::Callback(keyDownHandler));
 ```
 
@@ -253,7 +253,7 @@ You should now be able to move the paddle around like this:
 
 We'll now focus on the ball. We will create a `Ball` class, including a basic physical model of position and velocity. We will keep this class in WebAssembly, so no need for a `[[cheerp::genericjs]]` tag.
 
-```cpp
+```cpp title="pong.cpp"
 class Ball
 {
 private:
@@ -301,7 +301,7 @@ The `Ball` class has methods to update its position, check for collisions and fo
 
 To visualize our ball on screen we need to implement `Graphics::drawCircle`:
 
-```cpp
+```cpp title="pong.cpp"
         static void drawCircle(int x, int y, int radius, int rgb)
         {
                 int r = rgb&0xff;
@@ -316,13 +316,13 @@ To visualize our ball on screen we need to implement `Graphics::drawCircle`:
 
 And, as with `Platform`, instantiate a `Ball` object in the global scope.
 
-```cpp
+```cpp title="pong.cpp"
 Ball ball(200, 200, 2, -2);
 ```
 
 We will now expand the `mainLoop` method to call them in sequence. `Ball::collide` also checks if the ball has gone past the bottom of the screen, which is our losing condition, and `mainLoop` is going to report that by drawing some text.
 
-```cpp
+```cpp title="pong.cpp"
 void mainLoop()
 {
     	// Reset the background to black

diff --git a/src/content/docs/cheerp/01-tutorials/04-webworkers.md b/src/content/docs/cheerp/01-tutorials/04-webworkers.md
@@ -22,7 +22,7 @@ Cheerp is designed to give you full access to all browser APIs, including WebWor
 
 You can use Cheerp to generate JavaScript running in the Worker, JavaScript in the main page that run a Worker, or both. Below you find a trivial example ported from http://www.html5rocks.com/en/tutorials/workers/basics/.
 
-```cpp
+```cpp title="cheerpWorkerHost.cpp"
 // cheerpWorkerHost.cpp: Code to include in the HTML page
 #include <cheerp/client.h>
 #include <cheerp/clientlib.h>
@@ -39,8 +39,8 @@ void webMain()
 }
 ```
 
-```cpp
-// cheerpWorker.cpp: Code that run inside the worker
+```cpp title="cheerpWorker.cpp"
+// cheerpWorker.cpp: Code that runs inside the worker
 #include <cheerp/clientlib.h>
 #include <cheerp/client.h>
 
@@ -58,14 +58,14 @@ void webMain()
 
 You can build these files using the following commands:
 
-```
+```shell
 /opt/cheerp/bin/clang++ -O3 cheerpWorkerHost.cpp -o cheerpWorkerHost.js
 /opt/cheerp/bin/clang++ -O3 cheerpWorker.cpp -o cheerpWorker.js
 ```
 
 For your convenience here is the needed HTML to execute the code
 
-```html
+```html title="cheerpWorker.html"
 <!doctype html>
 <html lang="en">
 	<head>