Open daimz opened 3 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.
It would be great to pass an additional keywords parameter which is then matched in the code to add highlight or bold.
This would then have the keywords matched and wrapped in a class that add special styling to make them bold.
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?