Custom syntax highlighting & clickable keywords

web/astro.config.mjs

@@ -15,19 +15,6 @@ export default defineConfig({
 	},
 	integrations: [
 		starlight({
-			expressiveCode: {
-				themes: [JSON.parse(fs.readFileSync('./src/themes/mtasa_lua-theme_dark.json', 'utf-8')), JSON.parse(fs.readFileSync('./src/themes/mtasa_lua-theme_light.json', 'utf-8'))],
-				shiki: {
-					langs: [
-						{
-							id: 'lua',
-							scopeName: 'source.lua.mta',
-							...JSON.parse(fs.readFileSync('./src/grammars/lua-mta.tmLanguage.json', 'utf-8')),
-						},
-					],
-				},
-			},
-
 			plugins: [
 				mtasaStarlightThemePlugin(),
 			],

web/ec.config.mjs

@@ -0,0 +1,17 @@
+import fs from 'fs';
+
+export default {
+  themes: [
+    JSON.parse(fs.readFileSync('./src/themes/mtasa_lua-theme_dark.json', 'utf-8')),
+    JSON.parse(fs.readFileSync('./src/themes/mtasa_lua-theme_light.json', 'utf-8')),
+  ],
+  shiki: {
+    langs: [
+      {
+        id: 'lua',
+        scopeName: 'source.lua.mta',
+        ...JSON.parse(fs.readFileSync('./src/grammars/lua-mta.tmLanguage.json', 'utf-8')),
+      },
+    ],
+  },
+};

web/mta_highlighting/generate-lua-tmlanguage.js

@@ -11,6 +11,8 @@ const functionsDir = path.resolve(__dirname, '../../functions');
 const basePath = path.resolve(__dirname, './lua-base.tmLanguage.json');
 const outputPath = path.resolve(__dirname, '../src/grammars/lua-mta.tmLanguage.json');
 
+const mtaKeywords = ['string','bool','boolean','number','int','float','element','player','vehicle','ped','object','building'];
+
 function extractFunctionsWithScope(yamlContent) {
   if (yamlContent.shared?.name) {
     return [{ name: yamlContent.shared.name, scope: 'support.function.mta-shared' }];
@@ -44,6 +46,13 @@ async function generateTmLanguage() {
       name: scope,
     }));
 
+  if (mtaKeywords.length > 0) {
+    patterns.push({
+      match: `\\b(${mtaKeywords.join('|')})\\b`,
+      name: 'keyword.mta',
+    });
+  }
+
   const baseGrammar = JSON.parse(fs.readFileSync(basePath, 'utf-8'));
   baseGrammar.patterns = [...patterns, ...(baseGrammar.patterns || [])];
 

web/public/mta-keywords_linker.js

@@ -0,0 +1,41 @@
+import tmLanguage from "../src/grammars/lua-mta.tmLanguage.json";
+
+function extractFunctions() {
+  const wantedScopes = new Set([
+    "support.function.mta-shared",
+    "support.function.mta-server",
+    "support.function.mta-client",
+    'keyword.mta'
+  ]);
+
+  return tmLanguage.patterns?.reduce((funcs, { match, name }) => {
+    if (match && wantedScopes.has(name)) {
+      funcs.push(...match.match(/\\b\(([^)]+)\)\\b/)?.[1]?.split("|") || []);
+    }
+    return funcs;
+  }, []) || [];
+}
+
+const allFunctions = new Set(extractFunctions());
+
+function initKeywordLinker() {
+  function onDomReady() {
+    const spans = [
+      ...document.querySelectorAll(".examples-section .code-example pre code span"),
+      ...document.querySelectorAll(".function-syntax span, .expressive-code span")
+    ];
+
+    spans.forEach(span => {
+      const text = span.textContent;
+      if (allFunctions.has(text)) {
+        span.innerHTML = `<a href="/${text}" class="mta-keyword-link">${text}</a>`;
+      }
+    });
+  }
+
+  document.readyState === "loading"
+    ? window.addEventListener("DOMContentLoaded", onDomReady)
+    : onDomReady();
+}
+
+initKeywordLinker();

web/src/components/CodeExamplesSection.astro

@@ -27,3 +27,5 @@ const { codeExamples } = Astro.props;
     ))}
   </div>
 )}
+
+<script type="module" src="/mta-keywords_linker.js"></script>

web/src/grammars/lua-mta.tmLanguage.json

@@ -10,6 +10,10 @@
       "match": "\\b(setCursorPosition|setCursorAlpha|getCursorPosition|getCursorAlpha)\\b",
       "name": "support.function.mta-client"
     },
+    {
+      "match": "\\b(string|bool|boolean|number|int|float|element|player|vehicle|ped|object|building)\\b",
+      "name": "keyword.mta"
+    },
     {
       "begin": "\\b(?:(local)\\s+)?(function)\\b(?![,:])",
       "beginCaptures": {

web/src/styles/custom.css

@@ -46,3 +46,12 @@
 .side-server {
     color: var(--color-type-server);
 }
+
+.mta-keyword-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.mta-keyword-link:hover {
+    font-weight: 100;
+}

web/src/themes/mtasa_lua-theme_dark.json

@@ -47,6 +47,14 @@
       }
     },
 
+    {
+      "scope": "keyword.mta",
+      "settings": {
+        "foreground": "#6edbdb",
+        "fontStyle": "bold"
+      }
+    },
+
     {
       "scope": "meta.function.lua",
       "settings": {

web/src/themes/mtasa_lua-theme_light.json

@@ -42,6 +42,15 @@
         "fontStyle": "bold"
       }
     },
+
+    {
+      "scope": "keyword.mta",
+      "settings": {
+        "foreground": "#6edb9a",
+        "fontStyle": "bold"
+      }
+    },
+
     {
       "scope": "meta.function.lua",
       "settings": {