Ability to include code from the `_files` in the markdown of the lesson

[noam-honig]

Is your feature request related to a problem?

In many cases the code blocks in my markdown is the same code from the _files or _solution - and keeping it consistent is not ideal

Describe the solution you'd like.

I wish I could reference to a a file in the lesson from the code.

Something like

```ts src="frontend/Todo.tsx:lines(10-15)" title="same as src" add={1-5}

### Describe alternatives you've considered.

Maintaining both versions

### Additional context

_No response_

[AriPerkkio]

Interesting idea! At first I was thinking this should be solved in userland by creating custom Astro components that simply read the file contents with node:fs and show them in markdown. But I think as quite many tutorials would benefit from this feature, it would be nice to have it built in TutorialKit.

[noam-honig]

@AriPerkkio this seems to be built in with vitepres https://vitepress.dev/guide/markdown#import-code-snippets

[Nemikolh]

We already support this feature actually! It's not documented but you can do it with:

```file:/path/to/file.js
```

See https://github.com/stackblitz/tutorialkit/pull/18

[AriPerkkio]

Let's add documentation for this in https://github.com/stackblitz/tutorialkit/issues/250.

[noam-honig]

@AriPerkkio the existing solution is only partial - I need the ability to select which lines will be included from the source file.

Sometimes the source file can be 40 lines, with changes to two - I want to focus on 5 lines and highlight the change in these two

[AriPerkkio]

Does the collapse option work there?

\```file:/vite.config.ts showLineNumbers {7-11} collapse={1-4, 13-19}

\```

[noam-honig]

Sure - that's good enough.

Is there a specific md page you want me to document all of this in?

[noam-honig]

Hi @AriPerkkio I would like to document these options - can you let me know which package are you using for the code snippets - so I'll investigate their docs? and also which one is being used for markdown?

[AriPerkkio]

Is there a specific md page you want me to document all of this in?

I think guides/creating-content would be a good spot for this.

which package are you using for the code snippets - so I'll investigate their docs? and also which one is being used for markdown?

TutorialKit supports expressive-code and Astro.

We also have these plugins enabled:

https://github.com/stackblitz/tutorialkit/blob/d14c4045ad692a45b5b388bb4cfcca9762e6142c/packages/astro/package.json#L36-L37