Skip to content

Highlight specific keywords in the codeblock #55

@daimz

Description

@daimz

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions