├── preview.gif
├── src
    ├── client
    │   ├── index.ts
    │   ├── emitter.ts
    │   ├── styles
    │   │   └── index.scss
    │   ├── config.ts
    │   └── components
    │   │   └── CodeSwitcher.ts
    ├── node
    │   ├── index.ts
    │   └── codeSwitcherPlugin.ts
    └── shared
    │   └── types.ts
├── .gitignore
├── demo
    ├── package.json
    └── src
    │   ├── .vuepress
    │       └── config.ts
    │   └── index.md
├── tsconfig.build.json
├── .github
    └── workflows
    │   └── demo.yaml
├── LICENSE
├── package.json
└── README.md


/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tophcodes/vuepress-plugin-code-switcher/HEAD/preview.gif


--------------------------------------------------------------------------------
/src/client/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/CodeSwitcher.js'
2 | export * from '../shared/types.js'
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn.lock
3 | demo/src/.vuepress/dist
4 | demo/src/.vuepress/.cache
5 | demo/src/.vuepress/.temp
6 | lib
7 | 


--------------------------------------------------------------------------------
/src/client/emitter.ts:
--------------------------------------------------------------------------------
1 | import emitter from 'tiny-emitter/instance'
2 | 
3 | export default {
4 |   $on: (...args) => emitter.on(...args),
5 |   $emit: (...args) => emitter.emit(...args),
6 | }
7 | 


--------------------------------------------------------------------------------
/src/node/index.ts:
--------------------------------------------------------------------------------
1 | import { codeSwitcherPlugin } from './codeSwitcherPlugin.js'
2 | 
3 | export * from '../shared/types.js'
4 | export * from './codeSwitcherPlugin.js'
5 | export default codeSwitcherPlugin
6 | 


--------------------------------------------------------------------------------
/src/shared/types.ts:
--------------------------------------------------------------------------------
1 | export type LanguageMapping = Record<string, string>
2 | export type DefaultGroups = Record<string, LanguageMapping>
3 | 
4 | export type PluginOptions = {
5 |   groups?: DefaultGroups,
6 |   componentName?: string,
7 | }
8 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@vuepress-plugin-code-switcher/demo",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "vuepress dev src",
 6 |     "build": "vuepress build src"
 7 |   },
 8 |   "devDependencies": {
 9 |     "vuepress": "^2.0.0-beta.51"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "lib": ["DOM", "ES2020"],
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "node",
 7 |     "noEmitOnError": true,
 8 |     "noImplicitAny": false,
 9 |     "skipLibCheck": true,
10 |     "declaration": true,
11 |     "target": "ES2020",
12 |     "rootDir": "./src",
13 |     "outDir": "./lib",
14 |     "types": ["@vuepress/client/types", "tiny-emitter"]
15 |   },
16 |   "include": ["./src"]
17 | }
18 | 


