Improve language selection

src/util/highlighting.js

@@ -1,4 +1,7 @@
-import { highlight, languages } from 'prismjs/components/prism-core';
+import {
+  highlight,
+  languages as prismLanguages,
+} from 'prismjs/components/prism-core';
 
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-css';
@@ -21,47 +24,43 @@ import 'prismjs/components/prism-log';
 import 'prismjs/components/prism-markdown';
 import 'prismjs/components/prism-php';
 import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-properties';
 import 'prismjs/components/prism-protobuf';
 import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
 import 'prismjs/components/prism-ruby';
 import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-sql';
 import 'prismjs/components/prism-toml';
 import 'prismjs/components/prism-yaml';
 
-export const languageIds = [
-  'plain',
-  'markup',
-  'css',
-  'clike',
-  'bash',
-  'diff',
-  'docker',
-  'go',
-  'groovy',
-  'haskell',
-  'java',
-  'javastacktrace',
-  'javascript',
-  'json',
-  'kotlin',
-  'log',
-  'markdown',
-  'php',
-  'protobuf',
-  'python',
-  'jsx',
-  'typescript',
-  'ruby',
-  'rust',
-  'sql',
-  'toml',
-  'yaml',
-];
+export const languages = {
+  config: ['yaml', 'json', 'toml', 'properties'],
+  logs: ['log', 'javastacktrace'],
+  code: [
+    'java',
+    'javascript',
+    'typescript',
+    'python',
+    'kotlin',
+    'clike',
+    'bash',
+    'ruby',
+    'rust',
+    'sql',
+    'go',
+    'groovy',
+    'haskell',
+  ],
+  web: ['markup', 'css', 'php', 'jsx', 'tsx'],
+  misc: ['plain', 'docker', 'diff', 'markdown', 'protobuf'],
+};
+
+export const languageIds = Object.values(languages).flat(1);
 
 export function getHighlighter(language) {
-  const grammar = languages[language] || {};
+  const grammar = prismLanguages[language] || {};
   return input => highlight(input, grammar);
 }