feat: support escaping delimiters with a backslash

Author: jGleitz

README.md

@@ -13,9 +13,9 @@ md.use(kbd);
 
 This plugin can also be used together with [`markdown-it-attrs`](https://github.com/arve0/markdown-it-attrs/).
 
-## Parsing notes
+## Syntax notes
 
 The end tag `]]` must be on the same line as the start tag `[[`.
 
-The combinations “`[[`” and “`]]`” are not allowed within keystroke tags.
-If you need to use them, use the HTML escape sequence “`[[`” for “`[[`” or “`]]`” for “`]]`”.
+The characters “`[`” and “`]`” are not allowed within keystroke tags.
+If you need to use them, escape them with a backslash (i.e. `\[` or `\]`) or use HTML escape sequences (`&#91` for `[` or `]` for `]`).

src/index.ts

@@ -3,6 +3,7 @@ import StateInline from 'markdown-it/lib/rules_inline/state_inline'
 
 const MARKER_OPEN = '['
 const MARKER_CLOSE = ']'
+const ESCAPE_CHARACTER = '\\'
 const TAG = 'kbd'
 
 /*
@@ -26,25 +27,31 @@ function tokenize(state: StateInline, silent: boolean) {
 	// Find the end sequence
 	let openTagCount = 1
 	let end = -1
-	nextChar = state.src.charAt(start + 2)
+	let skipNext = false
 	for (let i = start + 1; i < max && end === -1; i++) {
-		momChar = state.src.charAt(i) // do not copy from nextChar because we sometimes skip over indices
+		momChar = nextChar
 		nextChar = state.src.charAt(i + 1)
+		if (skipNext) {
+			skipNext = false
+			continue
+		}
 		if (momChar === MARKER_CLOSE && nextChar === MARKER_CLOSE) {
 			openTagCount -= 1
 			if (openTagCount == 0) {
 				// Found the end!
 				end = i
 			}
 			// Skip second marker char, it is already counted.
-			i += 1
+			skipNext = true
 		} else if (momChar === MARKER_OPEN && nextChar === MARKER_OPEN) {
 			openTagCount += 1
 			// Skip second marker char, it is already counted.
-			i += 1
+			skipNext = true
 		} else if (momChar === '\n') {
 			// Found end of line before the end sequence. Thus, ignore our start sequence!
 			return false
+		} else if (momChar === ESCAPE_CHARACTER) {
+			skipNext = true
 		}
 	}
 

test/test.ts

@@ -28,6 +28,15 @@ describe('markdown-it-kbd', () => {
 		`))
 	})
 
+	it.each([
+		['[[\\[]]', '<kbd>[</kbd>'],
+		['[[\\]]]', '<kbd>]</kbd>'],
+		['[[\\[\\[]]', '<kbd>[[</kbd>'],
+		['[[\\]\\]]]', '<kbd>]]</kbd>']
+	])('supports escaped delimiters: %s', (input, expected) => {
+		expect(md.render(input)).toBe(`<p>${expected}</p>\n`)
+	})
+
 	it('supports deep nesting and markup in nested tags', () => {
 		expect(md.render(trimmed(`
 			[[[[[[Shift]]\`+\`[[_long[[x]]_]]]]-Ctrl]]+[[F4]]	
@@ -73,7 +82,8 @@ describe('markdown-it-kbd', () => {
 		['[[[x]]', '[<kbd>x</kbd>'],
 		['[[[x]]]', '[<kbd>x</kbd>]'],
 		['[[*test*', '[[<em>test</em>'],
-		['[[[[Shift]]+[[F3]]]', '[[<kbd>Shift</kbd>+<kbd>F3</kbd>]']
+		['[[[[Shift]]+[[F3]]]', '[[<kbd>Shift</kbd>+<kbd>F3</kbd>]'],
+		['[[\\\\]]', '<kbd>\\</kbd>']
 	])('renders correctly: %s', (input, expected) => {
 		expect(md.render(input)).toBe(`<p>${expected}</p>\n`)
 	})