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 '@modrinth/utils'
-import { renderHighlightedString } from '~/helpers/highlight.js'
 
 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'

packages/ui/src/components/base/MarkdownEditor.vue

@@ -293,7 +293,7 @@ import {
 	YouTubeIcon,
 } from '@modrinth/assets'
 import { markdownCommands, modrinthMarkdownEditorKeymap } from '@modrinth/utils/codemirror'
-import { renderHighlightedString } from '@modrinth/utils/highlight'
+import { renderHighlightedString } from '@modrinth/utils/highlightjs'
 import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 
 import Modal from '../modal/Modal.vue'

packages/utils/highlightjs/index.ts

@@ -15,14 +15,18 @@ 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'
+import mcfunction from 'highlightjs-mcfunction'
 
-import { configuredXss, md } from './parse'
+import { configuredXss, md } from '../parse'
+import skript from './skript'
 
 /* REGISTRATION */
 // Scripting
 hljs.registerLanguage('javascript', javascript)
 hljs.registerLanguage('python', python)
 hljs.registerLanguage('lua', lua)
+hljs.registerLanguage('skript', skript)
+hljs.registerLanguage('mcfunction', mcfunction)
 // Coding
 hljs.registerLanguage('java', java)
 hljs.registerLanguage('kotlin', kotlin)
@@ -40,6 +44,9 @@ hljs.registerLanguage('properties', properties)
 // Scripting
 hljs.registerAliases(['js'], { languageName: 'javascript' })
 hljs.registerAliases(['py'], { languageName: 'python' })
+hljs.registerAliases(['sk'], { languageName: 'skript' })
+hljs.registerAliases(['command'], { languageName: 'mcfunction' })
+hljs.registerAliases(['kubejs'], { languageName: 'javascript' })
 // Coding
 hljs.registerAliases(['kt'], { languageName: 'kotlin' })
 // Configs

packages/utils/highlightjs/skript.ts

@@ -0,0 +1,140 @@
+import type { HLJSApi } from 'highlight.js'
+
+/*
+Language: Skript
+Description: Skript language support for Minecraft server scripting
+Website: https:
+Category: scripting
+*/
+export default function (hljs: HLJSApi) {
+	const CONTROL_KEYWORDS = {
+		keyword: 'if else while loop return continue at stop cancel false true now',
+		built_in: 'parse do',
+	}
+
+	const ENTITIES = 'player players victim attacker sender loop-player shooter console'
+	const CONDITION_OPERATORS =
+		'contains has have is was were are does can cannot ' +
+		"hasn't haven't isn't wasn't weren't aren't doesn't can't"
+
+	return {
+		name: 'Skript',
+		aliases: ['sk'],
+		case_insensitive: true,
+		keywords: CONTROL_KEYWORDS,
+		contains: [
+			{
+				className: 'comment',
+				begin: '(?<!#)#(?!#)',
+				end: '$',
+				relevance: 0,
+			},
+			{
+				className: 'string',
+				begin: '"',
+				end: '"',
+				illegal: '\\n',
+				contains: [hljs.BACKSLASH_ESCAPE],
+			},
+
+			{
+				className: 'section',
+				begin: '\\bon\\s+',
+				end: ':',
+				excludeEnd: false,
+				keywords: 'on',
+				relevance: 10,
+			},
+
+			{
+				className: 'section',
+				begin: '\\bcommand\\s+/',
+				end: ':',
+				excludeEnd: false,
+				relevance: 10,
+			},
+
+			{
+				className: 'variable',
+				begin: '{',
+				end: '}',
+				contains: [
+					{
+						className: 'variable',
+						begin: ':+',
+						relevance: 0,
+					},
+				],
+			},
+
+			{
+				className: 'params',
+				begin: '<',
+				end: '>',
+				relevance: 5,
+			},
+
+			{
+				className: 'function',
+				begin: '\\b[a-zA-Z_][a-zA-Z0-9_]*(?=\\()',
+				relevance: 0,
+			},
+
+			{
+				className: 'variable',
+				begin: '\\b(loop|event)-[a-zA-Z]+\\b',
+				relevance: 5,
+			},
+
+			{
+				className: 'number',
+				variants: [
+					{ begin: '\\b\\d+(\\.\\d+)?\\s+(tick|second|minute|hour|day)s?\\b' },
+
+					{ begin: '\\ba\\s+(tick|second|minute|hour|day)s?\\b' },
+
+					{ begin: '\\b(minecraft|mc|real|rl|irl)\\s+(tick|second|minute|hour|day)s?\\b' },
+				],
+				relevance: 0,
+			},
+
+			hljs.NUMBER_MODE,
+
+			{
+				className: 'built_in',
+				begin: '\\b(' + ENTITIES + ')\\b',
+				relevance: 0,
+			},
+
+			{
+				className: 'built_in',
+				begin: "(uuid\\s+of|'s\\s+uuid|location\\s+of|'s\\s+location)",
+				relevance: 0,
+			},
+
+			{
+				className: 'operator',
+				begin: '\\b(' + CONDITION_OPERATORS.split(' ').join('|') + ')\\b',
+				relevance: 0,
+			},
+
+			{
+				className: 'operator',
+				begin: '::?',
+				relevance: 0,
+			},
+
+			{
+				className: 'literal',
+				begin: '\\b(true|false)\\b',
+				relevance: 0,
+			},
+
+			{
+				className: 'keyword',
+				begin: '\\b(stop|cancel|halt|enable|disable|trigger|server)\\b',
+				relevance: 5,
+			},
+		],
+	}
+}

