Syntax highlight Cairo code on the website

Signed-off-by: Marek Kaput <marek.kaput@swmansion.com>

website/.vitepress/config.mjs

@@ -1,5 +1,6 @@
 import { defineConfig } from "vitepress";
 import { withMermaid } from "vitepress-plugin-mermaid";
+import * as syntaxes from "./syntaxes.mjs";
 
 const base = "/scarb/";
 const absoluteBase = `https://docs.swmansion.com${base}`;
@@ -199,6 +200,10 @@ export default withMermaid(
     sitemap: {
       hostname: absoluteBase,
     },
+
+    markdown: {
+      languages: [syntaxes.cairo],
+    },
   }),
 );
 

website/.vitepress/syntaxes.mjs

@@ -0,0 +1,9 @@
+import syntax from "cairo-tm-grammar";
+
+export const cairo = {
+  ...syntax,
+
+  // NODE: The Cairo syntax uses capital-case for language name,
+  //   which is interpreted differently by Shiki, hence this override.
+  name: "cairo",
+};

website/docs/reference/conditional-compilation.md

@@ -58,7 +58,8 @@ Features in Scarb provide a way to conditionally compile specific parts of the c
 
 ### `[features]` section
 
-A package defines a set of named features in the `[features]` section of `Scarb.toml` file. Each defined feature can list other features that should be enabled with it.
+A package defines a set of named features in the `[features]` section of `Scarb.toml` file. Each defined feature can
+list other features that should be enabled with it.
 
 For example, a package supporting various hash functions might define features like this:
 
@@ -69,9 +70,10 @@ pedersen = []
 keccak = []
 ```
 
-With these features set, conditional compilation (`cfg`) attributes can be used to selectively include code to support requested features during compile time. For instance:
+With these features set, conditional compilation (`cfg`) attributes can be used to selectively include code to support
+requested features during compile time. For instance:
 
-```rust
+```cairo
 // Conditionally include a module
 #[cfg(feature: 'poseidon')]
 mod poseidon;
@@ -83,7 +85,8 @@ fn hash_pedersen(value: felt252) -> felt252 {
 }
 ```
 
-To enable specific features, use the `--features` flag followed by a comma-separated list of features. For example, to build with only the `poseidon` and `pedersen` features enabled:
+To enable specific features, use the `--features` flag followed by a comma-separated list of features. For example, to
+build with only the `poseidon` and `pedersen` features enabled:
 
 ```
 scarb build --features poseidon,pedersen
@@ -93,7 +96,8 @@ Enabling all features can be done with the `--all-features` flag.
 
 ### `default` features
 
-By default, all features are disabled unless explicitly enabled. However, this behaviour can be changed by specifying a default feature in the `[features]` section, like so:
+By default, all features are disabled unless explicitly enabled. However, this behaviour can be changed by specifying a
+default feature in the `[features]` section, like so:
 
 ```toml
 [features]

website/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@octokit/core": "5.1.0",
+    "cairo-tm-grammar": "github:software-mansion-labs/cairo-tm-grammar",
     "mermaid": "10.9.1",
     "prettier": "3.3.2",
     "semver": "7.6.2",