search

vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

feat: add code-group component #1560

Closed brc-dd closed 1 year ago

brc-dd commented 1 year ago

fixes #728 closes #1242

Huge thanks to @VoVAllen!

TODO:

VoVAllen commented 1 year ago

image The width of header looks a bit weird

brc-dd commented 1 year ago

I've actually took most of the UI from what we have in @vue/theme (https://github.com/vuejs/theme/pull/50, a demo is here).

/cc @kiaking Your inputs? Should we change the UI?

kiaking commented 1 year ago

@brc-dd yeah I'll take this one over! I would like to adjust a just bit on tabs 👀 I'll work this on today or tomorrow 👍

jd-solanki commented 1 year ago

My thoughts on UI: https://github.com/vuejs/vitepress/issues/728#issuecomment-1296586489

mancuoj commented 1 year ago

Wow! Will this feature appear in the next release? So I don't have to use the garbage code I wrote 👀

kiaking commented 1 year ago

Hopefully! Sorry it's taking time but I will work on it.

kiaking commented 1 year ago

OK finally! I've modified the style to be:

Screenshot 2022-12-16 at 0 10 37 Screenshot 2022-12-16 at 0 10 30
jd-solanki commented 1 year ago

I love this style 😍

MarkusKeck commented 1 year ago

This would completely replace the need of markdown-it-codetabs which I currently use in all my vitepress projects. Big thumbs up!

MarkusKeck commented 1 year ago

How can I import code snippets into codeblocks? I just tested the newly added codeblock, but I cannot add code snippets like it is possible with single code blocks. Can this functionality please be added into codeblocks as well, if it is not currently possible? Codeblocks hold way more code than single code components which results in a very messy markdown if imports are not possible

VoVAllen commented 1 year ago

Glad to see this feature got merged!

dmoyadev commented 1 year ago

I have the same problem with this feature as @MarkusKeck, code snippets are not working and I think it is a core feature with large code blocks or change-prone ones, is there a workaround or something to have them working? Thanks in advance!

MarkusKeck commented 1 year ago

@dmoyadev I use the @include statement and have all other markup inside the code itself. Not pretty but the best solution I came up with. I hope this will be supported at one point. This would allow for a clean code snippet file.

::: code-group

<!--@include: ./../../../snippets/BubbleSort.java-->

:::

The code fle itself (changed the ` to ' so it gets displayed correctly)

'''java [BubbleSort.java]
package net.bitelligence.exercise.sorting;

public class BubbleSort {

    public int[] bubbleSort(int[] numbers) {

    }

}
'''