🐛 Prevent replace/replaceAll from interpreting $; resolves #133

Author: ebullient

se-test-vault/math-test.md

@@ -0,0 +1,37 @@
+---
+frontmatter: go
+---
+
+## Math
+
+$$f'(x), \frac{dy}{dx},\dot{x}, y' ...$$
+
+---
+
+## Slide 1:  Test Formula
+
+Different math rendering with and without show grid
+- with grid: rendering like inline formula
+- without grid: rendering like block  
+    (position of $t \to \infty$ changes)
+
+$$\lim_{t \to \infty} (w(t) - y(t)) = 0$$
+
+---
+
+<!-- slide template="[[template_formula]]" -->
+
+## Slide 2: Test Equation with Templates
+
+- Test equation-template
+- Formula is rendered as inline-formula independent of grid on/off settings like (like
+
+::: formula
+$$\lim_{t \to \infty} (w(t) - y(t)) = 0$$
+:::
+
+---
+
+## Test
+
+Problems with inline code  `$ ... $`

se-test-vault/syntax-test.md

@@ -43,12 +43,6 @@ _emphasis_ **bold** ==highlight==
 
 ---
 
-## Math
-
-$$f'(x), \frac{dy}{dx},\dot{x}, y' ...$$
-
----
-
 ## Included H1
 
 This will include everything under H1

se-test-vault/template_formula.md

@@ -0,0 +1,9 @@
+<!-- content -->
+<% content %>
+<!-- content -->
+
+<grid drag="100 20" drop="bottom" bg="silver" align="center" pad="0 20px">
+<!-- formula -->
+ <% formula %>
+ <!-- formula -->
+</grid>

src/obsidian/processors/debugViewProcessor.ts

@@ -20,7 +20,7 @@ export class DebugViewProcessor implements Processor {
                             if (notes.length > 0) {
                                 newSlide += `\n\n${notes}`;
                             }
-                            output = output.replace(slide, newSlide);
+                            output = output.replace(slide, () => newSlide);
                             return newSlide;
                         })
                         .join(options.verticalSeparator);

src/obsidian/processors/templateProcessor.ts

@@ -150,6 +150,13 @@ export class TemplateProcessor implements Processor {
                 fileWithExtension = `${fileWithExtension}.md`;
             }
             let templateContent = this.utils.parseFile(fileWithExtension, null);
+
+            if (templateContent == null) {
+                throw new Error(
+                    `Template file not found: [[${file}]] (resolved to: ${fileWithExtension})`,
+                );
+            }
+
             templateContent =
                 this.multipleFileProcessor.process(templateContent);
             templateContent = templateContent
@@ -187,9 +194,9 @@ export class TemplateProcessor implements Processor {
             name = `<% ${name.trim()} %>`;
             result = result.replaceAll(
                 optionalName,
-                `${content}\n${optionalName}`,
+                () => `${content}\n${optionalName}`,
             );
-            result = result.replaceAll(name, content);
+            result = result.replaceAll(name, () => content);
             result = result.replaceAll(match, "");
         }
         result = this.footnoteProcessor.transformFootNotes(result);

test/__snapshots__/extendedSyntax.unit.test.ts.snap

@@ -28,4 +28,4 @@ exports[`Extended Markdown Syntax >  Speaker Notes 1`] = `""<!-- .slide: class=\
 
 exports[`Extended Markdown Syntax > Horizontal / Vertical Slides 1`] = `""<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n# Slide 1\\n</div>\\n---\\n<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n# Slide 2.1\\n</div>\\n--\\n<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n# Slide 2.2\\n</div>""`;
 
-exports[`Slides Extended Feature >  Show Debug Grid 1`] = `""<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n## My Slide\\n\\nThis slide shows the debug view feature\\n\\n\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 10%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 20%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 40%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 50%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 60%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 70%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 80%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 90%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 10%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 20%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 30%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 40%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 50%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 60%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 70%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 80%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 90%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n</div>""`;
+exports[`Slides Extended Feature >  Show Debug Grid 1`] = `""<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n## My Slide\\n\\nThis slide shows the debug view feature\\n\\n$$lim_{t \\to infty} (w(t) - y(t)) = 0$$\\n\\n\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 10%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 20%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 40%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 50%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 60%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 70%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 80%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 90%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 10%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 20%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 30%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 40%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 50%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 60%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 70%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 80%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 90%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n</div>\\n</div>""`;

test/__snapshots__/template.unit.test.ts.snap

@@ -8,4 +8,4 @@ exports[`Template with variable in frontmatter 1`] = `""<!-- .slide: class=\\"dr
 
 exports[`Template with variable not set 1`] = `""<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n# MyContent\\n\\n    # After<div class=\\"\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n\\n    <% footer %>\\n    </div>\\n</div>""`;
 
-exports[`Template with variable set 1`] = `""<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n# MyContent\\n\\n\\n\\n\\n        # After<div class=\\"\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n\\n        <div class=\\"block\\">\\n\\n# Hello\\n</div>\\n\\n\\n        </div>\\n</div>""`;
+exports[`Template with variable set 1`] = `""<!-- .slide: class=\\"drop\\" -->\\n<div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">\\n\\n# MyContent\\n\\n\\n\\n\\n        # After<div class=\\"\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >\\n\\n        <div class=\\"block\\">\\n\\n$$lim_{t \\to infty} (w(t) - y(t)) = 0$$\\n</div>\\n\\n\\n        </div>\\n</div>""`;

test/extendedSyntax.unit.test.ts

@@ -412,6 +412,8 @@ test('Slides Extended Feature >  Show Debug Grid', () => {
 
 This slide shows the debug view feature
 
+$$\lim_{t \to \infty} (w(t) - y(t)) = 0$$
+
 `;
 
     const { options, markdown } = prepare(input);

test/template.unit.test.ts

@@ -87,7 +87,7 @@ test('Template with variable set', () => {
 # MyContent
 
 ::: footer
-# Hello
+$$\lim_{t \to \infty} (w(t) - y(t)) = 0$$
 :::
 
 `;