diff --git a/web/src/realm_playground.ts b/web/src/realm_playground.ts
index b50a8b1aa0..0ea1f0aa66 100644
--- a/web/src/realm_playground.ts
+++ b/web/src/realm_playground.ts
@@ -6,6 +6,7 @@ import * as typeahead from "../shared/src/typeahead.ts";
 import {$t} from "./i18n.ts";
 import * as pygments_data from "./pygments_data.ts";
 import type {realm_playground_schema} from "./state_data.ts";
+import * as util from "./util.ts";
 
 export type RealmPlayground = z.output<typeof realm_playground_schema>;
 
@@ -87,7 +88,8 @@ export function get_pygments_typeahead_list_for_settings(query: string): Map<str
     }
 
     for (const [key, values] of map_pygments_pretty_name_to_aliases) {
-        language_labels.set(key, key + " (" + values.join(", ") + ")");
+        const formatted_string = util.format_array_as_list_with_conjuction(values, "narrow");
+        language_labels.set(key, key + " (" + formatted_string + ")");
     }
 
     return language_labels;
diff --git a/web/tests/realm_playground.test.cjs b/web/tests/realm_playground.test.cjs
index 3221cb7d58..269d93bd63 100644
--- a/web/tests/realm_playground.test.cjs
+++ b/web/tests/realm_playground.test.cjs
@@ -9,6 +9,7 @@ const {$t} = zrequire("i18n");
 const pygments_data = zrequire("pygments_data");
 const realm_playground = zrequire("realm_playground");
 const typeahead_helper = zrequire("typeahead_helper");
+const {initialize_user_settings} = zrequire("user_settings");
 
 run_test("get_pygments_typeahead_list_for_composebox", () => {
     // When no Code Playground is configured, the list of candidates should
@@ -45,6 +46,8 @@ run_test("get_pygments_typeahead_list_for_composebox", () => {
 });
 
 run_test("get_pygments_typeahead_list_for_settings", () => {
+    initialize_user_settings({user_settings: {}});
+
     const custom_pygment_language = "custom_lang";
     const playground_data = [
         {