Auto detect language in codeblocks

[TheHamkerCat]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Can we have a feature to use hljs.highlightAuto() of highlight.js with <CodeBlock/> to auto-detect language?

Something like this

This would be really helpful when we're unsure about the language, especially when working with LLMs.

Currently we use this syntax:

<CodeBlock language="ts" code={`const skeleton: string = 'awesome';`}></CodeBlock>

How about?

<CodeBlock autodetect={true} code={`const skeleton: string = 'awesome';`}></CodeBlock>

I know this will dramatically increase bundle size, but maybe we can explicitly specify a list of languages we want support for when initializing.

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

https://github.com/highlightjs/highlight.js#using-with-vuejs
https://github.com/highlightjs/highlight.js#nodejs-on-the-server

[TheHamkerCat]

skeleton/src/lib/utilities/CodeBlock/CodeBlock.svelte

Line 70 in 52fc1d1

displayCode = $storeHighlightJs.highlight(code, { language }).value.trim();

Replacing highlight() with highlightAuto() and removing the language parameter works here temporarily (language displayed on ui will be incorrect though), i'll use this until that feature is added

[endigo9740]

This is a bit at odds with: #1381

But FYI we're in the process of some major structural changes to the Skeleton project - which includes migrating to a monorepo. When this is complete, the code blocks are one of a handful of features we're looking to spin off as standalone packages. When this occurs we'll revisit a lot of the feature set and capabilities provided.

This could include potentially switching to something like Prism.js in favor of Highlight.js. So just FYI there are some prerequisites before we move forward with improvements to the existing code blocks.

If you need a short term fix, consider cloning the component to your local project, and modifying the functionality locally. It won't receive upstream updates obviously, but it'll operate as you see fit. You can find the source here:
https://github.com/skeletonlabs/skeleton/tree/dev/src/lib/utilities/CodeBlock

[TheHamkerCat]

If you need a short term fix, consider cloning the component to your local project

Thanks, i'll do this!

You can find the source here: https://github.com/skeletonlabs/skeleton/tree/dev/src/lib/utilities/CodeBlock

Did you mean https://github.com/skeletonlabs/skeleton/tree/dev/packages/skeleton/src/lib/utilities/CodeBlock

[endigo9740]

@TheHamkerCat we literally just pushed the monorepo change so that path just updated accordingly. But yes that's the new corrected path, thanks!

[endigo9740]

Note that this will be considered as part of the transition to the Code Block becoming a standalone package.

[endigo9740]

In an effort to prepare for Skeleton v3, we're consolidate some related issues down to a single ticket. This will ensure that we can see the full context of requests when the time comes to refactor and update this feature going forward. If you wish to add additional feedback or suggestions, please so here:

• Integration: Code Blocks #2396