highlightting js

index.html

@@ -22,6 +22,7 @@
 
     <!-- still experimenting, see webdav.html -->
     <script src='dependencies/webdav.js'></script> 
+    <script src="https://unpkg.com/shiki"></script>
 
     <!-- replacing with local copies as CDNs are like unpkg tend to be slow
     <script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
@@ -2332,6 +2333,25 @@ function jxrhighlight(){
 	// see also generalization via https://shiki.matsu.io custom renderers
 }
 
+
+// could then be used in syntax-highlighter component, typically used on content from addNewNote()
+	// meaning might have to replace jxr prefix by empty spaces
+var highlighter
+shiki.getHighlighter({ theme: 'monokai', langs: ['javascript' ] }).then(h => highlighter = h )
+function highlight(code = `console.log("Here is your code."); var x = 5;`, language='javascript'){
+	if (!highlighter) return {} // should also warn
+	const tokens = highlighter.codeToThemedTokens(code, language)
+	let pos=0
+	let colorRange={}
+	let parsing = [].concat(...tokens).map((t,i) => {
+		colorRange[pos] = t.color/*.replace("#","0x")*/
+		pos+=t.content.length
+	})
+	return colorRange
+}
+// code = 'let x = 42;'; el = addNewNote(code); el.setAttribute("troika-text", {colorRanges: highlight(code)})
+// color scheme not compatible with threejs
+
 </script>
 <div id="observablehq-key">
     <div id="observablehq-viewof-offsetExample-ab4c1560"></div>
@@ -2399,7 +2419,7 @@ function jxrhighlight(){
       <a-troika-text anchor=left target value="jxr pushUpClass('tiles')" position=" -0.2 1.45 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
       <a-troika-text anchor=left target value="jxr pushDownClass('tiles')" position=" -0.2 1.40 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
       <a-troika-text anchor=left target value="jxr pushBackClass('tiles')" position=" -0.2 1.35 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
-      <a-troika-text anchor=left target value="jxr pushFrontClass('tiles')" position=" -0.2 1.30 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left target syntax-highlighter value="jxr pushFrontClass('tiles')" position=" -0.2 1.30 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
 
       <!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position 
 	      <a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text>