vuepress
vuepress copied to clipboard
Allow users to Define Multiple Languages in the Code Block
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...