markdown: Add data-code-lang attribute for locally echoed messages.

This mimics the backend logic for adding the data-attribute -
to know what Pygments language was used to highlight the code
block - in locally echoed messages.

New test added checks our logic for canonicalizing pygments alias
(for both frontend and backend).

Other fixtures and tests amended.

frontend_tests/node_tests/markdown.js

@@ -307,12 +307,12 @@ run_test("marked", () => {
         {
             input: "\n```c#\nfenced code special\n```\n\nand then after\n",
             expected:
-                '<div class="codehilite"><pre><span></span><code>fenced code special\n</code></pre></div>\n\n\n<p>and then after</p>',
+                '<div class="codehilite" data-code-language="C#"><pre><span></span><code>fenced code special\n</code></pre></div>\n\n\n<p>and then after</p>',
         },
         {
             input: "\n```vb.net\nfenced code dot\n```\n\nand then after\n",
             expected:
-                '<div class="codehilite"><pre><span></span><code>fenced code dot\n</code></pre></div>\n\n\n<p>and then after</p>',
+                '<div class="codehilite" data-code-language="VB.net"><pre><span></span><code>fenced code dot\n</code></pre></div>\n\n\n<p>and then after</p>',
         },
         {
             input: "Some text first\n* a\n* list \n* here\n\nand then after",

static/shared/js/fenced_code.js

@@ -1,6 +1,9 @@
 import katex from "katex";
 import _ from "lodash";
 
+// eslint-disable-next-line
+const pygments_data = require("../../generated/pygments_data.json");
+
 // Parsing routine that can be dropped in to message parsing
 // and formats code blocks
 //
@@ -30,14 +33,21 @@ let stash_func = function (text) {
     return text;
 };
 
-export function wrap_code(code) {
+export function wrap_code(code, lang) {
+    let header = '<div class="codehilite"><pre><span></span><code>';
+    // Mimics the backend logic of adding a data-attribute (data-code-language)
+    // to know what Pygments language was used to highlight this code block.
+    if (lang !== undefined && lang !== "") {
+        const pygments_language_info = pygments_data.langs[lang];
+        let code_language = _.escape(lang);
+        if (pygments_language_info !== undefined) {
+            code_language = pygments_language_info.pretty_name;
+        }
+        header = `<div class="codehilite" data-code-language="${code_language}"><pre><span></span><code>`;
+    }
     // Trim trailing \n until there's just one left
     // This mirrors how pygments handles code input
-    return (
+    return header + _.escape(code.replace(/^\n+|\n+$/g, "")) + "\n</code></pre></div>\n";
-        '<div class="codehilite"><pre><span></span><code>' +
-        _.escape(code.replace(/^\n+|\n+$/g, "")) +
-        "\n</code></pre></div>\n"
-    );
 }
 
 function wrap_quote(text) {
@@ -169,7 +179,7 @@ export function process_fenced_code(content) {
                 },
 
                 done() {
-                    const text = wrap_code(lines.join("\n"));
+                    const text = wrap_code(lines.join("\n"), lang);
                     // insert safe HTML that is passed through the parsing
                     const placeholder = stash_func(text, true);
                     output_lines.push("");

zerver/tests/fixtures/markdown_test_cases.json

@@ -4,14 +4,20 @@
       "name": "codeblock_hilite",
       "input": "Hamlet said:\n~~~~.python \ndef speak(self):\n    x = 1\n~~~~",
       "expected_output": "<p>Hamlet said:</p>\n<div class=\"codehilite\" data-code-language=\"Python\"><pre><span></span><code><span class=\"k\">def</span> <span class=\"nf\">speak</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">):</span>\n    <span class=\"n\">x</span> <span class=\"o\">=</span> <span class=\"mi\">1</span>\n</code></pre></div>",
-      "marked_expected_output": "<p>Hamlet said:</p>\n<div class=\"codehilite\"><pre><span></span><code>def speak(self):\n    x = 1\n</code></pre></div>",
+      "marked_expected_output": "<p>Hamlet said:</p>\n<div class=\"codehilite\" data-code-language=\"Python\"><pre><span></span><code>def speak(self):\n    x = 1\n</code></pre></div>",
       "text_content": "Hamlet said:\ndef speak(self):\n    x = 1\n"
     },
     {
       "name": "codeblock_hilite",
       "input": "``` inventedlanguage\ndef speak(self):\n    x = 1\n```",
       "expected_output": "<div class=\"codehilite\" data-code-language=\"inventedlanguage\"><pre><span></span><code>def speak(self):\n    x = 1\n</code></pre></div>",
-      "marked_expected_output": "<div class=\"codehilite\"><pre><span></span><code>def speak(self):\n    x = 1\n</code></pre></div>",
+      "text_content": "def speak(self):\n    x = 1\n"
+    },
+    {
+      "name": "codeblock_canonicalize_lang_alias",
+      "input": "``` py2\ndef speak(self):\n    x = 1\n```",
+      "expected_output": "<div class=\"codehilite\" data-code-language=\"Python 2.x\"><pre><span></span><code><span class=\"k\">def</span> <span class=\"nf\">speak</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">):</span>\n    <span class=\"n\">x</span> <span class=\"o\">=</span> <span class=\"mi\">1</span>\n</code></pre></div>",
+      "marked_expected_output": "<div class=\"codehilite\" data-code-language=\"Python 2.x\"><pre><span></span><code>def speak(self):\n    x = 1\n</code></pre></div>",
       "text_content": "def speak(self):\n    x = 1\n"
     },
     {
@@ -794,13 +800,13 @@
       "name": "tex_fenced_tex",
       "input": "```tex\n\n\\pi \\textbf{ is not } 3.14\n```",
       "expected_output": "<div class=\"codehilite\" data-code-language=\"TeX\"><pre><span></span><code><span class=\"k\">\\pi</span> <span class=\"k\">\\textbf</span><span class=\"nb\">{</span> is not <span class=\"nb\">}</span> 3.14\n</code></pre></div>",
-      "marked_expected_output": "<div class=\"codehilite\"><pre><span></span><code>\\pi \\textbf{ is not } 3.14\n</code></pre></div>"
+      "marked_expected_output": "<div class=\"codehilite\" data-code-language=\"TeX\"><pre><span></span><code>\\pi \\textbf{ is not } 3.14\n</code></pre></div>"
     },
     {
       "name": "tex_fenced_latex",
       "input": "```latex\n\n\\pi \\textbf{ is not } 3.14\n```",
       "expected_output": "<div class=\"codehilite\" data-code-language=\"TeX\"><pre><span></span><code><span class=\"k\">\\pi</span> <span class=\"k\">\\textbf</span><span class=\"nb\">{</span> is not <span class=\"nb\">}</span> 3.14\n</code></pre></div>",
-      "marked_expected_output": "<div class=\"codehilite\"><pre><span></span><code>\\pi \\textbf{ is not } 3.14\n</code></pre></div>"
+      "marked_expected_output": "<div class=\"codehilite\" data-code-language=\"TeX\"><pre><span></span><code>\\pi \\textbf{ is not } 3.14\n</code></pre></div>"
     },
     {
       "name": "tex_money",