3 ms·
I'm currently building an online 3D-Editor that supports OpenSCAD and Python as the input language. The ease of use to highlight static text via Arborium seems
by mg 10mo ago
I'm currently building an online 3D-Editor that supports OpenSCAD and Python as the input language.
The ease of use to highlight static text via Arborium seems nice:
<script src="arborium.iife.js"></script>
<pre><code class="language-python">
def hello(name):
print("Hello " + name);
</code></pre>
But does it support editing highlighted text? If not, one would have to do some trickery by hiding a textarea and updating the <code> element on each keypress, I guess. Which probably has a thousand corner cases one would have to deal with.
And how would one add SCAD support?
- debazel 10mo agoThe example on their website is editable and it looks like they overlay the highlighted output on top of the textarea with `pointer-events: none` like you mentioned. The code isn't minified so you can see how they do it by looking at the `doHighlight()` function here https://arborium.bearcove.eu/pkg/app.generated.js https://arborium.bearcove.eu/pkg/app.generated.js
- mg 10mo agoOh, you are right! Hmm .. and the approach already shows its weaknesses when I play with it: When I search for something on the page, it gives me twice as many hits as there are. And jumps around two times to each hit when I use the "next" button. I wonder if that is fixable.
- knallfrosch 10mo agoOne simply needs the Highlight API. I held back, but now even Firefox ESR supports it. https://developer.mozilla.org/en-US/docs/Web/API/Highlight https://developer.mozilla.org/en-US/docs/Web/API/Highlight All the trickery vanishes and you get first-class CSS support.
- debazel 10mo agoThere is a neat `inert` html attribute you can use to disable all interactions as well as hide the text from ctrl+f searches. (Sadly Safari is the weird one out, and does not exclude the content from searches.) https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- fsfod 10mo agoGitHub had to solve the same problem when speeding up there code viewer. https://github.blog/engineering/architecture-optimization/crafting-a-better-faster-code-view/ https://github.blog/engineering/architecture-optimization/cr...
- metmac 10mo agoI’m now just curious about your project
- mg 10mo agoGive me a few more weeks and I will probably have something online. You can find me on social media or feel free to connect via email.