feat: Add in more language support for code renderer (#3118)

package.json

@@ -76,6 +76,7 @@
     "lodash": "^4.17.21",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "^1.3.1",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "qs": "^6.11.1",
     "react": "^18.3.1",
@@ -128,6 +129,7 @@
     "@types/js-cookie": "3.0.6",
     "@types/lodash": "4.17.6",
     "@types/node": "^20.5.7",
+    "@types/prismjs": "^1",
     "@types/prop-types": "15.7.12",
     "@types/qs": "6.9.15",
     "@types/react": "^18.3.1",

src/shared/utils/prismLanguageMapper.ts

@@ -5,8 +5,25 @@
  */
 import * as Sentry from '@sentry/react'
 import { type Language } from 'prism-react-renderer'
+// @ts-expect-error - there are no types included for this from the prism-react-renderer package
+import Prism from 'prism-react-renderer/prism'
+;(typeof global !== 'undefined' ? global : window).Prism = Prism
 
-const prismSupportedLanguages = new Map<string, Language>([
+/**
+ * Importing all the languages we want to support that are not included in the
+ * prism-react-renderer package by default.
+ *
+ * Docs: https://github.com/FormidableLabs/prism-react-renderer/tree/v1.3.5?tab=readme-ov-file#faq
+ */
+require('prismjs/components/prism-csharp')
+require('prismjs/components/prism-java')
+require('prismjs/components/prism-kotlin')
+require('prismjs/components/prism-php')
+require('prismjs/components/prism-ruby')
+require('prismjs/components/prism-rust')
+require('prismjs/components/prism-zig')
+
+const prismSupportedLanguages = new Map<string, string>([
   ['html', 'markup'],
   ['xml', 'markup'],
   ['svg', 'markup'],
@@ -19,27 +36,35 @@ const prismSupportedLanguages = new Map<string, Language>([
   ['h', 'clike'],
   ['cc', 'cpp'],
   ['cpp', 'cpp'],
+  ['cs', 'csharp'],
   ['css', 'css'],
+  ['java', 'java'],
   ['js', 'javascript'],
   ['cjs', 'javascript'],
   ['mjs', 'javascript'],
   ['jsx', 'jsx'],
+  ['kt', 'kotlin'],
+  ['kts', 'kotlin'],
   ['go', 'go'],
   ['gql', 'graphql'],
   ['graphql', 'graphql'],
   ['json', 'json'],
   ['less', 'less'],
   ['objc', 'objectivec'],
   ['ocaml', 'ocaml'],
+  ['php', 'php'],
   ['py', 'python'],
+  ['rb', 'ruby'],
   ['reason', 'reason'],
+  ['rs', 'rust'],
   ['sass', 'sass'],
   ['scss', 'scss'],
   ['sql', 'sql'],
   ['ts', 'typescript'],
   ['tsx', 'tsx'],
   ['wasm', 'wasm'],
   ['yaml', 'yaml'],
+  ['zig', 'zig'],
 ])
 
 const DEFAULT_LANGUAGE_TYPE: Language = 'markup'
@@ -48,7 +73,8 @@ export function prismLanguageMapper(fileName: string): Language {
   const fileExtension = fileName.split('.').pop() ?? ''
 
   const supportedLanguage = prismSupportedLanguages.get(fileExtension)
-  if (supportedLanguage) return supportedLanguage
+  // we need to cast this, because we're adding in extra languages that aren't in the prism-react-renderer package
+  if (supportedLanguage) return supportedLanguage as Language
 
   Sentry.captureMessage(`Unsupported language type for filename ${fileName}`, {
     fingerprint: ['unsupported-prism-language'],

yarn.lock

@@ -5594,6 +5594,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prismjs@npm:^1":
+  version: 1.26.4
+  resolution: "@types/prismjs@npm:1.26.4"
+  checksum: 10c0/996be7d119779c4cbe66e58342115a12d35a02226dae3aaa4a744c9652d5a3939c93c26182e18156965ac4f93575ebb309c3469c36f52e60ee5c0f8f27e874df
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*, @types/prop-types@npm:15.7.12":
   version: 15.7.12
   resolution: "@types/prop-types@npm:15.7.12"
@@ -10539,6 +10546,7 @@ __metadata:
     "@types/js-cookie": "npm:3.0.6"
     "@types/lodash": "npm:4.17.6"
     "@types/node": "npm:^20.5.7"
+    "@types/prismjs": "npm:^1"
     "@types/prop-types": "npm:15.7.12"
     "@types/qs": "npm:6.9.15"
     "@types/react": "npm:^18.3.1"
@@ -10580,6 +10588,7 @@ __metadata:
     postcss: "npm:^8.4.31"
     prettier: "npm:^3.3.3"
     prism-react-renderer: "npm:^1.3.1"
+    prismjs: "npm:^1.29.0"
     prop-types: "npm:^15.8.1"
     qs: "npm:^6.11.1"
     react: "npm:^18.3.1"
@@ -16179,6 +16188,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.29.0":
+  version: 1.29.0
+  resolution: "prismjs@npm:1.29.0"
+  checksum: 10c0/d906c4c4d01b446db549b4f57f72d5d7e6ccaca04ecc670fb85cea4d4b1acc1283e945a9cbc3d81819084a699b382f970e02f9d1378e14af9808d366d9ed7ec6
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^4.1.0, proc-log@npm:^4.2.0":
   version: 4.2.0
   resolution: "proc-log@npm:4.2.0"