https://github.com/padarom/vuepress-plugin-code-switcher

:arrows_clockwise: Component that adds synchronized multi-language code blocks to your Vuepress sites
https://github.com/padarom/vuepress-plugin-code-switcher

hacktoberfest vuepress vuepress-plugin

Last synced: 12 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/padarom/vuepress-plugin-code-switcher
• Owner: padarom
• License: mit
• Created: 2019-02-08T15:20:20.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-06-11T08:13:47.000Z (5 months ago)
• Last Synced: 2024-10-15T20:32:10.015Z (27 days ago)
• Topics: hacktoberfest, vuepress, vuepress-plugin
• Language: TypeScript
• Homepage: https://code-switcher.padarom.xyz
• Size: 1.89 MB
• Stars: 41
• Watchers: 3
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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.

This plugin supports both Vuepress 1 and 2. Since Vuepress 1 plugins are incompatible with Vuepress 2 I try to maintain the plugin for both Vuepress versions. Those plugin versions can be seen in different GitHub branches as shown below.

| | Vuepress 1 | Vuepress 2 |

| -- | --- | --- |

| npm | Versions `1.x.x` | Versions `2.x.x` |

| GitHub | [`vuepress-1` Branch](https://github.com/padarom/vuepress-plugin-code-switcher/tree/vuepress-1) | [`main` Branch](https://github.com/padarom/vuepress-plugin-code-switcher/tree/main) |

## Demo

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

![](preview.gif)

## Installation

**These instructions are only valid for Vuepress 2. If you use Vuepress 1, see [here](https://github.com/padarom/vuepress-plugin-code-switcher/blob/vuepress-1/README.md#installation).**

```

$ npm install vuepress-plugin-code-switcher@~2.0 --save

```

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

```ts

import { codeSwitcherPlugin } from 'vuepress-plugin-code-switcher'

export default {

    // Your remaining configuration ...

    plugins: [ codeSwitcherPlugin(/* your config options go here */) ],

}

```

### Usage

````markdown

```js

module.exports = function (str) {

    return typeof str === 'string' && str.trim() === str

}

```

```ts

export default function isString (str: string) : str is string {

    return typeof str === 'string' && str.trim() === str

}

```

````

> The extra newline between the `` 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:

```js

import { codeSwitcherPlugin } from 'vuepress-plugin-code-switcher'

export default {

    // Your remaining configuration ...

    plugins: [

        codeSwitcherPlugins({

            groups: {

                default: { ts: 'TypeScript', js: 'JavaScript' },

                jvm: { java: 'Java', kotlin: 'Kotlin', jruby: 'JRuby' },

            },

            // You can also specify a custom name for the code switcher component.

            // If chaning the name like so, you then use the component as 

            // in your markdown code

            componentName: 'CustomCodeSwitcher',

        })

    ],

}

```

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`.

````markdown

    

    

    

    

    

````

#### Props

| Prop | Description | Type | Default |

| ----- | ----- | ---- | ---- |

| languages | The 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 names | Object | --- |

| name | All 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'` |

| isolated | if true, this block will not synchronize with any others or load/save its state to/from localstorage | Boolean | `false` |