Change syntax highlighting to be close to the default 4D editor colors

docusaurus.config.js

@@ -1,7 +1,4 @@
-const { themes } = require('prism-react-renderer');
 const { default: remarkGfm } = require('remark-gfm');
-const lightTheme = themes.github;
-const darkTheme = themes.palenight;
 
 const isProduction = process.env.GITHUB_REPOSITORY_OWNER === '4d';
 
@@ -136,8 +133,8 @@ module.exports = {
       },
     },
     prism: {
-      theme: lightTheme,
-      darkTheme: darkTheme,
+      theme: require('./src/theme/highlight/themes/default4D_Light'),
+      darkTheme: require('./src/theme/highlight/themes/default4D_Dark'),
     },
     navbar: {
       title: "4D Documentation",

src/theme/highlight/language/prism-4d.js

@@ -16,24 +16,35 @@ Prism.languages["4d"] = {
 		pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
 		greedy: true
 	},
-
+  // Specific pattern for `#DECLARE` to not conflict with the '#' operator
+  'special-keyword': {
+    pattern: /#DECLARE\w*/,
+    alias: 'keyword' // This uses the 'keyword' styling
+  },
 	'keyword': [
 		{
-      pattern: /\b(?:Begin SQL|This|End SQL|For each|Class extends|Class constructor|End for each|If|Else|End if|Case of|End case|DECLARE|For|End for|Use|End use|While|End while|Repeat|Until|Function|var|property|exposed|local|return|break|continue)\b/,
+      pattern: /\b(?:Begin SQL|This|End SQL|For each|Class extends|Class constructor|End for each|If|Else|End if|Case of|End case|For|End for|Use|End use|While|End while|Repeat|Until|Function|var|property|exposed|local|return|break|continue)\b/,
 		},
 	],
   'builtin': [
     {
       pattern: /(: )(4D|Integer|Text|Real|Picture|Pointer|Boolean|Time|Date|Blob|Object|Collection|Variant|cs)/,
       lookbehind : true
     }
+  ],
+  // specific pattern for 'ds' and 'Form because unlike other 'builtin', there is no space before 'ds'
+  'special-builtin': [
+    {
+      pattern: /\b(?:ds|Form)\b/,
+      lookbehind : true,
+      alias: "builtin"
+    }
   ],
   	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
     // allows space
 	'memberFunction': {
     pattern : /(\.)#?[_$a-zA-Z\xA0-\uFFFF](?:[$\w\xA0-\uFFFF\s])+(?=\()/,
     greedy: true,
-    alias: 'function'
   },
   // allows space
   'command': {
@@ -66,12 +77,11 @@ Prism.languages["4d"] = {
   'boolean': /\b(?:True|False)\b/,
 
 	'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?(?!D)/,
-	'operator': /:=|->|[!?:#\-+*\/%&|^!=<>]=?|\?\?=?|\?\.?|[~:]|\*\|/,
+  'operator': /#|:=|->|[!?\-+*\/%&|^!=<>]=?|\?\?=?|\?\.?|[~:]|\*\|/,
 
   'punctuation': /[{}[\];(),.:]/
 };
 
 
 
 Prism.languages.code4d = Prism.languages["4d"]
-

src/theme/highlight/themes/default4D_Dark/index.cjs.js

@@ -0,0 +1,128 @@
+'use strict';
+
+// Converted automatically using ./tools/themeFromVsCode
+var theme = {
+  plain: {
+    color: "#ffffff",
+    backgroundColor: "#292d3e"
+  },
+  styles: [{
+    types: ["comment"],
+    style: {
+      color: "rgb(143, 143, 143)",
+    }
+  }, {
+    types: ["string", "inserted"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  }, {
+    types: ["number"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  },
+  {
+    types: ["char", "constant"],
+    style: {
+      color: "rgb(255, 255, 255)",
+    }
+  },
+  {
+    types: ["memberFunction"],
+    style: {
+      color: "rgb(78, 195, 110)",
+      fontStyle: "italic",
+    }
+  },
+  {
+    types: ["function"],
+    style: {
+      color: "rgb(89, 187, 0)",
+      fontWeight: "bold",
+    }
+  },
+  {
+    types: ["builtin", "command"],
+    style: {
+      color: "rgb(89, 187, 0)",
+      fontWeight: "bold"
+    }
+  }, 
+  {
+    types: ["property"],
+    style: {
+      color: "rgb(160, 128, 107)",
+    }
+  },
+  {
+    types: ["variable"],
+    style: {
+      color: "rgb(24, 179, 241)"
+    }
+  },
+  {
+    types: ["interprocess-variable"],
+    style: {
+      color: "rgb(255, 0, 136)"
+    }
+  }, 
+  {
+    types: ["parameters"],
+    style: {
+      color: "rgb(12, 112, 255)"
+    }
+  }, 
+  {
+    types: ["punctuation", "selector"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  }, {
+    types: ["class-name", "attr-name"],
+    style: {
+      color: "rgb(255, 203, 107)"
+    }
+  }, {
+    types: ["tag", "deleted"],
+    style: {
+      color: "rgb(255, 85, 114)"
+    }
+  }, {
+    types: ["operator"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  }, {
+    types: ["boolean"],
+    style: {
+      color: "rgb(089, 187, 0)",
+      fontWeight: "bold",
+    }
+  }, {
+    types: ["keyword"],
+    style: {
+      color: "rgb(0, 142, 0)",
+      fontWeight: "bold"
+    }
+  }, {
+    types: ["doctype"],
+    style: {
+      color: "rgb(199, 146, 234)",
+      fontStyle: "italic"
+    }
+  }, {
+    types: ["namespace"],
+    style: {
+      color: "rgb(178, 204, 214)",
+      fontWeight: "bold"
+    }
+  }, {
+    types: ["url"],
+    style: {
+      color: "rgb(221, 221, 221)"
+    }
+  }]
+};
+
+module.exports = theme;

src/theme/highlight/themes/default4D_Dark/index.js

@@ -0,0 +1,84 @@
+// Converted automatically using ./tools/themeFromVsCode
+var theme = {
+  plain: {
+    color: "#ffffff",
+    backgroundColor: "#292d3e"
+  },
+  styles: [{
+    types: ["comment"],
+    style: {
+      color: "rgb(143, 143, 143)",
+    }
+  }, {
+    types: ["string", "inserted"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  }, {
+    types: ["number"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  }, {
+    types: ["builtin", "char", "constant", "function"],
+    style: {
+      color: "rgb(89, 187, 0)",
+      fontWeight: "bold",
+    }
+  }, {
+    types: ["punctuation", "selector"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  }, {
+    types: ["variable"],
+    style: {
+      color: "rgb(24, 179, 241)"
+    }
+  }, {
+    types: ["class-name", "attr-name"],
+    style: {
+      color: "rgb(255, 203, 107)"
+    }
+  }, {
+    types: ["tag", "deleted"],
+    style: {
+      color: "rgb(255, 85, 114)"
+    }
+  }, {
+    types: ["operator"],
+    style: {
+      color: "rgb(255, 255, 255)"
+    }
+  }, {
+    types: ["boolean"],
+    style: {
+      color: "rgb(089, 187, 0)",
+      fontWeight: "bold",
+    }
+  }, {
+    types: ["keyword"],
+    style: {
+      color: "rgb(0, 142, 0)",
+      fontWeight: "bold",
+    }
+  }, {
+    types: ["doctype"],
+    style: {
+      color: "rgb(199, 146, 234)",
+      fontStyle: "italic"
+    }
+  }, {
+    types: ["namespace"],
+    style: {
+      color: "rgb(178, 204, 214)"
+    }
+  }, {
+    types: ["url"],
+    style: {
+      color: "rgb(221, 221, 221)"
+    }
+  }]
+};
+
+export default theme;