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 a day ago | parent | next [-]

The 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

▲

mg a day ago | parent [-]

Oh, 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.

▲

debazel 19 hours ago | parent | next [-]

There 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/...

▲

fsfod 17 hours ago | parent | prev | next [-]

GitHub had to solve the same problem when speeding up there code viewer.

https://github.blog/engineering/architecture-optimization/cr...

▲

knallfrosch 20 hours ago | parent | prev [-]

One 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

All the trickery vanishes and you get first-class CSS support.

	▲	bakkoting 15 hours ago \| parent \| next [-]
		And there's an open issue for that already: https://github.com/bearcove/arborium/issues/62
	▲	mg 8 hours ago \| parent \| prev [-]
		That works on the text inside a textarea? Is there a demo showcasing this somewhere?

▲ metmac a day ago | parent | prev [-]

I’m now just curious about your project

	▲	mg a day ago \| parent [-]
		Give 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.