Tips for inline custom markdown tags?

[ivanjaros]

For block tags, it seems the following pattern is the way to go:

::: foo
...
:::

What about inline tags - what would be a good markdown-friendly pattern? For example, for "spoiler" that would blur text unless users clicks on it, I could imagine !!!...!!! but there are not that many special characters left for more tags. The *_=`~ are already taken. Even ! for image. Is there some guideline on how to come up with inline markdown tags?

[agammann]

Marked lets an inline extension define its own delimiter; it doesn't reserve a universal syntax for every possible custom tag. For a spoiler, ||text|| is one practical choice, provided your Markdown input isn't already using that sequence for another extension.

Here is a minimal plain-text spoiler token:

import { Marked } from 'marked';

const escape = text => text.replace(/[&<>"']/g, char => ({
  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
}[char]));

const marked = new Marked({
  extensions: [{
    name: 'spoiler',
    level: 'inline',
    start(src) { return src.indexOf('||'); },
    tokenizer(src) {
      const match = /^\|\|([^\n]+?)\|\|/.exec(src);
      if (match) return { type: 'spoiler', raw: match[0], text: match[1] };
    },
    renderer(token) {
      return `<span class="spoiler">${escape(token.text)}</span>`;
    },
  }],
});

console.log(marked.parse('Before ||a secret|| after.'));

This produced the spoiler <span> with Marked 16.4.1. The extension escapes its own text and leaves images/unclosed delimiters alone. It deliberately does not support nested Markdown, empty spoilers, or multiline content. CSS and click/keyboard behavior would need to be added by your UI.

You could use !!!text!!! similarly; pick a delimiter based on the syntax already enabled in your application. This extension only escapes its custom token; Marked's overall HTML output still needs sanitization when rendering untrusted input. Inline extensions.