Codeblock contenteditable attr

[ayodyln]

I'm starting to work on making an in-browser text editor, which is basic in nature. Just serve a specific purpose on my portfolio site. I would be writing articles in HTML/MD in a content editable div. But... I'm missing the highlighting and stuff. Is adding a prop to the code block component that makes this feature possible?

So that I have highlighted text?

[endigo9740]

Unfortunately no @ayodyln because there's a processing step by Highlight.js that kind of scrambles the output. To see what I mean try viewing the source for the code blocks after syntax highlighting runs. You'll see a bunch of spans and classes added. This means what you're seeing isn't really what you would be editing.

What I might suggest instead is looking for a WYSIWYG editor that supports markdown. You might have to pair it with your own markdown parser for the output. However I'd be shocked if a combined solution doesn't already exist.

Maybe look into something like this?
https://quilljs.com/

edit Here's a bigger list:
https://github.com/JefMari/awesome-wysiwyg-editors

[ayodyln]

@endigo9740, thank you so much for explaining that to me and the advice. I'm trying to find a solution that just fits well with Skeleton's library. I made s custom one so far that looks good. It's just missing syntax highlighting and formatting (if possible via a package).

I'll checkout what you recommended! ☺️

[ayodyln]

I've also tried other text editor packages and some just wouldn't mount properly with SvelteKit. I can revisit them and see if I was doing something wrong.

But for now, I can just make a custom and minimal editor.

[endigo9740]

Glad to help. Here's the dependency we use for the Code Blocks. It's pretty simple to work with and has plenty of options we don't touch. You might can make it work:
https://highlightjs.org/

Prism.js is the other big one for code blocks.

But again, code blocks and code editing have different goals in mind. You'll likely need something more specialized.