Possibility of supporting inline math with backticks like GitHub / GitLab

[wdhongtw]

Background

There seems no authoritative source on how to embed Latex math expression in Markdown. At least It's not part of CommonMark spec.

Currently VSCode markdown preview support inline math expression between $ pair and block math expression between $$ pair. But it looks like GitHub and GitLab support another inline math expression that use combination of $ and backticks.

inline math (without backtick): $1 + 2 = 3$
inline math (with backtick):    $`1 + 2 = 3`$

• Markdown editing with Visual Studio Code
• Writing mathematical expressions - GitHub Docs
• GitLab Flavored Markdown (GLFM) | GitLab
• Issue from VSCode repo: microsoft/vscode#208430

Discussion

I have done some experiment and it looks that it only need little modification for this syntax to work.

But I'm wondering

• Is this a good direction to support this kind of math syntax?
  • I'm not experienced with Latex, not sure if this may introduce ambiguity between markdown and Latex
  • It may confuse user if there are multi-way to express one content
• If we should support this, It this package the correct location for the modification?
  • Maybe we should do some pre-processing in extensions\markdown-math of vscode

---

Appendix: Possible Fix

diff --git a/src/index.ts b/src/index.ts
index 2e2a69d..9a035ae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -513,7 +513,12 @@ export default function (md: import('markdown-it'), options?: MarkdownKatexOptio
     };

     const inlineRenderer = (tokens: readonly Token[], idx: number) => {
-        return katexInline(tokens[idx].content);
+        const content = tokens[idx].content;
+        // To support expression like $`1+1 = 2`$, check if the the expression has leading and trailing "`".
+        const hasBacktick = content.length > 2 && content[0] === "`" && content[content.length - 1] === "`";
+        const sanitized = hasBacktick ? content.slice(1, -1) : content;
+
+        return katexInline(sanitized);
     };

     const katexBlockRenderer = (latex: string) => {
diff --git a/test/fixtures/default.txt b/test/fixtures/default.txt
index f427f61..9f0c820 100644
--- a/test/fixtures/default.txt
+++ b/test/fixtures/default.txt
@@ -7,6 +7,13 @@ $1+1 = 2$
 <p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mn>1</mn><mo>+</mo><mn>1</mn><mo>=</mo><mn>2</mn></mrow><annotation encoding="application/x-tex">1+1 = 2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.72777em;vertical-align:-0.08333em;"></span><span class="mord">1</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.64444em;vertical-align:0em;"></span><span class="mord">1</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.64444em;vertical-align:0em;"></span><span class="mord">2</span></span></span></span></p>
 .

+Simple inline math with backtick
+.
+$`1+1 = 2`$
+.
+<p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mn>1</mn><mo>+</mo><mn>1</mn><mo>=</mo><mn>2</mn></mrow><annotation encoding="application/x-tex">1+1 = 2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.72777em;vertical-align:-0.08333em;"></span><span class="mord">1</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.64444em;vertical-align:0em;"></span><span class="mord">1</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.64444em;vertical-align:0em;"></span><span class="mord">2</span></span></span></span></p>
+.
+
 Simple block math
 .
 $$1+1 = 2$$

[wdhongtw]

loop in @mjbvz :D