Merge pull request #162 from Tedoshiii/teodor-create-color-theme

Create custom color themes for website code snippets
w3c · Jul 5, 2024 · eab3d08 · eab3d08
2 parents 1d42616 + be33fa4
commit eab3d08
Show file tree

Hide file tree

Showing 9 changed files with 280 additions and 3 deletions.
diff --git a/Tutorials/whatiswot/Project_Details/code_color_theme.md b/Tutorials/whatiswot/Project_Details/code_color_theme.md
@@ -0,0 +1,33 @@
+# Website Code Syntax Highlighting Theme
+
+This document outlines the syntax highlighting theme used for code snippets in the website. Colors are picked out to complement website color style.
+
+## Color Assignments - Light Mode
+
+| Color Preview | Element             | Color Value  |
+|---------------|---------------------|--------------|
+|![color](https://img.shields.io/badge/Preview-393A34)| Plain Text          | `#393A34`    |
+|![color](https://img.shields.io/badge/Preview-f6f8fa)| Background Color    | `#f6f8fa`    |
+|![color](https://img.shields.io/badge/Preview-999988)| Comment, prolog, doctype, cdata | `#999988`    |
+|![color](https://img.shields.io/badge/Preview-ED7D31)| String, attr-value  | `#ED7D31`    |
+|![color](https://img.shields.io/badge/Preview-06417C)| Punctuation, operator | `#06417C`    |
+|![color](https://img.shields.io/badge/Preview-3C87CD)| Entity, url, symbol, number, boolean, variable, constant, property, regex, inserted | `#3C87CD`    |
+|![color](https://img.shields.io/badge/Preview-00a4db)| Atrule, keyword, attr-name, selector | `#00a4db`    |
+|![color](https://img.shields.io/badge/Preview-d73a49)| Function, deleted, tag | `#d73a49`    |
+|![color](https://img.shields.io/badge/Preview-6f42c1)| Function-variable   | `#6f42c1`    |
+|![color](https://img.shields.io/badge/Preview-00009f)| Tag, selector, keyword | `#00009f`    |
+
+## Color Assignments - Dark Mode
+
+| Color Preview | Element             | Color Value  |
+|---------------|---------------------|--------------|
+|![color](https://img.shields.io/badge/Preview-F8F8F2)| Plain Text          | `#393A34`    |
+|![color](https://img.shields.io/badge/Preview-282A36)| Background Color    | `#f6f8fa`    |
+|![color](https://img.shields.io/badge/Preview-999988)| Comment, prolog, doctype, cdata | `#999988`    |
+|![color](https://img.shields.io/badge/Preview-ED7D31)| String, attr-value  | `#ED7D31`    |
+|![color](https://img.shields.io/badge/Preview-AFCBE0)| Punctuation, operator | `#06417C`    |
+|![color](https://img.shields.io/badge/Preview-70ACE5)| Entity, url, symbol, number, boolean, variable, constant, property, regex, inserted | `#3C87CD`    |
+|![color](https://img.shields.io/badge/Preview-00a4db)| Atrule, keyword, attr-name, selector | `#00a4db`    |
+|![color](https://img.shields.io/badge/Preview-d73a49)| Function, deleted, tag | `#d73a49`    |
+|![color](https://img.shields.io/badge/Preview-6f42c1)| Function-variable   | `#6f42c1`    |
+|![color](https://img.shields.io/badge/Preview-ECBF7C)| Tag, selector, keyword | `#00009f`    |
diff --git a/Tutorials/whatiswot/website/docs/preliminary/json-schema/practice-validators.md b/Tutorials/whatiswot/website/docs/preliminary/json-schema/practice-validators.md
@@ -191,7 +191,7 @@ from jsonschema import validate
 
 This is the same schema from the previous example.
 
-```py
+```json
 schema = { 
     "type": "object", 
     "properties":    { 

diff --git a/Tutorials/whatiswot/website/docusaurus.config.js b/Tutorials/whatiswot/website/docusaurus.config.js
@@ -1,8 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const lightCodeTheme = require("./src/theme/wotLight");
+const darkCodeTheme = require("./src/theme/wotDark");
 require("dotenv").config();
 
 /** @type {import('@docusaurus/types').Config} */

diff --git a/Tutorials/whatiswot/website/src/theme/wotDark/index.cjs.js b/Tutorials/whatiswot/website/src/theme/wotDark/index.cjs.js
@@ -0,0 +1,59 @@
+'use strict';
+
+var theme = {
+  plain: {
+      color: "#F8F8F2",
+      backgroundColor: "#282A36"
+  },
+    styles: [{
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#999988",
+        fontStyle: "italic"
+      }
+    }, {
+      types: ["namespace"],
+      style: {
+        opacity: 0.7
+      }
+    }, {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#ED7D31"
+      }
+    }, {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#AFCBE0"
+      }
+    }, {
+      types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"],
+      style: {
+        color: "#70ACE5"
+      }
+    }, {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "#00a4db"
+      }
+    }, {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "#d73a49"
+      }
+    }, {
+      types: ["function-variable"],
+      style: {
+        color: "#6f42c1"
+      }
+    }, {
+      types: ["tag", "selector", "keyword"],
+      style: {
+        color: "#ECBF7C"
+      }
+    }]
+  };
+
+  module.exports = theme;
+
+
diff --git a/Tutorials/whatiswot/website/src/theme/wotDark/index.js b/Tutorials/whatiswot/website/src/theme/wotDark/index.js
@@ -0,0 +1,56 @@
+var theme = {
+    plain: {
+      color: "#F8F8F2",
+      backgroundColor: "#282A36"
+  },
+    styles: [{
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#999988",
+        fontStyle: "italic"
+      }
+    }, {
+      types: ["namespace"],
+      style: {
+        opacity: 0.7
+      }
+    }, {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#ED7D31"
+      }
+    }, {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#AFCBE0"
+      }
+    }, {
+      types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"],
+      style: {
+        color: "#70ACE5"
+      }
+    }, {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "#00a4db"
+      }
+    }, {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "#d73a49"
+      }
+    }, {
+      types: ["function-variable"],
+      style: {
+        color: "#6f42c1"
+      }
+    }, {
+      types: ["tag", "selector", "keyword"],
+      style: {
+        color: "#ECBF7C"
+      }
+    }]
+  };
+
+  export default theme;
+
diff --git a/Tutorials/whatiswot/website/src/theme/wotDark/package.json b/Tutorials/whatiswot/website/src/theme/wotDark/package.json
@@ -0,0 +1,7 @@
+{
+    "name": "theme/wotDark",
+    "private": true,
+    "sideEffects": false,
+    "main": "index.cjs.js",
+    "module": "index.js"
+  }
diff --git a/Tutorials/whatiswot/website/src/theme/wotLight/index.cjs.js b/Tutorials/whatiswot/website/src/theme/wotLight/index.cjs.js
@@ -0,0 +1,59 @@
+'use strict';
+
+var theme = {
+    plain: {
+      color: "#393A34",
+      backgroundColor: "#f6f8fa"
+    },
+    styles: [{
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#999988",
+        fontStyle: "italic"
+      }
+    }, {
+      types: ["namespace"],
+      style: {
+        opacity: 0.7
+      }
+    }, {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#ED7D31"
+      }
+    }, {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#06417C"
+      }
+    }, {
+      types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"],
+      style: {
+        color: "#3C87CD"
+      }
+    }, {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "#00a4db"
+      }
+    }, {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "#d73a49"
+      }
+    }, {
+      types: ["function-variable"],
+      style: {
+        color: "#6f42c1"
+      }
+    }, {
+      types: ["tag", "selector", "keyword"],
+      style: {
+        color: "#00009f"
+      }
+    }]
+  };
+
+  module.exports = theme;
+
+
diff --git a/Tutorials/whatiswot/website/src/theme/wotLight/index.js b/Tutorials/whatiswot/website/src/theme/wotLight/index.js
@@ -0,0 +1,56 @@
+var theme = {
+    plain: {
+      color: "#393A34",
+      backgroundColor: "#f6f8fa"
+    },
+    styles: [{
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#999988",
+        fontStyle: "italic"
+      }
+    }, {
+      types: ["namespace"],
+      style: {
+        opacity: 0.7
+      }
+    }, {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#ED7D31"
+      }
+    }, {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#06417C"
+      }
+    }, {
+      types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"],
+      style: {
+        color: "#3C87CD"
+      }
+    }, {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "#00a4db"
+      }
+    }, {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "#d73a49"
+      }
+    }, {
+      types: ["function-variable"],
+      style: {
+        color: "#6f42c1"
+      }
+    }, {
+      types: ["tag", "selector", "keyword"],
+      style: {
+        color: "#00009f"
+      }
+    }]
+  };
+
+  export default theme;
+
diff --git a/Tutorials/whatiswot/website/src/theme/wotLight/package.json b/Tutorials/whatiswot/website/src/theme/wotLight/package.json
@@ -0,0 +1,7 @@
+{
+    "name": "theme/wotLight",
+    "private": true,
+    "sideEffects": false,
+    "main": "index.cjs.js",
+    "module": "index.js"
+  }