playgrounds: Add pygment aliases into a parenthetical in the typeahead.

The `pygments_name` field typeahead shows a list of human-readable
`pretty_name`to pick from. However, the Pygment aliases which are
used for code highlighting within a code block are different from
these. This mismatch might be confusing for folks unfamiliar with
technical details of the "code playgrounds" feature.

To bridge the gap, we now include the Pygment aliases within
parenthesis along with its human-readable name, in the typeaheads.

E.g: Python 2.x (py2, python2).

static/js/settings_playgrounds.js

@@ -7,7 +7,6 @@ import {$t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import {page_params} from "./page_params";
 import * as realm_playground from "./realm_playground";
-import * as typeahead_helper from "./typeahead_helper";
 import * as ui from "./ui";
 import * as ui_report from "./ui_report";
 
@@ -152,14 +151,18 @@ function build_page() {
             });
         });
 
+    let lookup_table = new Map();
+
     $("#playground_pygments_language").typeahead({
         source() {
-            return realm_playground.get_pygments_pretty_names_list();
+            const suggestions = realm_playground.get_pygments_typeahead_list();
+            lookup_table = suggestions.lookup_table;
+            return suggestions.pygments_pretty_name_list;
         },
         items: 5,
         fixed: true,
         highlighter(item) {
-            return typeahead_helper.render_typeahead_item({primary: item});
+            return lookup_table[item];
         },
         matcher(item) {
             const q = this.query.trim().toLowerCase();