Fix dollar characters with backticks by skip code blocks using regex

src/processors/latexProcessor.ts

@@ -2,6 +2,23 @@ export class LatexProcessor {
 	private singleLine = /\$(.*?)\$/g;
 
 	process(markdown: string) {
+		return this.skipCodeBlocks(markdown);
+	}
+
+	skipCodeBlocks(markdown: string): string {
+		const regex = /(?<=(^|\r|\n|\r\n))`{3,}.*(\r|\n|\r\n)[\s\S]*(\r|\n|\r\n)`{3,}(\r|\n|\r\n)/;
+		const match = regex.exec(markdown);
+
+		if (match) {
+			return this.transformLatex(markdown.substring(0, match['index'])) +
+				match[0] +
+				this.skipCodeBlocks(markdown.substring(match['index'] + match[0].length));
+		} else {
+			return this.transformLatex(markdown);
+		}
+	}
+
+	private transformLatex(markdown: string) {
 		const withoutEscapedCharaters = this.markEscapedCharacters(markdown);
 		const processedMultiline = this.processMultiLine(withoutEscapedCharaters);
 		const multiWithoutEscapedCharaters = this.markEscapedCharacters(processedMultiline);

test/__snapshots__/basicSyntax.unit.test.ts.snap

@@ -132,6 +132,26 @@ Here is an Cite for an Callout in a Slide. Callouts support dark and white backg
 </div>"
 `;
 
+exports[`Basic Markdown Syntax > Code Blocks 1`] = `
+"<!-- .slide: class=\\"drop\\" -->
+<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\\">
+
+\`\`\`dockerfile
+FROM ubuntu
+\`\`\`
+</div>"
+`;
+
+exports[`Basic Markdown Syntax > Code Blocks with multiple $ characters 1`] = `
+"<!-- .slide: class=\\"drop\\" -->
+<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\\">
+
+\`\`\`dockerfile
+USER $USER_NAME:$USER_NAME
+\`\`\`
+</div>"
+`;
+
 exports[`Basic Markdown Syntax > Embeds 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <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\\">
@@ -341,6 +361,48 @@ You can also do inline math like \`$s^{-2}_{n}sum_{i=1}^{n}$\`
 </div>"
 `;
 
+exports[`Basic Markdown Syntax > Math with Code Blocks 1`] = `
+"<!-- .slide: class=\\"drop\\" -->
+<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\\">
+
+$egin{vmatrix}a & b\\\\
+c & d
+end{vmatrix}=ad-bc$
+
+\`\`\`dockerfile
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+You can also do inline math like \`$s^{-2}_{n}sum_{i=1}^{n}$\`
+</div>"
+`;
+
+exports[`Basic Markdown Syntax > Math with Multiple Code Blocks 1`] = `
+"<!-- .slide: class=\\"drop\\" -->
+<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\\">
+
+$egin{vmatrix}a & b\\\\
+c & d
+end{vmatrix}=ad-bc$
+
+\`\`\`dockerfile
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+You can also do inline math like $s^{-2}_{n}sum_{i=1}^{n}$
+
+\`\`\`bash
+eval \\"$(/home/$USER_NAME/.rbenv/bin/rbenv init -)\\"
+\`\`\`
+
+That was ruby, now we have javascript:
+
+\`\`\`
+console.log(\\"Hello world!\\")
+\`\`\`
+</div>"
+`;
+
 exports[`Basic Markdown Syntax > Mermaid 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <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\\">

test/__snapshots__/codeBlocks.unit.test.ts.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Code Block Syntax > Headers 1`] = `
+"<!-- .slide: class=\\"drop\\" -->
+<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\\">
+
+\`\`\`
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+The above does not show backticks
+</div>"
+`;
+
+exports[`Code Block Syntax > Headers 2`] = `
+"<!-- .slide: class=\\"drop\\" -->
+<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\\">
+
+\`\`\`
+USER \`$USER_NAME:$\`USER_NAME
+\`\`\`
+
+The above does show backticks
+</div>"
+`;
+
+exports[`Code Block Syntax > Headers 3`] = `
+"<!-- .slide: class=\\"drop\\" -->
+<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\\">
+
+\`\`\`
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+The above does not show backticks
+</div>"
+`;

test/basicSyntax.unit.test.ts

@@ -217,6 +217,32 @@ test('Basic Markdown Syntax > Inline Code', () => {
 	return expect(sut.process(markdown, options)).toMatchSnapshot();
 });
 
+test('Basic Markdown Syntax > Code Blocks', () => {
+	const input = `
+\`\`\`dockerfile
+FROM ubuntu
+\`\`\`
+`;
+
+	const { options, markdown } = prepare(input);
+	const sut = new ObsidianMarkdownPreprocessor(utilsInstance);
+
+	return expect(sut.process(markdown, options)).toMatchSnapshot();
+});
+
+test('Basic Markdown Syntax > Code Blocks with multiple $ characters', () => {
+	const input = `
+\`\`\`dockerfile
+USER $USER_NAME:$USER_NAME
+\`\`\`
+`;
+
+	const { options, markdown } = prepare(input);
+	const sut = new ObsidianMarkdownPreprocessor(utilsInstance);
+
+	return expect(sut.process(markdown, options)).toMatchSnapshot();
+});
+
 test('Basic Markdown Syntax > Tables', () => {
 	const input = `First Header | Second Header
 ------------ | ------------
@@ -272,6 +298,51 @@ You can also do inline math like $s^{-2}_{n}sum_{i=1}^{n}$`;
 	return expect(sut.process(markdown, options)).toMatchSnapshot();
 });
 
+test('Basic Markdown Syntax > Math with Code Blocks', () => {
+	const input = `$$\begin{vmatrix}a & b\\
+c & d
+end{vmatrix}=ad-bc$$
+
+\`\`\`dockerfile
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+You can also do inline math like $s^{-2}_{n}sum_{i=1}^{n}$`;
+
+	const { options, markdown } = prepare(input);
+	const sut = new ObsidianMarkdownPreprocessor(utilsInstance);
+
+	return expect(sut.process(markdown, options)).toMatchSnapshot();
+});
+
+test('Basic Markdown Syntax > Math with Multiple Code Blocks', () => {
+	const input = `$$\begin{vmatrix}a & b\\
+c & d
+end{vmatrix}=ad-bc$$
+
+\`\`\`dockerfile
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+You can also do inline math like $s^{-2}_{n}sum_{i=1}^{n}$
+
+\`\`\`bash
+eval "$(/home/$USER_NAME/.rbenv/bin/rbenv init -)"
+\`\`\`
+
+That was ruby, now we have javascript:
+
+\`\`\`
+console.log("Hello world!")
+\`\`\`
+`;
+
+	const { options, markdown } = prepare(input);
+	const sut = new ObsidianMarkdownPreprocessor(utilsInstance);
+
+	return expect(sut.process(markdown, options)).toMatchSnapshot();
+});
+
 test('Basic Markdown Syntax > Mermaid', () => {
 	const input = `---
 theme: beige

test/codeBlocks.unit.test.ts

@@ -0,0 +1,46 @@
+import { ObsidianMarkdownPreprocessor } from 'src/obsidianMarkdownPreprocessor';
+import { obsidianUtils as utilsInstance } from './__mocks__/mockObsidianUtils';
+import { prepare } from './testUtils';
+
+test('Code Block Syntax > Headers', () => {
+	const input = `
+\`\`\`
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+The above does not show backticks
+`;
+
+	const { options, markdown } = prepare(input);
+	const sut = new ObsidianMarkdownPreprocessor(utilsInstance);
+
+	return expect(sut.process(markdown, options)).toMatchSnapshot();
+});
+
+test('Code Block Syntax > Headers', () => {
+	const input = ` \`\`\`
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+The above does show backticks
+`;
+
+	const { options, markdown } = prepare(input);
+	const sut = new ObsidianMarkdownPreprocessor(utilsInstance);
+
+	return expect(sut.process(markdown, options)).toMatchSnapshot();
+});
+
+test('Code Block Syntax > Headers', () => {
+	const input = `\`\`\`
+USER $USER_NAME:$USER_NAME
+\`\`\`
+
+The above does not show backticks
+`;
+
+	const { options, markdown } = prepare(input);
+	const sut = new ObsidianMarkdownPreprocessor(utilsInstance);
+
+	return expect(sut.process(markdown, options)).toMatchSnapshot();
+});