Skip to content

Conversation

@curiouscoder-cmd
Copy link

@curiouscoder-cmd curiouscoder-cmd commented Dec 3, 2025

Add classActiveCode option to transformerNotationWordHighlight

closes #1203

Problem

The transformerNotationWordHighlight transformer was missing the classActiveCode option that was recently added to other notation transformers:

  • transformerNotationDiff
  • transformerNotationFocus
  • transformerNotationHighlight
  • transformerNotationErrorLevel

This caused inconsistency and limited styling options when word highlight notations were present in code blocks.

Solution

Added support for a new option: classActiveCode.

This enables applying a custom class to the <code> element when word highlight notation is detected.

Usage

import { codeToHtml } from 'shiki'
import { transformerNotationWordHighlight } from '@shikijs/transformers'

const html = await codeToHtml(code, {
  lang: 'js',
  theme: 'github-dark',
  transformers: [
    transformerNotationWordHighlight({
      classActivePre: 'has-word-highlight',
      classActiveCode: 'has-word-highlight-code', // NEW
    }),
  ],
})

Changes

Added classActiveCode option to TransformerNotationWordHighlightOptions interface

Implemented handling inside transformerNotationWordHighlight

Added 3 new tests for this functionality

Checklist

Code follows existing patterns

Tests added and passing (9 total tests for classActiveCode)

All transformer tests pass (60 tests)

…ionWordHighlight`

Add the `classActiveCode` option to `transformerNotationWordHighlight` for
consistency with other notation transformers (diff, focus, highlight, error-level).

This allows adding a class to the <code> element when the code contains
word highlight notations, complementing the existing `classActivePre` option.
@netlify
Copy link

netlify bot commented Dec 3, 2025

Deploy Preview for shiki-next ready!

Name Link
🔨 Latest commit 58e38f9
🔍 Latest deploy log https://app.netlify.com/projects/shiki-next/deploys/69303f2518245f00081d09a2
😎 Deploy Preview https://deploy-preview-1201--shiki-next.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Dec 3, 2025

Deploy Preview for shiki-matsu ready!

Name Link
🔨 Latest commit 58e38f9
🔍 Latest deploy log https://app.netlify.com/projects/shiki-matsu/deploys/69303f25d0b9990008273700
😎 Deploy Preview https://deploy-preview-1201--shiki-matsu.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov
Copy link

codecov bot commented Dec 3, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.20%. Comparing base (61c87e8) to head (58e38f9).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1201   +/-   ##
=======================================
  Coverage   95.20%   95.20%           
=======================================
  Files          92       92           
  Lines        7922     7925    +3     
  Branches     1689     1690    +1     
=======================================
+ Hits         7542     7545    +3     
  Misses        374      374           
  Partials        6        6           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add classActiveCode support to transformerNotationWordHighlight

1 participant