Add support for Pkl syntax highlighting

jest.config.js

@@ -18,4 +18,5 @@ module.exports = {
   },
   testEnvironment: 'jest-environment-jsdom',
   setupFiles: ['./tests/unit/config.js'],
+  transformIgnorePatterns: ['/node_modules/(?!@apple/highlightjs-pkl)'],
 };

package.json

@@ -23,6 +23,7 @@
     "webpack-asset-path.js"
   ],
   "dependencies": {
+    "@apple/highlightjs-pkl": "^1.0.1",
     "core-js": "^3.8.2",
     "css.escape": "^1.5.1",
     "highlight.js": "^11.3.1",

src/utils/custom-highlight-lang/pkl.js

@@ -0,0 +1,13 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2025 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+
+import pkl from '@apple/highlightjs-pkl';
+
+export default pkl;

src/utils/syntax-highlight.js

@@ -31,6 +31,7 @@ const Languages = {
   objectivec: ['mm', 'objc', 'obj-c'].concat(CustomLanguageAliases.objectivec),
   perl: ['pl', 'pm'],
   php: [],
+  pkl: [],
   python: ['py', 'gyp', 'ipython'],
   ruby: ['rb', 'gemspec', 'podspec', 'thor', 'irb'],
   scss: [],
@@ -50,6 +51,7 @@ const Languages = {
 export const CustomLanguagesSet = new Set([
   'markdown',
   'swift',
+  'pkl',
 ]);
 
 export const LanguageAliasEntries = Object.entries(Languages);

tests/unit/utils/syntax-highlight.spec.js

@@ -286,6 +286,19 @@ describe("syntax-highlight", () => {
     `);
   });
 
+  it("tokenizes pkl code", async () => {
+    const content = [
+      "foo = 1",
+      "bar = \"Hello \\(foo)\"",
+    ];
+    const { highlightedCode } = await prepare(content, "pkl");
+    expect(highlightedCode).toMatchInlineSnapshot(`
+        <span class="syntax-property">foo</span> = <span class="syntax-number">1</span>
+        <span class="syntax-property">bar</span> = <span class="syntax-string">"Hello <span class="syntax-subst">\\(foo)</span>"</span>
+      `
+    );
+  });
+
   it("returns false if the language is not supported", async () => {
     expect(await registerHighlightLanguage("pascal")).toBe(false);
   });