Troubles with building a syntax file

I’m attempting to write a syntax file for Laravel Blade to contribute, and I am coming up against a wall trying to get single word directives like @continue to highlight, which seems like it should be simple enough.

Additionally there are more complex directives like @for($i = 0; $i < 2; $i++) which I want highlighted and their contents treated like PHP.

I’ve posted a question on SO, but figured it was pretty niche and posting here might help get some eyeballs on it.

https://stackoverflow.com/questions/65364723/having-trouble-capturing-blade-directives-with-highlight-js

And here’s the code I have so far, in case someone doesn’t like external links:

export default function(hljs) {
  const EXPRESSION_DIRECTIVES = {
    $pattern: /@[a-zA-Z]+/,
    'template-tag': [
      'case', 'each', 'elseif', 'empty', 'env', 'error', 'extends', 'for', 'foreach', 'forelse',
      'hasSection', 'if', 'include', 'includeFirst', 'includeIf', 'includeUnless', 'includeWhen',
      'inject', 'isset', 'method', 'prepend', 'section', 'sectionMissing', 'stack', 'switch',
      'unless', 'while', 'yield'
    ].map(v => '@' + v).join(" ")
  };

  const STANDALONE_DIRECTIVES = {
    $pattern: /@[a-zA-Z]+/,
    'template-tag': [
      'auth', 'break', 'continue', 'csrf', 'default', 'else', 'endauth', 'endempty', 'endenv',
      'enderror', 'endfor', 'endforeach', 'endforelse', 'endguest', 'endif', 'endisset', 'endphp',
      'endprepend', 'endproduction', 'endpush', 'endsection', 'endswitch', 'endunless', 'endwhile',
      'guest', 'once', 'parent', 'php', 'production', 'props', 'push', 'show'
    ].map(v => '@' + v).join(" ")
  };

  return {
    name: 'Blade',
    case_insensitive: true,
    subLanguage: 'xml',
    contains: [

      hljs.COMMENT(/\{\{--/, /--\}\}/),

      // output with HTML escaping
      {
        className: 'template-variable',
        begin: /\{\{/,
        starts: {
          end: /\}\}/,
          returnEnd: true,
          subLanguage: 'php',
        },
      },
      {
        className: 'template-variable',
        begin: /\}\}/,
      },

      // output with no HTML escaping
      {
        className: 'template-variable',
        begin: /\{!!/,
        starts: {
          end: /!!\}/,
          returnEnd: true,
          subLanguage: 'php',
        },
      },
      {
        className: 'template-variable',
        begin: /!!\}/,
      },

      // directly inserted PHP code
      {
        className: 'template-tag',
        begin: /@php/,
        starts: {
          end: /@endphp/,
          returnEnd: true,
          subLanguage: 'php',
        },
        relevance: 10
      },

      // directives with arguments like @yield('foo')
      {
        begin: /@([a-zA-Z]+)\s*\(/,
        keywords: EXPRESSION_DIRECTIVES,
        starts: {
          end: /\)/,
          returnEnd: true,
          subLanguage: 'php'
        }
      },

      // directives without arguments like @section
      {
        begin: /@([a-zA-Z]+)/,
        keywords: STANDALONE_DIRECTIVES,
      },

    ]
  };
}

[joshgoebel]

Those relevances are pretty scary if you ever plan to participate in auto-detection. Most typically one should not use relevance at all (other than to set it to 0 for many things). The only thing I see here that might deserve a 10 is @php - though @phpend would be far better to give the points too, since it’s longer and more specific. Your real relevance will come from your sublanguages as they match tokens.

Example:

• @section is a perfectly valid variable in Ruby with a relevance of 1.
• You score it 20.

[joshgoebel]

That does not work because @ isn’t in the default $pattern. (so no keyword with @ will ever match) The default is \w+ (word like characters)… so “blah_blah” is a potential keyword, “@blah” is not.

You may want to checkout:

• $pattern - https://highlightjs.readthedocs.io/en/latest/mode-reference.html#lexemes-now-keywords-pattern
• beginKeywords might also help you - it’s syntactic sugar to write a large (a|b|c|d) rule which can avoid the need for $pattern