11ty / eleventy-plugin-syntaxhighlight

A pack of Eleventy plugins for syntax highlighting in Markdown, Liquid, and Nunjucks templates.
https://www.11ty.dev/docs/plugins/syntaxhighlight/
MIT License
129 stars 32 forks source link

Highlight specific keywords in the codeblock #55

Open daimz opened 3 years ago

daimz commented 3 years ago

It would be great to pass an additional keywords parameter which is then matched in the code to add highlight or bold.

{% highlight lang keywords="['card', 'card-large', 'card-footer']" %}
      <div class="card card-large">
          <div class="card-header">Header</div>
          <div class="card-body">body</div>
          <div class="card-footer">footer</div>
      </div>
{% endhighlight %}

This would then have the keywords matched and wrapped in a class that add special styling to make them bold.

<div class="<span class="highlight-keyword">card</span> <span class="highlight-keyword">card-large</span>">
       <div class="card-header">Header</div>
      <div class="card-body">body</div>
      <div class="<span class="highlight-keyword">card-footer</span>">footer</div>
</div>

I had a go at using the init option to try extend Prism, but wasn't sure how I could capture the keywords being passed.

Does anyone know if this can already be done or otherwise how I might go about implementing something similar?

panoply commented 2 years ago

Leverage insertBefore and apply the Regular Expression matches. Here is a JavaScript extensions I leverage that you can appropriate to HTML:

config.addPlugin(highlight, {
    init: function({ Prism }) {
     Prism.languages.insertBefore('js', 'keyword', {
        variable: {
          pattern: /\b(?:const|var|let)\b/,
        },
        module: {
          pattern: /\b(?:import|as|export|from|default)\b/,
        },
        op: {
          pattern: /\b(?:typeof|new|of|delete)\b/,
        },
        nil: {
          pattern: /\b(?:null|undefined)\b/,
        },
        flow: {
          pattern: /\b(?:return|await)\b/,
        },
        method: {
          pattern: /(\.\s*)[a-z_$][\w$]*(?=(\())/i,
          lookbehind: true,
        },
      })
    }
  });

Side note: It is exceptionally painful working with Eleventy and its plugins without type support. Looking over the progress in the main repository is rather disheartening, JSDoc typed modules do not suffice, it is just that simple.