packages/utils/index.ts

@@ -1,7 +1,7 @@
 export * from './api'
 export * from './billing'
 export * from './changelog'
-export * from './highlight'
+export * from './highlightjs'
 export * from './licenses'
 export * from './parse'
 export * from './projects'

packages/utils/package.json

@@ -21,6 +21,7 @@
 		"@types/three": "^0.172.0",
 		"dayjs": "^1.11.10",
 		"highlight.js": "^11.9.0",
+		"highlightjs-mcfunction": "github:modrinth/better-highlightjs-mcfunction",
 		"markdown-it": "^14.1.0",
 		"ofetch": "^1.3.4",
 		"three": "^0.172.0",

packages/utils/servers/errors/modrinth-server-error.ts

@@ -9,7 +9,7 @@ export class ModrinthServerError extends Error {
 		public readonly originalError?: Error,
 		public readonly module?: string,
 		public readonly v1Error?: V1ErrorInfo,
-		public readonly responseData?: any,
+		public readonly responseData?: unknown,
 	) {
 		let errorMessage = message
 		let method = 'GET'

pnpm-lock.yaml

@@ -652,6 +652,9 @@ importers:
       highlight.js:
         specifier: ^11.9.0
         version: 11.9.0
+      highlightjs-mcfunction:
+        specifier: github:modrinth/better-highlightjs-mcfunction
+        version: https://codeload.github.com/modrinth/better-highlightjs-mcfunction/tar.gz/68a27ae888cfc0e8737f4f2cf1abb67e82078166
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -5022,6 +5025,10 @@ packages:
     resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
     engines: {node: '>=12.0.0'}
 
+  highlightjs-mcfunction@https://codeload.github.com/modrinth/better-highlightjs-mcfunction/tar.gz/68a27ae888cfc0e8737f4f2cf1abb67e82078166:
+    resolution: {tarball: https://codeload.github.com/modrinth/better-highlightjs-mcfunction/tar.gz/68a27ae888cfc0e8737f4f2cf1abb67e82078166}
+    version: 1.0.0
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -7106,6 +7113,7 @@ packages:
   sitemap@8.0.0:
     resolution: {integrity: sha512-+AbdxhM9kJsHtruUF39bwS/B0Fytw6Fr1o4ZAIAEqA6cke2xcoO2GleBw9Zw7nRzILVEgz7zBM5GiTJjie1G9A==}
     engines: {node: '>=14.0.0', npm: '>=6.0.0'}
+    deprecated: 'SECURITY: Multiple vulnerabilities fixed in 8.0.1 (XML injection, path traversal, command injection, protocol injection). Upgrade immediately: npm install sitemap@8.0.1'
     hasBin: true
 
   slash@5.1.0:
@@ -13707,6 +13715,8 @@ snapshots:
 
   highlight.js@11.9.0: {}
 
+  highlightjs-mcfunction@https://codeload.github.com/modrinth/better-highlightjs-mcfunction/tar.gz/68a27ae888cfc0e8737f4f2cf1abb67e82078166: {}
+
   hookable@5.5.3: {}
 
   hosted-git-info@2.8.9: {}