More standardization of client-side markdown parsing

(imported from commit bc010d69ee92758481d3645f84f2a68dcafacf7a)

static/js/echo.js

@@ -222,6 +222,16 @@ function edit_failed_message(message) {
     message_edit.start_local_failed_edit(current_msg_list.get_row(message.local_id), message);
 }
 
+
+function escape(html, encode) {
+  return html
+    .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
 $(function () {
     function disable_markdown_regex(rules, name) {
         rules[name] = {exec: function (_) {
@@ -233,6 +243,18 @@ $(function () {
     // Configure the marked markdown parser for our usage
     var r = new marked.Renderer();
 
+    // No <code> around our code blocks instead a codehilite <div>, and disable class-specific highlighting
+    // We special-case the 'quote' language and output a blockquote
+    r.code = function (code, lang) {
+        if (lang === 'quote') {
+            return '<blockquote><p>' + escape(code, true) + '</p></blockquote>';
+        }
+
+        return '<div class="codehilite"><pre>'
+          + escape(code, true)
+          + '\n</pre></div>';
+    };
+
     // Disable ordered lists
     // We used GFM + tables, so replace the list start regex for that ruleset
     // We remove the |[\d+]\. that matches the numbering in a numbered list

zerver/tests/frontend/node/echo.js

@@ -27,7 +27,8 @@ var echo = require('js/echo.js');
                      "Contains a not an http://www.google.com/ok/image.png/stop file",
                      "No png to be found here, a png",
                      "No user mention **leo**",
-                     "No user mention @what there"
+                     "No user mention @what there",
+                     "We like to code\n~~~\ndef code():\n    we = \"like to do\"\n~~~"
                     ];
 
     var markup = [
@@ -67,14 +68,15 @@ var echo = require('js/echo.js');
     {input: 'hello there', expected: '<p>hello there</p>'},
     {input: 'hello **bold** for you', expected: '<p>hello <strong>bold</strong> for you</p>'},
     {input: '__hello__', expected: '<p>__hello__</p>'},
-    // TODO fix fenced code to output like pygments
-    {input: '\n```\nfenced code\n```\n\nand then after\n', expected: '<pre><code>fenced code\n</code></pre><p>and then after</p>'},
+    {input: '\n```\nfenced code\n```\n\nand then after\n', expected: '<div class="codehilite"><pre>fenced code\n</pre></div><p>and then after</p>'},
     {input: '* a\n* list \n* here',
      expected: '<ul>\n<li>a</li>\n<li>list </li>\n<li>here</li>\n</ul>'},
     {input: 'Some text first\n* a\n* list \n* here\n\nand then after',
      expected: '<p>Some text first</p>\n<ul>\n<li>a</li>\n<li>list </li>\n<li>here</li>\n</ul>\n<p>and then after</p>'},
     {input: '1. an\n2. ordered \n3. list',
-     expected: '<p>1. an</p>\n<p>2. ordered </p>\n<p>3. list</p>'}
+     expected: '<p>1. an</p>\n<p>2. ordered </p>\n<p>3. list</p>'},
+    {input: '\n~~~quote\nquote this for me\n~~~\nthanks\n',
+     expected: '<blockquote><p>quote this for me</p></blockquote><p>thanks</p>'}
   ];
 
   test_cases.forEach(function (test_case) {