asvd / microlight

highlights code in any programming language
http://asvd.github.io/microlight
MIT License
1.48k stars 63 forks source link

Extends reset() selector capabilities + Custom (Key)words #13

Open felippe-regazio opened 3 years ago

felippe-regazio commented 3 years ago

This PR adds two new features. I know is not a good ideia to send a double feature PR, but since it shares some lines between modifications and is a very small PR as well, im sending a single one to avoid rebase or conflicts. In case to not accept any mod, its just deny, in case to accept only one, i can split them.

  1. It extends the capabilities of reset selector to the following situations:
// same behavior (retrocompatibility)
microlight.reset(); 

// same behavior (retrocompatibility)
microlight.reset('whatever');

// can use any valid selector (will try querySelectorAll)
microlight.reset({ selector: '[code-lang=javascript]' });
microlight.reset({ selector: 'code.language-html' };

// can directly pass an object array or node list
microlight.reset(document.querySelectorAll('code.highlight'))

// can pass a single element/node
microlight.reset(document.querySelector('div.single-node-highlight'));

The motivation for this feature is to let this library to be used in many situations that we have no full control of the html output (as in some doc/static generators, for example). It can be useful to determine the targets with accuracy when by class is not a possible option.

  1. Adds the capability to pass a custom wordlist to highlight (incrementally)

Turns the second parameter into a custom case sensitive wordlist. The wordlist must be an array of strings which will be highlighted as tokenType 1:

microlight.reset('whatever', [
  'npm',
  'install',
  'run',
]);

This will highlight the "npm", "install" and "run" words. The motivation for this feature is to extend the lib capabilities to deal with almost any situation/language.


I believe that this two features together can empower the lib in such a way that user can have a lot of flexibility and also create cool things like a snippet that highlights bash npm commands only on code tags, for example:

microlight.reset({ selector: 'code.npm-snippet' }, [
  'npm', 'install', 'run', 'uninstall', 'publish'
]);