Chat: brought back syntax highlighting for most common languages

vscode/package.json

@@ -1410,13 +1410,13 @@
     "glob": "^7.2.3",
     "graceful-fs": "^4.2.11",
     "he": "^1.2.0",
+    "highlight.js": "11.9.0",
     "http-proxy-agent": "^7.0.2",
     "https-proxy-agent": "^7.0.5",
     "ini": "^4.1.2",
     "js-levenshtein": "^1.1.6",
     "lexical": "^0.17.0",
     "lodash": "^4.17.21",
-    "lowlight": "^3.1.0",
     "lru-cache": "^10.0.0",
     "lucide-react": "^0.378.0",
     "mac-ca": "^2.0.3",

vscode/webviews/components/MarkdownFromCody.tsx

@@ -1,5 +1,4 @@
 import { CodyIDE } from '@sourcegraph/cody-shared'
-import { common } from 'lowlight'
 import type { ComponentProps, FunctionComponent } from 'react'
 import { useMemo } from 'react'
 import Markdown, { defaultUrlTransform } from 'react-markdown'
@@ -8,6 +7,7 @@ import rehypeHighlight, { type Options as RehypeHighlightOptions } from 'rehype-
 import rehypeSanitize, { type Options as RehypeSanitizeOptions, defaultSchema } from 'rehype-sanitize'
 import remarkGFM from 'remark-gfm'
 import { remarkAttachFilePathToCodeBlocks } from '../chat/extract-file-path'
