feat: add skript + mcfunction highlightjs support (#4739)

* feat: add skript + mcfunction highlightjs support

* fix: lint

* fix: dep

* lint

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/frontend/src/components/ui/report/ReportInfo.vue

@@ -105,10 +105,9 @@
 <script setup>
 import { ReportIcon, UnknownIcon, VersionIcon } from '@modrinth/assets'
 import { Avatar, Badge, CopyCode, useRelativeTime } from '@modrinth/ui'
-import { formatProjectType } from '@modrinth/utils'
+import { formatProjectType, renderHighlightedString } from '@modrinth/utils'
 
 import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
-import { renderHighlightedString } from '~/helpers/highlight.js'
 import { getProjectTypeForUrl } from '~/helpers/projects.js'
 
 const formatRelativeTime = useRelativeTime()

apps/frontend/src/helpers/highlight.js

@@ -1,65 +0,0 @@
-// Configs
-import { configuredXss, md } from '@modrinth/utils'
-import hljs from 'highlight.js/lib/core'
-import gradle from 'highlight.js/lib/languages/gradle'
-// Coding
-import groovy from 'highlight.js/lib/languages/groovy'
-import ini from 'highlight.js/lib/languages/ini'
-import java from 'highlight.js/lib/languages/java'
-// Scripting
-import javascript from 'highlight.js/lib/languages/javascript'
-import json from 'highlight.js/lib/languages/json'
-import kotlin from 'highlight.js/lib/languages/kotlin'
-import lua from 'highlight.js/lib/languages/lua'
-import properties from 'highlight.js/lib/languages/properties'
-import python from 'highlight.js/lib/languages/python'
-import scala from 'highlight.js/lib/languages/scala'
-import xml from 'highlight.js/lib/languages/xml'
-import yaml from 'highlight.js/lib/languages/yaml'
-
-/* REGISTRATION */
-// Scripting
-hljs.registerLanguage('javascript', javascript)
-hljs.registerLanguage('python', python)
-hljs.registerLanguage('lua', lua)
-// Coding
-hljs.registerLanguage('java', java)
-hljs.registerLanguage('kotlin', kotlin)
-hljs.registerLanguage('scala', scala)
-hljs.registerLanguage('groovy', groovy)
-// Configs
-hljs.registerLanguage('gradle', gradle)
-hljs.registerLanguage('json', json)
-hljs.registerLanguage('ini', ini)
-hljs.registerLanguage('yaml', yaml)
-hljs.registerLanguage('xml', xml)
-hljs.registerLanguage('properties', properties)
-
-/* ALIASES */
-// Scripting
-hljs.registerAliases(['js'], { languageName: 'javascript' })
-hljs.registerAliases(['py'], { languageName: 'python' })
-// Coding
-hljs.registerAliases(['kt'], { languageName: 'kotlin' })
-// Configs
-hljs.registerAliases(['json5'], { languageName: 'json' })
-hljs.registerAliases(['toml'], { languageName: 'ini' })
-hljs.registerAliases(['yml'], { languageName: 'yaml' })
-hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], { languageName: 'xml' })
-
-export const renderHighlightedString = (string) =>
-	configuredXss.process(
-		md({
-			highlight: function (str, lang) {
-				if (lang && hljs.getLanguage(lang)) {
-					try {
-						return hljs.highlight(str, { language: lang }).value
-					} catch {
-						/* empty */
-					}
-				}
-
-				return ''
-			},
-		}).render(string),
-	)

apps/frontend/src/pages/[type]/[id]/changelog.vue

@@ -76,8 +76,7 @@
 import { DownloadIcon } from '@modrinth/assets'
 import { Pagination } from '@modrinth/ui'
 import VersionFilterControl from '@modrinth/ui/src/components/version/VersionFilterControl.vue'
-
-import { renderHighlightedString } from '~/helpers/highlight.js'
+import { renderHighlightedString } from '@modrinth/utils'
 
 const props = defineProps({
 	project: {

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -656,7 +656,7 @@ import {
 	injectNotificationManager,
 	MarkdownEditor,
 } from '@modrinth/ui'
-import { formatBytes, formatCategory } from '@modrinth/utils'
+import { formatBytes, formatCategory, renderHighlightedString } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'
 
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
@@ -666,7 +666,6 @@ import Modal from '~/components/ui/Modal.vue'
 import Categories from '~/components/ui/search/Categories.vue'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
-import { renderHighlightedString } from '~/helpers/highlight.js'
 import { inferVersionInfo } from '~/helpers/infer.js'
 import { createDataPackVersion } from '~/helpers/package.js'
 import { reportVersion } from '~/utils/report-helpers.ts'