Skip to content
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

Allow users to Define Multiple Languages in the Code Block #3039

Open
gabrielthomasjacobs opened this issue May 6, 2022 · 0 comments
Open

Comments

@gabrielthomasjacobs
Copy link

gabrielthomasjacobs commented May 6, 2022

Feature request

Allow users to Define Multiple Languages in the Code Block

What problem does this feature solve?

When trying to display Vue components, it's not possible to highlight the html, css, and script separately within the same code block. The workaround is to define multiple code blocks or lose the highlighting for one of the languages. It looks like prism has an issue open to support Vue, but it's getting pretty old and this could be useful outside of just vue SFCs.

What does the proposed API look like?

Right now code blocks can be defined with a range for line numbers. It would make sense to keep that and just allow for multiple definitions. I think to handle "collisions", latter definitions would just overwrite previous ones.

The language label at the upper right corner would just show all the languages, comma separated.

How should this be implemented in your opinion?

current available code block definition (ignore backslashes... github markdown rendering...):

\```ts{6-10}
<template>
  <MyComponent></MyComponent >
</template>

<script setup lang="ts">
  import { MyComponent } from 'Components';
  const { setValue } = useStore();
  
  const exampleFoo = fetchFoo(...);
  setValue (exampleFoo );
<script>
<style lang="scss">
  .myClass {}
</style>
\```

proposed code block definition:

\```html | ts{6-10} | scss{13}
<template>
  <MyComponent></MyComponent >
</template>

<script setup lang="ts">
  import { MyComponent } from 'Components';
  const { setValue } = useStore();
  
  const exampleFoo = fetchFoo(...);
  setValue (exampleFoo );
<script>
<style lang="scss">
  .myClass {}
</style>
\```

Are you willing to work on this yourself?

Possibly! I plan on looking at the code and trying, but until I know how deep the rabbit hole is...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant