Шаблон выборочного ejs на основе выбранной пользователем среды

Question

Я создаю тему блога hexo в ejs, которая создаст мой проект технических документов. Я хочу разрешить пользователю выбирать язык (JavaScript или TypeScript). Я бы тогда хотел ввести фрагменты кода что-то вроде:

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

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

Затем две кнопки/ползунок, чтобы пользователь мог выбрать машинописный или JavaScript (который будет по умолчанию для JS). Мне нравится реализация 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> 

Теперь, вы должны написать JavaScript для:

• Отображение кодовых блоков по умолчанию (язык по умолчанию)
• Отображение кодовых блоков на нужном языке, когда кнопка нажата
• Сохранить выбранный язык для отображения правильного языка при обновлении или изменении страницы

Здесь i приведен пример с библиотекой JQuery в JSFiddle из-за хранения сессии не допускается во фрагменте кода на SO

В этом примере я использовал .hide() и .show() метод, но вы также можете использовать класс CSS, чтобы сделать это. Добавить класс (.addClass()) на требуемых блоках кода языка, и удалить класс (.removeClass()) на другие блоки кода с некоторыми CSS:

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