Add Markdown callouts & automatic OS-specific shell commands

astro.config.mjs

@@ -7,6 +7,7 @@ import pagefind from "astro-pagefind";
 import svelte from "@astrojs/svelte";
 import prefetch from "@astrojs/prefetch";
 import astroExpressiveCode from "astro-expressive-code";
+import remarkObsidianCallout from "remark-obsidian-callout";
 const prod = process.env.NODE_ENV === "production";
 
 // https://astro.build/config
@@ -29,11 +30,19 @@ export default defineConfig({
 		shikiConfig: {
 			theme: "dracula",
 		},
+		remarkPlugins: [
+			[
+				remarkObsidianCallout,
+				{
+					blockquoteClass: "not-prose",
+				},
+			],
+		],
 	},
 	compressHTML: prod,
 	build: {
 		format: "file",
-		inlineStylesheets: "auto",
+		inlineStylesheets: "always",
 	},
 	trailingSlash: "never",
 });

package.json

@@ -33,6 +33,7 @@
 		"prettier": "^3.0.3",
 		"prettier-plugin-astro": "^0.12.0",
 		"prettier-plugin-svelte": "^3.0.3",
+		"remark-obsidian-callout": "^1.1.3",
 		"typescript": "^5.2.2"
 	},
 	"prettier": {

postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+	plugins: {
+		"tailwindcss/nesting": {},
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

src/content/docs/cheerp/00-installation/01-ppa.md

@@ -12,13 +12,13 @@ To add it to your system you have two options:
 
 add the following line to /etc/apt/sources.list
 
-```
+```sh
 deb http://ppa.launchpad.net/leaningtech-dev/cheerp-ppa/ubuntu focal main
 ```
 
 and import the key for apt with the command
 
-```
+```sh
 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 84540D4B9BF457D5
 sudo apt-get update
 ```
@@ -29,7 +29,7 @@ or
 
 run the following command
 
-```
+```sh
 sudo add-apt-repository ppa:leaningtech-dev/cheerp-ppa
 sudo apt-get update
 ```
@@ -38,6 +38,6 @@ sudo apt-get update
 
 To install all cheerp components, run
 
-```
+```sh
 apt-get install cheerp-core
 ```

src/content/docs/cheerp/00-installation/02-rhel8.md

@@ -10,7 +10,7 @@ We provide a repo with stable builds at https://rpm.leaningtech.com/stable and a
 
 To install Cheerp just add the repo configuration file (Stable in this case):
 
-```
+```sh
 cat << EOF > /etc/yum.repos.d/cheerp.repo
 [Cheerp-Stable]
 name=Cheerp Stable
@@ -23,7 +23,7 @@ EOF
 
 And install the `cheerp-core` package:
 
-```
+```sh
 yum install cheerp-core
 ```
 

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

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>

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

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>