gera2ld / tw-prism

TiddlyWiki plugin to provide syntax highlight with PrismJS
https://gera2ld.github.io/tw-prism/
MIT License
11 stars 1 forks source link

feature request: make prism prefix notation more flexible #4

Closed rmmanseau closed 2 years ago

rmmanseau commented 2 years ago

I notice that you implemented a prefix syntax for applying more prism rules to a code block, but its fairly limited. you can only add highlighted lines & the lineNumber classname

I went ahead & extended it so that you can apply an arbitrary number of classnames, data attributes, and ids. syntax looks like this:

// prism { "class": "<class1> <class2> ...", "id": "some-id", "data-<whatever>": "<some-string>"}

too lazy to make a pull request so i'll drop the code here:

// $:/plugins/gera2ld/prism/main.js

...
         }
         if (config) code.textContent = text.slice(i + 2);
       }
-      if (config?.line) domNode.dataset.line = config.line;
-      if (config?.lineNumbers !== false) domNode.classList.add('line-numbers');
+      Object.entries(config || {}).filter(([k,v]) => typeof k === "string" 
+                                                     && typeof v === "string"
+                                                     && k.startsWith("data-"))
+                                  .map(([k,v]) => [k.replace(/^data-/,'')
+                                                    .replace(/-./g, x=>x[1].toUpperCase()), v])
+                                  .forEach(([k,v]) => {domNode.dataset[k] = v;});
+      if (typeof config?.class === "string") domNode.classList.add(...config.class.split(' '));
+      if (typeof config?.id === "string") domNode.id = config.id;
       Prism.highlightElement(code);
     } else {
       const text = domNode.textContent;
...

thanks for all the hard work!!! this is so much better than the default tiddlywiki highlighting : )

gera2ld commented 2 years ago

Thanks for your great suggestion.

I've changed the syntax a bit. Instead of {"lineNumbers": false}, now we need to use {"class":"!line-numbers"} to disable line numbers for a code block.

Line highlighting works as before. All other attributes will be applied to <pre> directly.