ユーザが選択した環境に基づいた選択的なejsテンプレート

Question

私はテクニカルドキュメントプロジェクトをスタイルするejsでhexoブログテーマを構築しています。ユーザーが言語（JavaScriptまたはTypeScript）を選択できるようにしたい。ユーザーが（JSをデフォルトとなります）typescriptですかJavaScriptを選ぶことができるように

{% js %} 
```JavaScript 
var geolocation = require("nativescript-geolocation"); 
``` 
{% endjs %} 

{% ts %} 
```TypeScript 
import geolocation = require("nativescript-geolocation"); 
``` 
{% endts %} 

次に、2つのボタン/スライダ：私は、コードのようなものをスニペットに入力したいと思います。私はUIの実装には満足していますが、どのスニペットを使用するかを決定するためにプロパティを設定する方法がわかりません。

ユーザーが選択した言語に応じて、正しいスニペットが表示されます。私はこれをどのように実装できますか？

Answer 1

あなたのHexoタグの出力がこのようなものであるとします。

<div> 
    <div class="codeblock js"> 
    var geolocation = require("nativescript-geolocation"); 
    </div> 
    <div class="codeblock ts"> 
    import geolocation = require("nativescript-geolocation"); 
    </div> 
</div> 

さて、あなたはへジャバスクリプト記述する必要が：デフォルトで

• 表示コード・ブロック（デフォルト言語）ボタンをクリックすると、目的の言語で
• 表示コードブロックを
• 保存ページがリフレッシュまたは変更されたときに適切な言語を表示するために選択した言語

ここで私はセッションストレージは、この例ではSO

にスニペットでは許可されていないためJSFiddleでjQueryライブラリと例だ、私は.hide()と.show()方法を使用しますが、あなたはまた、これを行うにはCSSクラスを使用することができます。希望する言語のコードブロックにクラス（.addClass()）を追加し、いくつかのCSSを使用した他のコードブロック上のクラス（.removeClass()）を削除します。

.codeblock { 
    display:none; 
} 
.codeblock.active { 
    display:block; 
}