Skip to content

Ability to include code from the _files in the markdown of the lesson #264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
noam-honig opened this issue Aug 19, 2024 · 9 comments
Closed
Labels
documentation Change related to TutorialKit documentation or demo site

Comments

@noam-honig
Copy link
Contributor

noam-honig commented Aug 19, 2024

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 AriPerkkio added the enhancement New feature or request label Aug 28, 2024
@AriPerkkio
Copy link
Member

AriPerkkio commented Aug 28, 2024

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
Copy link
Contributor Author

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

@Nemikolh
Copy link
Member

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

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

See #18

@AriPerkkio AriPerkkio added documentation Change related to TutorialKit documentation or demo site and removed enhancement New feature or request labels Aug 30, 2024
@AriPerkkio
Copy link
Member

Let's add documentation for this in #250.

@noam-honig
Copy link
Contributor Author

@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
Copy link
Member

Does the collapse option work there?

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

\```

@noam-honig
Copy link
Contributor Author

Sure - that's good enough.

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

@noam-honig
Copy link
Contributor Author

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
Copy link
Member

AriPerkkio commented Sep 3, 2024

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:

"@expressive-code/plugin-collapsible-sections": "^0.35.3",
"@expressive-code/plugin-line-numbers": "^0.35.3",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Change related to TutorialKit documentation or demo site
Projects
None yet
Development

No branches or pull requests

3 participants