--------------------------------------------------------------------------------
/src/client/styles/index.scss:
--------------------------------------------------------------------------------
 1 | .code-switcher {
 2 |   div[class*="language-"]::before {
 3 |     content: "";
 4 |   }
 5 | 
 6 |   .tab-header {
 7 |     ul {
 8 |       padding: 0;
 9 |       text-align: right;
10 |       margin-bottom: -5px;
11 |       margin-top: 20px;
12 |     }
13 | 
14 |     li {
15 |       display: inline-block;
16 |       padding: 0 10px;
17 |       cursor: pointer;
18 |       border-radius: 4px;
19 |       border: 2px solid var(--c-border);
20 |       margin-left: 5px;
21 |       font-size: 80%;
22 | 
23 |       &.active {
24 |         border-color: var(--c-brand);
25 |       }
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/node/codeSwitcherPlugin.ts:
--------------------------------------------------------------------------------
 1 | import type { Plugin } from '@vuepress/core'
 2 | import { getDirname, path } from '@vuepress/utils'
 3 | import type { PluginOptions } from '../shared/types'
 4 | 
 5 | const __dirname = getDirname(import.meta.url)
 6 | 
 7 | export const codeSwitcherPlugin = ({
 8 |   componentName = 'CodeSwitcher',
 9 |   groups = {},
10 | }: PluginOptions = {}): Plugin => ({
11 |   name: 'vuepress-plugin-code-switcher',
12 | 
13 |   clientConfigFile: () => path.resolve(__dirname, '../client/config.js'),
14 | 
15 |   define: {
16 |     __CODE_SWITCHER_COMPONENT_NAME__: componentName,
17 |     __CODE_SWITCHER_GROUPS__: groups,
18 |   }
19 | })
20 | 


--------------------------------------------------------------------------------
/src/client/config.ts:
--------------------------------------------------------------------------------
 1 | import { defineClientConfig } from '@vuepress/client'
 2 | import { h } from 'vue'
 3 | import type { PluginOptions } from '../shared/types'
 4 | import { CodeSwitcher } from './components/CodeSwitcher'
 5 | 
 6 | import './styles/index.scss'
 7 | 
 8 | declare const __CODE_SWITCHER_COMPONENT_NAME__: string
 9 | declare const __CODE_SWITCHER_GROUPS__: PluginOptions
10 | 
11 | const defaultGroups = __CODE_SWITCHER_GROUPS__
12 | 
13 | export default defineClientConfig({
14 |   enhance({ app }) {
15 |     app.component(__CODE_SWITCHER_COMPONENT_NAME__, (props, context) => {
16 |       return h(CodeSwitcher, {
17 |         groups: defaultGroups,
18 |         ...props
19 |       }, context.slots)
20 |     })
21 |   }
22 | })
23 | 


--------------------------------------------------------------------------------
/demo/src/.vuepress/config.ts:
--------------------------------------------------------------------------------
 1 | import { defineUserConfig } from 'vuepress'
 2 | import { codeSwitcherPlugin } from '../../../lib/node'
 3 | import { defaultTheme } from '@vuepress/theme-default'
 4 | 
 5 | export default defineUserConfig({
 6 |   title: 'Code Switcher Vuepress Plugin',
 7 | 
 8 |   theme: defaultTheme({
 9 |     repo: 'https://github.com/padarom/vuepress-plugin-code-switcher',
10 |     editLink: true,
11 |     docsDir: 'demo/src',
12 |     lastUpdated: true,
13 |   }),
14 | 
15 |   plugins: [
16 |     codeSwitcherPlugin({
17 |       groups: {
18 |         synchronized: { julia: 'Julia', kotlin: 'Kotlin', perl: 'Perl' },
19 |         'group-1': { nim: 'Nim', ocaml: 'OCaml' },
20 |         'group-2': { nim: 'Nim', ocaml: 'OCaml' },
21 |       },
22 |     }),
23 |   ],
24 | })
25 | 


--------------------------------------------------------------------------------
/.github/workflows/demo.yaml:
--------------------------------------------------------------------------------
 1 | name: Build and deploy the demo page
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 | 
 7 | jobs:
 8 |   build-and-deploy:
 9 |     runs-on: ubuntu-latest
10 | 
11 |     steps:
12 |       - name: Checkout Git repository
13 |         uses: actions/checkout@v2
14 |       
15 |       - name: Install dependencies
16 |         run: npm install && cd demo && npm install
17 |       
18 |       - name: Build the plugin
19 |         run: npm run build
20 | 
21 |       - name: Build and Deploy
22 |         uses: jenkey2011/vuepress-deploy@master
23 |         env:
24 |           # See https://github.com/marketplace/actions/vuepress-deploy#create-a-personal-access-token
25 |           # on how to create and store an access token in case a new one is
26 |           # ever needed
27 |           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
28 |           CNAME: code-switcher.padarom.xyz
29 |           TARGET_BRANCH: gh-pages
30 |           BUILD_SCRIPT: npm run build:demo
31 |           BUILD_DIR: demo/src/.vuepress/dist
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Christopher Mühl
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuepress-plugin-code-switcher",
 3 |   "version": "2.0.1",
 4 |   "author": {
 5 |     "name": "Christopher Mühl",
 6 |     "email": "christopher@padarom.xyz",
 7 |     "url": "https://padarom.xyz"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/padarom/vuepress-plugin-code-switcher"
12 |   },
13 |   "scripts": {
14 |     "build": "tsc -b tsconfig.build.json && cpx \"src/**/*.{d.ts,vue,scss}\" lib",
15 |     "build:demo": "npm run build --workspace @vuepress-plugin-code-switcher/demo",
16 |     "dev": "npm run dev --workspace @vuepress-plugin-code-switcher/demo"
17 |   },
18 |   "workspaces": ["./demo"],
19 |   "packageManager": "pnpm@7.11.0",
20 |   "type": "module",
21 |   "exports": {
22 |     ".": "./lib/node/index.js",
23 |     "./client": "./lib/client/index.js",
24 |     "./package.json": "./package.json"
25 |   },
26 |   "main": "./lib/node/index.ts",
27 |   "types": "./lib/node/index.d.ts",
28 |   "files": [
29 |     "lib"
30 |   ],
31 |   "license": "MIT",
32 |   "devDependencies": {
33 |     "cpx": "^1.5.0",
34 |     "sass": "^1.55.0",
35 |     "sass-loader": "^13.0.2",
36 |     "typescript": "^4.8.4"
37 |   },
38 |   "dependencies": {
39 |     "@vuepress/client": "^2.0.0-beta.51",
40 |     "@vuepress/core": "^2.0.0-beta.51",
41 |     "@vuepress/utils": "^2.0.0-beta.51",
42 |     "tiny-emitter": "^2.1.0",
43 |     "vue": "^3.2.40"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vuepress-plugin-code-switcher
  2 | 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.
  3 | 
  4 | 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.
  5 | 
  6 | | | Vuepress 1 | Vuepress 2 |
  7 | | -- | --- | --- |
  8 | | npm | Versions `1.x.x` | Versions `2.x.x` |
  9 | | 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) |
 10 | 
 11 | ## Demo
 12 | A live demo is available at https://code-switcher.padarom.xyz.
 13 | 
 14 | ![](preview.gif)
 15 | ## Installation
 16 | **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).**
 17 | 
 18 | ```
 19 | $ npm install vuepress-plugin-code-switcher@~2.0 --save
 20 | ```
 21 | 
 22 | After installing, add it to your Vuepress configuration's plugin list:
 23 | 
 24 | ```ts
 25 | import { codeSwitcherPlugin } from 'vuepress-plugin-code-switcher'
 26 | 
 27 | export default {
 28 |     // Your remaining configuration ...
 29 |     plugins: [ codeSwitcherPlugin(/* your config options go here */) ],
 30 | }
 31 | ```
 32 | 
 33 | ### Usage
 34 | ````markdown
 35 | <CodeSwitcher :languages="{js:'JavaScript',ts:'TypeScript'}">
 36 | <template v-slot:js>
 37 | 
 38 | ```js
 39 | module.exports = function (str) {
 40 |     return typeof str === 'string' && str.trim() === str
 41 | }
 42 | ```
 43 | 
 44 | </template>
 45 | <template v-slot:ts>
 46 | 
 47 | ```ts
 48 | export default function isString (str: string) : str is string {
 49 |     return typeof str === 'string' && str.trim() === str
 50 | }
 51 | ```
 52 | 
 53 | </template>
 54 | </CodeSwitcher>
 55 | ````
 56 | 
 57 | > The extra newline between the `<template>` tags and their content is necessary if you want to have Markdown interpreted within the component.
 58 | 
 59 | ### With options
 60 | If you have a lot of code switchers in your documentation you might not want to
 61 | specify your languages every single time. Therefore you can instantiate the
 62 | plugin with options and name the default languages for a given group:
 63 | 
 64 | ```js
 65 | import { codeSwitcherPlugin } from 'vuepress-plugin-code-switcher'
 66 | 
 67 | export default {
 68 |     // Your remaining configuration ...
 69 |     plugins: [
 70 |         codeSwitcherPlugins({
 71 |             groups: {
 72 |                 default: { ts: 'TypeScript', js: 'JavaScript' },
 73 |                 jvm: { java: 'Java', kotlin: 'Kotlin', jruby: 'JRuby' },
 74 |             },
 75 | 
 76 |             // You can also specify a custom name for the code switcher component.
 77 |             // If chaning the name like so, you then use the component as <CustomCodeSwitcher>
 78 |             // in your markdown code
 79 |             componentName: 'CustomCodeSwitcher',
 80 |         })
 81 |     ],
 82 | }
 83 | ```
 84 | 
 85 | You then want to give your `CodeSwitcher` components the `name` prop to match them
 86 | with the configured language group. If you omit the `name` prop, it uses the group
 87 | named `default`.
 88 | 
 89 | ````markdown
 90 | <!-- Uses the "default" languages defined above -->
 91 | <CodeSwitcher>
 92 | <template v-slot:js>
 93 |     <!-- ... (see above) -->
 94 | </template>
 95 | <template v-slot:ts>
 96 |     <!-- ... (see above) -->
 97 | </template>
 98 | </CodeSwitcher>
 99 | 
100 | <!-- Uses the "jvm" languages defined above -->
101 | <CodeSwitcher name="jvm">
102 | <template v-slot:java>
103 |     <!-- ... (see above) -->
104 | </template>
105 | <template v-slot:kotlin>
106 |     <!-- ... (see above) -->
107 | </template>
108 | <template v-slot:jruby>
109 |     <!-- ... (see above) -->
110 | </template>
111 | </CodeSwitcher>
112 | ````
113 | 
114 | #### Props
115 | | Prop | Description | Type | Default |
116 | | ----- | ----- | ---- | ---- |
117 | | 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 | --- |
118 | | 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'` |
119 | | isolated | if true, this block will not synchronize with any others or load/save its state to/from localstorage | Boolean | `false` |
120 | 


--------------------------------------------------------------------------------
/src/client/components/CodeSwitcher.ts:
--------------------------------------------------------------------------------
  1 | import { computed, defineComponent, onBeforeMount, ref, reactive, h, useSlots, PropType, withDirectives, vShow, toRaw } from 'vue'
  2 | import { DefaultGroups } from '../../shared/types'
  3 | import Emitter from '../emitter'
  4 | 
  5 | const slotNotFound = ({ shorthand }: { shorthand: string }): ReturnType<typeof h> => {
  6 |   return h(
  7 |     'div',
  8 |     null,
  9 |     `Did not find a slot with name ${shorthand}.`
 10 |   )
 11 | }
 12 | 
 13 | export const CodeSwitcher = defineComponent({
 14 |   name: 'CodeSwitcher',
 15 | 
 16 |   props: {
 17 |     name: {
 18 |       type: String,
 19 |       default: 'default',
 20 |     },
 21 |     isolated: {
 22 |       type: Boolean,
 23 |       default: false,
 24 |     },
 25 |     languages: {
 26 |       type: Object,
 27 |       required: false,
 28 |     },
 29 |     groups: {
 30 |       type: Object as PropType<DefaultGroups>,
 31 |       default: {},
 32 |     }
 33 |   },
 34 | 
 35 |   setup (props) {
 36 |     const $slots = useSlots()
 37 |     const languageMap = computed(() => {
 38 |       // No need to override the language list if we already have manually specified languages
 39 |       if (props.languages) return props.languages
 40 | 
 41 |       // Either use the global groups option to determine the language list from the "groups" prop, ...
 42 |       if (props.groups && props.groups[props.name]) {
 43 |         return props.groups[props.name]
 44 |       }
 45 | 
 46 |       // ... or simply use the provided slot names for the language list
 47 |       return Object.keys($slots).reduce((list, language) => {
 48 |         // Capitalize the language name
 49 |         list[language] = language.charAt(0).toUpperCase() + language.slice(1)
 50 |         return list
 51 |       }, {})
 52 |     })
 53 | 
 54 |     const languageKeys = computed(() => Object.keys(languageMap.value))
 55 |     const localStorageKey = computed(() => `vuepress-plugin-code-switcher@${props.name}`)
 56 | 
 57 |     if (!languageKeys.value.length) {
 58 |       throw new Error('You must specify either the "languages" prop or use the "groups" option when configuring the plugin.')
 59 |     }
 60 | 
 61 |     const selectedLanguage = ref(languageKeys.value[0])
 62 | 
 63 |     const switchLanguage = (language) => {
 64 |       if (props.isolated) {
 65 |         return selectedLanguage.value = language
 66 |       }
 67 | 
 68 |       if (typeof localStorage !== 'undefined') {
 69 |         localStorage.setItem(localStorageKey.value, language)
 70 |       }
 71 | 
 72 |       Emitter.$emit('change', { name: props.name, value: language })
 73 |     }
 74 |     
 75 |     onBeforeMount(() => {
 76 |       // Don't perform any setup for isolated components. This means we won't register
 77 |       // any event handlers and won't initialize the selected language from local storage
 78 |       if (props.isolated) return
 79 | 
 80 |       // Restore the selected language for this group from local storage
 81 |       if (typeof localStorage !== 'undefined') {
 82 |         let selected = localStorage.getItem(localStorageKey.value)
 83 |         if (selected && languageKeys.value.indexOf(selected) !== -1)
 84 |           selectedLanguage.value = selected
 85 |       }
 86 | 
 87 |       // When receiving the change event from another component, set the current language
 88 |       // for this component as well
 89 |       Emitter.$on('change', ({ name, value: language }) => {
 90 |         if (name === props.name) selectedLanguage.value = language
 91 |       })
 92 |     })
 93 | 
 94 |     return () => (
 95 |       h(
 96 |         'div',
 97 |         { class: 'code-switcher' },
 98 |         [
 99 |           h(
100 |             'div',
101 |             { class: 'tab-header' },
102 |             h(
103 |               'ul',
104 |               null,
105 |               languageKeys.value.map((shorthand) => (
106 |                 h(
107 |                   'li',
108 |                   {
109 |                     class: `tab-header ${selectedLanguage.value == shorthand ? 'active' : ''}`,
110 |                     key: shorthand,
111 |                     onClick() { switchLanguage(shorthand) },
112 |                   },
113 |                   languageMap.value[shorthand]
114 |                 )
115 |               ))
116 |             )
117 |           ),
118 |           
119 |           languageKeys.value.map((shorthand) => withDirectives(
120 |             h(
121 |               'div',
122 |               {
123 |                 class: 'tab-content',
124 |                 key: shorthand,
125 |                 style: { display: $slots[shorthand] ? 'block' : 'none' },
126 |               },
127 |               ($slots[shorthand] || slotNotFound)({ shorthand })
128 |             ),
129 |             [[vShow, shorthand == selectedLanguage.value]])
130 |           ),
131 |         ]
132 |       )
133 |     )
134 |   },
135 | })
136 | 


--------------------------------------------------------------------------------
/demo/src/index.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | sidebar: auto
  3 | sidebarDepth: 3
  4 | ---
  5 | 
  6 | # vuepress-plugin-code-switcher
  7 | 
  8 | This is the demo page for the `vuepress-plugin-code-switcher`. Please refer to
  9 | the Readme on its [GitHub
 10 | Repository](https://github.com/padarom/vuepress-plugin-code-switcher) for more
 11 | information regarding how to use it.
 12 | 
 13 | All examples shown are taken from [Rosetta Code](http://rosettacode.org/).
 14 | 
 15 | ## Synchronised switchers
 16 | 
 17 | These two switchers are synchronized by default, no additional settings needed
 18 | to be made.
 19 | 
 20 | ### Longest Common Substring
 21 | 
 22 | <CodeSwitcher name="synchronized">
 23 | <template v-slot:julia>
 24 | 
 25 | ```julia
 26 | function lcs(s1::AbstractString, s2::AbstractString)
 27 |     l, r = 1, 0
 28 |     sub_len = 0
 29 |     for i in 1:length(s1)
 30 |         for j in i:length(s1)
 31 |             if !contains(s2, SubString(s1, i, j)) break
 32 |             elseif sub_len < j - i
 33 |                 l, r = i, j
 34 |                 sub_len = j - i
 35 |             end
 36 |         end
 37 |     end 
 38 |     s1[l:r] 
 39 | end
 40 |  
 41 | @show lcs("thisisatest", "testing123testing")
 42 | ```
 43 | 
 44 | </template>
 45 | <template v-slot:kotlin>
 46 | 
 47 | ```kotlin
 48 | fun lcs(a: String, b: String): String {
 49 |     if (a.length > b.length) return lcs(b, a)
 50 |     var res = ""
 51 |     for (ai in 0 until a.length) {
 52 |         for (len in a.length - ai downTo 1) {
 53 |             for (bi in 0 until b.length - len) {
 54 |                 if (a.regionMatches(ai, b, bi,len) && len > res.length) {
 55 |                     res = a.substring(ai, ai + len)
 56 |                 }
 57 |             }
 58 |         }
 59 |     }
 60 |     return res
 61 | }
 62 |  
 63 | fun main(args: Array<String>) = println(lcs("testing123testing", "thisisatest"))
 64 | ```
 65 | 
 66 | </template>
 67 | <template v-slot:perl>
 68 | 
 69 | ```perl
 70 | #!/usr/bin/perl
 71 | use strict ;
 72 | use warnings ;
 73 |  
 74 | sub longestCommonSubstr {
 75 |    my $first = shift ;
 76 |    my $second = shift ;
 77 |    my %firstsubs = findSubstrings ( $first );
 78 |    my %secondsubs = findSubstrings ( $second ) ;
 79 |    my @commonsubs ;
 80 |    foreach my $subst ( keys %firstsubs ) {
 81 |       if ( exists $secondsubs{ $subst } ) {
 82 | 	 push ( @commonsubs , $subst ) ;
 83 |       }
 84 |    }
 85 |    my @sorted = sort { length $b <=> length $a } @commonsubs ;
 86 |    return $sorted[0] ;
 87 | }
 88 |  
 89 | sub findSubstrings {
 90 |    my $string = shift ;
 91 |    my %substrings ;
 92 |    my $l = length $string ;
 93 |    for ( my $start = 0 ; $start < $l ; $start++ ) {
 94 |       for ( my $howmany = 1 ; $howmany < $l - $start + 1 ; $howmany++) {
 95 | 	 $substrings{substr( $string , $start , $howmany) } = 1 ;
 96 |       }
 97 |    }
 98 |    return %substrings ;
 99 | }
100 |  
101 | my $longest = longestCommonSubstr( "thisisatest" ,"testing123testing" ) ;
102 | print "The longest common substring of <thisisatest> and <testing123testing> is $longest !\n" ; 
103 | ```
104 | 
105 | </template>
106 | </CodeSwitcher>
107 | 
108 | ### Palindrome Detection
109 | 
110 | <CodeSwitcher name="synchronized">
111 | <template v-slot:julia>
112 | 
113 | ```julia
114 | function palindrome(s)
115 |     len = length(s)
116 |     if(len==0 || len==1)
117 |         return true
118 |     end
119 |     if(s[1] == s[len])
120 |         return palindrome(SubString(s,2,len-1))
121 |     end
122 |     return false
123 | end
124 | ```
125 | 
126 | </template>
127 | <template v-slot:kotlin>
128 | 
129 | ```kotlin
130 | fun isExactPalindrome(s: String) = (s == s.reversed())
131 |  
132 | fun isInexactPalindrome(s: String): Boolean {
133 |     var t = ""
134 |     for (c in s) if (c.isLetterOrDigit()) t += c
135 |     t = t.toLowerCase()
136 |     return t == t.reversed()
137 | }
138 | ```
139 | 
140 | </template>
141 | <template v-slot:perl>
142 | 
143 | ```perl
144 | # Palindrome.pm
145 | package Palindrome;
146 |  
147 | use strict;
148 | use warnings;
149 |  
150 | use Exporter 'import';
151 | our @EXPORT = qw(palindrome palindrome_c palindrome_r palindrome_e);
152 |  
153 | sub palindrome
154 | {
155 |     my $s = (@_ ? shift : $_);
156 |     return $s eq reverse $s;
157 | }
158 |  
159 | sub palindrome_c
160 | {
161 |     my $s = (@_ ? shift : $_);
162 |     for my $i (0 .. length($s) >> 1)
163 |     {
164 |         return 0 unless substr($s, $i, 1) eq substr($s, -1 - $i, 1);
165 |     }
166 |     return 1;
167 | }
168 |  
169 | sub palindrome_r
170 | {
171 |     my $s = (@_ ? shift : $_);
172 |     if (length $s <= 1) { return 1; }
173 |     elsif (substr($s, 0, 1) ne substr($s, -1, 1)) { return 0; }
174 |     else { return palindrome_r(substr($s, 1, -1)); }
175 | }
176 | 
177 | sub palindrome_e
178 | {
179 |     (@_ ? shift : $_) =~ /^(.?|(.)(?1)\2)$/ + 0
180 | }
181 | ```
182 | 
183 | </template>
184 | </CodeSwitcher>
185 | 
186 | ## Isolated Switchers
187 | 
188 | The following two switchers are isolated. They do not listen to any
189 | of the other switchers being changed.
190 | 
191 | ### Letter Frequency
192 | 
193 | <CodeSwitcher :languages="{kotlin:'Kotlin',ruby:'Ruby'}" isolated>
194 | <template v-slot:kotlin>
195 | 
196 | ```kotlin
197 | import java.io.File
198 |  
199 | fun main(args: Array<String>) {
200 |     val text = File("input.txt").readText().toLowerCase()
201 |     val letterMap = text.filter { it in 'a'..'z' }.groupBy { it }.toSortedMap()
202 |     for (letter in letterMap) println("${letter.key} = ${letter.value.size}")
203 |     val sum = letterMap.values.sumBy { it.size }
204 |     println("\nTotal letters = $sum")
205 | }
206 | ```
207 | 
208 | </template>
209 | <template v-slot:ruby>
210 | 
211 | ```ruby
212 | def letter_frequency(file)
213 |   letters = 'a' .. 'z'
214 |   File.read(file) .
215 |        split(//) .
216 |        group_by {|letter| letter.downcase} .
217 |        select   {|key, val| letters.include? key} .
218 |        collect  {|key, val| [key, val.length]} 
219 | end
220 |  
221 | letter_frequency(ARGV[0]).sort_by {|key, val| -val}.each {|pair| p pair}
222 | ```
223 | 
224 | </template>
225 | </CodeSwitcher>
226 | 
227 | ### Rot-13
228 | 
229 | <CodeSwitcher :languages="{kotlin:'Kotlin',ruby:'Ruby'}" isolated>
230 | <template v-slot:kotlin>
231 | 
232 | ```kotlin
233 | import java.io.*
234 |  
235 | fun String.rot13() = map {
236 |     when {
237 |         it.isUpperCase() -> { val x = it + 13; if (x > 'Z') x - 26 else x }
238 |         it.isLowerCase() -> { val x = it + 13; if (x > 'z') x - 26 else x }
239 |         else -> it
240 |     } }.toCharArray()
241 |  
242 | fun InputStreamReader.println() =
243 |         try { BufferedReader(this).forEachLine { println(it.rot13()) } }
244 |         catch (e: IOException) { e.printStackTrace() }
245 |  
246 | fun main(args: Array<String>) {
247 |     if (args.any())
248 |         args.forEach { FileReader(it).println() }
249 |     else
250 |         InputStreamReader(System.`in`).println()
251 | }
252 | ```
253 | 
254 | </template>
255 | <template v-slot:ruby>
256 | 
257 | ```ruby
258 | # Returns a copy of _s_ with rot13 encoding.
259 | def rot13(s)
260 |   s.tr('A-Za-z', 'N-ZA-Mn-za-m')
261 | end
262 |  
263 | # Perform rot13 on files from command line, or standard input.
264 | while line = ARGF.gets
265 |   print rot13(line)
266 | end
267 | ```
268 | 
269 | </template>
270 | </CodeSwitcher>
271 | 
272 | ## Multiple Switcher Groups
273 | The following switchers are in different groups. Even though they show the same
274 | languages, they might not be thematically related, so only some code blocks
275 | switch, while the others stay the same.
276 | 
277 | ### Group 1: FizzBuzz
278 | 
279 | <CodeSwitcher name="group-1">
280 | <template v-slot:nim>
281 | 
282 | ```nim
283 | for i in 1..100:
284 |   if i mod 15 == 0:
285 |     echo("FizzBuzz")
286 |   elif i mod 3 == 0:
287 |     echo("Fizz")
288 |   elif i mod 5 == 0:
289 |     echo("Buzz")
290 |   else:
291 |     echo(i)
292 | ```
293 | 
294 | </template>
295 | <template v-slot:ocaml>
296 | 
297 | ```ocaml
298 | let fizzbuzz i =
299 |   match i mod 3, i mod 5 with
300 |     0, 0 -> "FizzBuzz"
301 |   | 0, _ -> "Fizz"
302 |   | _, 0 -> "Buzz"
303 |   | _    -> string_of_int i
304 |  
305 | let _ =
306 |   for i = 1 to 100 do print_endline (fizzbuzz i) done
307 | ```
308 | 
309 | </template>
310 | </CodeSwitcher>
311 | 
312 | ### Group 1: Hello world
313 | 
314 | <CodeSwitcher name="group-1">
315 | <template v-slot:nim>
316 | 
317 | ```nim
318 | echo("Hello world!")
319 | ```
320 | 
321 | </template>
322 | <template v-slot:ocaml>
323 | 
324 | ```ocaml
325 | print_endline "Hello world!"
326 | ```
327 | 
328 | </template>
329 | </CodeSwitcher>
330 | 
331 | ### Group 2: String case
332 | 
333 | <CodeSwitcher name="group-2">
334 | <template v-slot:nim>
335 | 
336 | ```nim
337 | import strutils
338 |  
339 | var s: string = "alphaBETA_123"
340 | echo s," as upper case: ", toUpper(s)
341 | echo s," as lower case: ", toLower(s)
342 | echo s," as Capitalized: ", capitalize(s)
343 | echo s," as normal case: ", normalize(s)  # remove underscores, toLower
344 | ```
345 | 
346 | </template>
347 | <template v-slot:ocaml>
348 | 
349 | ```ocaml
350 | let () =
351 |   let str = "alphaBETA" in
352 |   print_endline (String.uppercase_ascii str); (* ALPHABETA *)
353 |   print_endline (String.lowercase_ascii str); (* alphabeta *)
354 |  
355 |   print_endline (String.capitalize_ascii str); (* AlphaBETA *)
356 | ;;
357 | ```
358 | 
359 | </template>
360 | </CodeSwitcher>
361 | 
362 | ### Group 2: Strip whitespace
363 | 
364 | <CodeSwitcher name="group-2">
365 | <template v-slot:nim>
366 | 
367 | ```nim
368 | import strutils
369 |  
370 | let s = " \t \n String with spaces  \t  \n  "
371 | echo "'", s, "'"
372 | echo "'", s.strip(trailing = false), "'"
373 | echo "'", s.strip(leading = false), "'"
374 | echo "'", s.strip(), "'"
375 | ```
376 | 
377 | </template>
378 | <template v-slot:ocaml>
379 | 
380 | ```ocaml
381 | let left_pos s len =
382 |   let rec aux i =
383 |     if i >= len then None
384 |     else match s.[i] with
385 |     | ' ' | '\n' | '\t' | '\r' -> aux (succ i)
386 |     | _ -> Some i
387 |   in
388 |   aux 0
389 |  
390 | let right_pos s len =
391 |   let rec aux i =
392 |     if i < 0 then None
393 |     else match s.[i] with
394 |     | ' ' | '\n' | '\t' | '\r' -> aux (pred i)
395 |     | _ -> Some i
396 |   in
397 |   aux (pred len)
398 |  
399 | let trim s =
400 |   let len = String.length s in
401 |   match left_pos s len, right_pos s len with
402 |   | Some i, Some j -> String.sub s i (j - i + 1)
403 |   | None, None -> ""
404 |   | _ -> assert false
405 |  
406 | let ltrim s =
407 |   let len = String.length s in
408 |   match left_pos s len with
409 |   | Some i -> String.sub s i (len - i)
410 |   | None -> ""
411 |  
412 | let rtrim s =
413 |   let len = String.length s in
414 |   match right_pos s len with
415 |   | Some i -> String.sub s 0 (i + 1)
416 |   | None -> ""
417 | ```
418 | 
419 | </template>
420 | </CodeSwitcher>
421 | 


--------------------------------------------------------------------------------