feat(build): improve code blocks and snippets

[brc-dd]

fixes:

• Add support for cs files! Yes I do use vitepress to document C# libraries 😁 #861
• Print variable values in code snippets #471
• Copy to clipboard feature also adding line numbers #884

[emersonbottero]

Shouldn't It recognize the language by the extension?
cs => c#
py => python

and so on?

[brc-dd]

@emersonbottero Read this section https://deploy-preview-875--vitepress-docs.netlify.app/guide/markdown.html#import-code-snippets

You'll have to provide language in case of C#. For *.py, the language will be auto detected as the extension py is a valid language specifier.

I have not implemented language-extension mapping because it will be a fairly long list that we'll need to hard code. It is better to rely on users to override the detected language (the extension of file).

(If your file extension is in this list, then you don't need to specify language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages)

[emersonbottero]

@emersonbottero Read this section https://deploy-preview-875--vitepress-docs.netlify.app/guide/markdown.html#import-code-snippets

You'll have to provide language in case of C#. For *.py, the language will be auto detected as the extension py is a valid language specifier.

I have not implemented language-extension mapping because it will be a fairly long list that we'll need to hard code. It is better to rely on users to override the detected language (the extension of file).

(If your file extension is in this list, then you don't need to specify language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages)

Oh..

Ho, If I ask tô chance
| 'csharp' | 'c#'
to
| 'csharp' | 'c#' | 'cs'
In the shiki lib It should work them? ... 🤔

[brc-dd]

Yeah it would work then. BTW how frequently do you import snippets? There won't be much IG, so {c#} syntax should not be much trouble.

[meteorlxy]

The syntax from markdown-it-vuepress-code-snippet-enhanced looks more markdown-like and extendable (I saw you have noticed that @brc-dd ), so I chose to implement it in vuepress-next (not as powerful as that plugin though).

Anyway, the <<< syntax has being always marked as beta in VuePress v1 (link), so we could still consider changing it.

[brc-dd]

But I don't think it supports importing regions from files. Or does it? Probably that transclude thing? But I'm not quite sure what it does.

[meteorlxy]

It does: https://github.com/fabioaanthony/markdown-it-vuepress-code-snippet-enhanced#transclusion

I'd say that plugin is really powerful 😅

[brc-dd]

@meteorlxy So should we go ahead with this PR or implement that syntax? This PR fixes two other issues, I'll split it. We can track snippets (#861) separately from issues with code blocks.

[emersonbottero]

@meteorlxy So should we go ahead with this PR or implement that syntax? This PR fixes two other issues, I'll split it. We can track snippets (#861) separately from issues with code blocks.

even with the plugin I think it still makes sense to keep it in vitepress since it already has the feature to import code out of the box.

[brc-dd]

Let's merge this for now, we can work on changing the importing format later.

[emersonbottero]

shikijs/shiki#351