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