Custom Syntax Extension

Extend OverType with custom syntax highlighting for footnotes, directives, and more.

Important: Your processor must maintain 1-to-1 character alignment. Only wrap text in tags — never add, remove, or change characters. If alignment breaks, it's your responsibility to fix the regex.

Registered Custom Patterns

OverType.setCustomSyntax((html) => {
  return html
    // Footnote references: [^1], [^note]
    .replace(/\[\^(\w+)\](?!\:)/g, '<span class="footnote-ref">$&</span>')

    // Footnote definitions: [^1]: text
    .replace(/\[\^(\w+)\]:/g, '<span class="footnote-def">$&</span>')

    // Directives: ::name[content]{attrs}
    .replace(/::([\w-]+)(\[[^\]]*\])?(\{[^}]*\})?/g, ...)

    // Hashtags: #tag
    .replace(/(^|[^&\w])#([\w-]+)/g, ...)

    // Mentions: @username
    .replace(/(^|[^\w])@([\w-]+)/g, ...)

    // ==highlights==
    .replace(/==([^=]+)==/g, ...)

    // Wiki links: [[Page Name]]
    .replace(/\[\[([^\]]+)\]\]/g, ...)

    // Emoji shortcodes: :smile:
    .replace(/:(\w+):/g, ...);
});

Test Editor

Per-Editor Processors

The processor above is global, so it applies to every editor on the page. One editor can use its own with the customSyntax option, or leave the global one out with customSyntax: false.

// Only highlights @mentions
new OverType('#mentions-only', {
  customSyntax: (html) => html.replace(/(^|[^\w])@([\w-]+)/g, '$1<span class="mention">@$2</span>')
});

// No custom syntax at all
new OverType('#no-custom-syntax', { customSyntax: false });

Mentions only

No custom syntax