From 399b0235b3470b95f3b7263747b21c48336c4bfb Mon Sep 17 00:00:00 2001
From: Marek Kaput <marek.kaput@swmansion.com>
Date: Wed, 26 Jun 2024 20:11:49 +0200
Subject: [PATCH] Syntax highlight Cairo code on the website

Signed-off-by: Marek Kaput <marek.kaput@swmansion.com>
---
 website/.vitepress/config.mjs                     |  5 +++++
 website/.vitepress/syntaxes.mjs                   |  9 +++++++++
 website/docs/reference/conditional-compilation.md | 14 +++++++++-----
 website/package-lock.json                         |  6 ++++++
 website/package.json                              |  1 +
 5 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 website/.vitepress/syntaxes.mjs

diff --git a/website/.vitepress/config.mjs b/website/.vitepress/config.mjs
index 786ef9df5..e824d4dba 100644
--- a/website/.vitepress/config.mjs
+++ b/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],
+    },
   }),
 );
 
diff --git a/website/.vitepress/syntaxes.mjs b/website/.vitepress/syntaxes.mjs
new file mode 100644
index 000000000..cbd361468
--- /dev/null
+++ b/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",
+};
diff --git a/website/docs/reference/conditional-compilation.md b/website/docs/reference/conditional-compilation.md
index 735ab5f06..e5b73849b 100644
--- a/website/docs/reference/conditional-compilation.md
+++ b/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]
diff --git a/website/package-lock.json b/website/package-lock.json
index 4421556dc..ebb09c905 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "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",
@@ -1311,6 +1312,11 @@
       "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
       "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
     },
+    "node_modules/cairo-tm-grammar": {
+      "version": "2.6.4",
+      "resolved": "git+ssh://git@github.com/software-mansion-labs/cairo-tm-grammar.git#d7902374b2f4eb5cb18b5cb8db52fb5dd154806d",
+      "license": "Apache-2.0"
+    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
diff --git a/website/package.json b/website/package.json
index e33eec171..acb784ec9 100644
--- a/website/package.json
+++ b/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",