Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Sumanth V Rao 2020-09-06 15:22:11 +05:30 committed by Tim Abbott
parent 4a2791e2a3
commit c563cdba61
3 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend_tests/node_tests/markdown.js
View File

@ -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",

24
static/shared/js/fenced_code.js
View File

@ -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 (
'<div class="codehilite"><pre><span></span><code>' +
_.escape(code.replace(/^\n+|\n+$/g, "")) +
"\n</code></pre></div>\n"
);
return header + _.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("");

14
zerver/tests/fixtures/markdown_test_cases.json vendored
View File

@ -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",