vuepress / core

Vue-Powered Static Site Generator
https://vuepress.vuejs.org
MIT License
2.17k stars 923 forks source link

[Feature request] Code Import single lines #1355

Closed vordimous closed 2 weeks ago

vordimous commented 1 year ago

Clear and concise description of the problem

Allow the same code line selection for imports as for highlighting. This will make adding instructions from runnable files easier since there may be many different lines in a bash script, for instance, that are needed to run a test but not needed to be displayed to the user.

Will render: @[code{1-1}](../foo.js) Doesn't render: @[code{1}](../foo.js) Doesn't render: @[code{2,4}](../foo.js)

Suggested solution

You could add the same code line selection for highlighting lines as for imported code blocks.

Alternative

No response

Additional context

No response

Mister-Hope commented 1 year ago

I don't think the first case is needed, why do you need to import one single line from other files instead of direct writing that? Also I don't think importing pieces and merging them is a common feature.

You can use include feature with vuepress-plguin-md-enhance inside code blocks as a workaround, or you may edit and release a markdown-it plugin yourself.

vordimous commented 1 year ago

@Mister-Hope The use case for single-line import is that we have many different short samples to display to the user. We have them defined in runnable scripts where we display individual steps for the user to follow. This way, the code we test and the code the user uses are the same. Many of those steps are just one line of code.

Please consider at least single line imports if possible.

Mister-Hope commented 1 year ago

Tbh, the first one does have workaround, didn't it?

Anyway contribution welcome, I don't think any disadvantages to support it.

vordimous commented 1 year ago

yes you can use a range that has the same line number @[code{11-11}](.). This isn't a blocking issue that I can think of.

Mister-Hope commented 9 months ago

We are closing this as we support 1- and -5 (meaning "1 to end" and "1-5").

Supporting both 3- and 3 may confuse the user.

Mister-Hope commented 9 months ago

Oh wait, I read again your original request, it seems you want something like:

@[code{2,4-5,6}](../foo.js)

Code region is better than setting with lines, as the file content may change through time, you can use it with https://plugin-md-enhance.vuejs.press/guide/include.html as an workaround.

The include plugin has highest priority (even before code blocks), so you can probably use:

```js
<!-- @include: ./foo.js{1} -->
<!-- @include: ./foo.js{2-4} -->
<!-- @include: ./foo.js#part1 -->

If the code block is indented, you still need to ensure that the comment is at the start of the line:

````md
  ```js
<!-- @include: ./foo.js{1} -->
Mister-Hope commented 9 months ago

I do not think we need to support @[code{2,4-5,6}](../foo.js), waiting for @meteorlxy opinion before finally closing this issue

vordimous commented 9 months ago

Thank you @Mister-Hope, I like the @include option since it allows for code highlighting separate from the import and the snippet feature is nice.

I did not find the individual line support you mention to work:

<!-- @include: ./foo.js{1} -->
<!-- @include: ./foo.js{2-4} -->
<!-- @include: ./foo.js#part1 -->

image

    "vue": "^3.3.4",
    "vuepress": "2.0.0-beta.67",
    "vuepress-theme-hope": "2.0.0-beta.238"
Mister-Hope commented 5 months ago

I do not think we need to support @[code{2,4-5,6}](../foo.js), waiting for @meteorlxy opinion before finally closing this issue

CC @meteorlxy

Mister-Hope commented 5 months ago

Thank you @Mister-Hope, I like the @include option since it allows for code highlighting separate from the import and the snippet feature is nice.

I did not find the individual line support you mention to work:

<!-- @include: ./foo.js{1} -->
<!-- @include: ./foo.js{2-4} -->
<!-- @include: ./foo.js#part1 -->

image

    "vue": "^3.3.4",
    "vuepress": "2.0.0-beta.67",
    "vuepress-theme-hope": "2.0.0-beta.238"

You can report issues in vuepress-theme-hope repo.

vordimous commented 5 months ago

You can report issues in vuepress-theme-hope repo.

I created a ticket to track @include here: https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues/3855