+import { SYNTAX_HIGHLIGHTING_LANGUAGES } from '../utils/highlight'
 import { useConfig } from '../utils/useConfig'
 
 /**
@@ -117,7 +117,12 @@ function markdownPluginProps(): Pick<
                             ...(defaultSchema.attributes?.code || []),
                             // We use `data-file-path` to attach file path metadata to <code> blocks.
                             ['data-file-path'],
-                            ['className', ...LANGUAGES.map(language => `language-${language}`)],
+                            [
+                                'className',
+                                ...Object.keys(SYNTAX_HIGHLIGHTING_LANGUAGES).map(
+                                    language => `language-${language}`
+                                ),
+                            ],
                         ],
                     },
                 } satisfies RehypeSanitizeOptions,
@@ -129,9 +134,9 @@ function markdownPluginProps(): Pick<
                 rehypeHighlight as any,
                 {
                     detect: true,
-                    languages: Object.fromEntries(
-                        Object.entries(common).filter(([language]) => LANGUAGES.includes(language))
-                    ),
+                    languages: {
+                        ...SYNTAX_HIGHLIGHTING_LANGUAGES,
+                    },
 
                     // `ignoreMissing: true` is required to avoid errors when trying to highlight
                     // partial code blocks received from the LLM that have (e.g.) "```p" for
@@ -146,52 +151,3 @@ function markdownPluginProps(): Pick<
     }
     return _markdownPluginProps
 }
-
-const LANGUAGES = [
-    'apex',
-    'bash',
-    'c',
-    'clojure',
-    'cpp',
-    'cpp',
-    'cs',
-    'csharp',
-    'css',
-    'dart',
-    'diff',
-    'diff',
-    'dockerfile',
-    'dockerfile',
-    'elixir',
-    'fortran',
-    'go',
-    'graphql',
-    'groovy',
-    'haskell',
-    'html',
-    'http',
-    'java',
-    'javascript',
-    'json',
-    'jsonc',
-    'kotlin',
-    'lua',
-    'markdown',
-    'matlab',
-    'nix',
-    'objectivec',
-    'ocaml',
-    'perl',
-    'php',
-    'python',
-    'r',
-    'ruby',
-    'rust',
-    'scala',
-    'sql',
-    'swift',
-    'typescript',
-    'verilog',
-    'vhdl',
-    'yaml',
-]

vscode/webviews/utils/highlight.ts

@@ -0,0 +1,111 @@
+import arduino from 'highlight.js/lib/languages/arduino'
+import bash from 'highlight.js/lib/languages/bash'
+import c from 'highlight.js/lib/languages/c'
+import clojure from 'highlight.js/lib/languages/clojure'
+import cpp from 'highlight.js/lib/languages/cpp'
+import csharp from 'highlight.js/lib/languages/csharp'
+import css from 'highlight.js/lib/languages/css'
+import dart from 'highlight.js/lib/languages/dart'
+import delphi from 'highlight.js/lib/languages/delphi'
+import diff from 'highlight.js/lib/languages/diff'
+import dockerfile from 'highlight.js/lib/languages/dockerfile'
+import elixir from 'highlight.js/lib/languages/elixir'
+import fortran from 'highlight.js/lib/languages/fortran'
+import go from 'highlight.js/lib/languages/go'
+import graphql from 'highlight.js/lib/languages/graphql'
+import groovy from 'highlight.js/lib/languages/groovy'
+import haskell from 'highlight.js/lib/languages/haskell'
+import http from 'highlight.js/lib/languages/http'
+import ini from 'highlight.js/lib/languages/ini'
+import java from 'highlight.js/lib/languages/java'
+import javascript from 'highlight.js/lib/languages/javascript'
+import json from 'highlight.js/lib/languages/json'
+import jsonc from 'highlight.js/lib/languages/json'
+import kotlin from 'highlight.js/lib/languages/kotlin'
+import less from 'highlight.js/lib/languages/less'
+import lua from 'highlight.js/lib/languages/lua'
+import makefile from 'highlight.js/lib/languages/makefile'
+import markdown from 'highlight.js/lib/languages/markdown'
+import matlab from 'highlight.js/lib/languages/matlab'
+import nix from 'highlight.js/lib/languages/nix'
+import objectivec from 'highlight.js/lib/languages/objectivec'
+import ocaml from 'highlight.js/lib/languages/ocaml'
+import perl from 'highlight.js/lib/languages/perl'
+import php from 'highlight.js/lib/languages/php'
+import phpTemplate from 'highlight.js/lib/languages/php-template'
+import plaintext from 'highlight.js/lib/languages/plaintext'
+import python from 'highlight.js/lib/languages/python'
+import pythonRepl from 'highlight.js/lib/languages/python-repl'
+import r from 'highlight.js/lib/languages/r'
+import ruby from 'highlight.js/lib/languages/ruby'
+import rust from 'highlight.js/lib/languages/rust'
+import scala from 'highlight.js/lib/languages/scala'
+import scss from 'highlight.js/lib/languages/scss'
+import shell from 'highlight.js/lib/languages/shell'
+import sql from 'highlight.js/lib/languages/sql'
+import swift from 'highlight.js/lib/languages/swift'
+import typescript from 'highlight.js/lib/languages/typescript'
+import vbnet from 'highlight.js/lib/languages/vbnet'
+import verilog from 'highlight.js/lib/languages/verilog'
+import vhdl from 'highlight.js/lib/languages/vhdl'
+import wasm from 'highlight.js/lib/languages/wasm'
+import html from 'highlight.js/lib/languages/xml' // highlight.js uses 'xml' for HTML/XML
+import xml from 'highlight.js/lib/languages/xml'
+import yaml from 'highlight.js/lib/languages/yaml'
+
+export const SYNTAX_HIGHLIGHTING_LANGUAGES = {
+    arduino,
+    bash,
+    c,
+    clojure,
+    cpp,
+    csharp,
+    css,
+    dart,
+    delphi,
+    diff,
+    dockerfile,
+    elixir,
+    fortran,
+    go,
+    graphql,
+    groovy,
+    haskell,
+    html,
+    http,
+    ini,
+    java,
+    javascript,
+    json,
+    jsonc,
+    kotlin,
+    less,
+    lua,
+    makefile,
+    markdown,
+    matlab,
+    nix,
+    objectivec,
+    ocaml,
+    perl,
+    php,
+    phpTemplate,
+    plaintext,
+    python,
+    pythonRepl,
+    r,
+    ruby,
+    rust,
+    scala,
+    scss,
+    shell,
+    sql,
+    swift,
+    typescript,
+    vbnet,
+    verilog,
+    vhdl,
+    wasm,
+    xml,
+    yaml,
+}