npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuepress-plugin-code-switcher

v2.0.1

Published

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.

Downloads

346

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 | main Branch |

Demo

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

Installation

These instructions are only valid for Vuepress 2. If you use Vuepress 1, see here.

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

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

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

export default {
    // Your remaining configuration ...
    plugins: [ codeSwitcherPlugin(/* your config options go here */) ],
}

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:

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 <CustomCodeSwitcher>
            // 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.

<!-- 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

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