vpc

vuepress-plugin-code-switcher

🔃 Component that adds synchronized multi-language code blocks to your Vuepress sites

Showing:

Popularity

Downloads/wk

55

GitHub Stars

35

Maintenance

Last Commit

6mos ago

Contributors

5

Package

Dependencies

1

Size (min+gzip)

0.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vuepress-plugin-code-switcher

Component that allows having synchronized language switchable code blocks (e.g. to switch between Java and Kotlin examples). Selected languages are persisted to local storage to have language selection be permanent across page requests.

Requires Vuepress 1.0+

Demo

A live demo is available at https://code-switcher.padarom.xyz.

Installation

$ npm install vuepress-plugin-code-switcher --save

After installing, add it to your Vuepress configuration's plugin list:

module.exports = {
    // Your remaining configuration ...
    plugins: [ 'code-switcher' ],
}

Usage

<CodeSwitcher :languages="{js:'JavaScript',ts:'TypeScript'}">
<template v-slot:js>

```js
module.exports = function (str) {
    return typeof str === 'string' && str.trim() === str
}
```

</template>
<template v-slot:ts>

```ts
export default function isString (str: string) : str is string {
    return typeof str === 'string' && str.trim() === str
}
```

</template>
</CodeSwitcher>

The extra newline between the <template> tags and their content is necessary if you want to have Markdown interpreted within the component.

With options

If you have a lot of code switchers in your documentation you might not want to specify your languages every single time. Therefore you can instantiate the plugin with options and name the default languages for a given group:

module.exports = {
    // Your remaining configuration ...
    plugins: [
        [
            'code-switcher',
            {
                groups: {
                    default: { ts: 'TypeScript', js: 'JavaScript' },
                    jvm: { java: 'Java', kotlin: 'Kotlin', jruby: 'JRuby' },
                },
            },
        ],
    ],
}

You then want to give your CodeSwitcher components the name prop to match them with the configured language group. If you omit the name prop, it uses the group named default.

<!-- Uses the "default" languages defined above -->
<CodeSwitcher>
<template v-slot:js>
    <!-- ... (see above) -->
</template>
<template v-slot:ts>
    <!-- ... (see above) -->
</template>
</CodeSwitcher>

<!-- Uses the "jvm" languages defined above -->
<CodeSwitcher name="jvm">
<template v-slot:java>
    <!-- ... (see above) -->
</template>
<template v-slot:kotlin>
    <!-- ... (see above) -->
</template>
<template v-slot:jruby>
    <!-- ... (see above) -->
</template>
</CodeSwitcher>

Props

PropDescriptionTypeDefault
languagesThe languages that can be switched between. The object expects shorthands as keys and the tab title as values. The shorthands will also be used as slot namesObject---
nameAll code switchers on one page with the same name will be synchronized. When using the groups plugin option, this will also determine the default value for the languages prop.String'default'
isolatedif true, this block will not synchronize with any others or load/save its state to/from localstorageBooleanfalse

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial