Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight specific keywords in the codeblock #55

Open
daimz opened this issue Jul 6, 2021 · 1 comment
Open

Highlight specific keywords in the codeblock #55

daimz opened this issue Jul 6, 2021 · 1 comment
Labels
enhancement New feature or request

Comments

@daimz
Copy link

daimz commented Jul 6, 2021

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
Copy link

panoply commented May 12, 2022

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.

@zachleat zachleat added the enhancement New feature or request label Jun 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants