Tengo muchas diapositivas para una presentación hecha con RemarkJS . Es un archivo HTML slides_fr.html con un solo <textarea id="source"> que contiene el contenido real en la sintaxis de Markdown (+ una o dos etiquetas de marcado específicas para separar las diapositivas con un salto de página), y una llamada al JS biblioteca RemarkJS.
Estoy traduciendo este documento al inglés (primero slides_fr.html en slides_en.html y comencé a traducir). Problema: cada vez que mejore las diapositivas en la versión en inglés, tendré que volver a modificar el archivo original slides_fr.html para mantenerlas sincronizadas. En mi experiencia, esto rara vez funciona bien a largo plazo. Sería mejor tener ambas versiones en el mismo archivo, con marcado para el idioma.
Pregunta: para evitar tener dos archivos slides_fr.html y slides_en.html como este que finalmente nunca estarán sincronizados:
<html> <head></head> <body> <textarea id="source"> First slide My presentation about XYZ --- Second slide Hello world </textarea> <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script><script>remark.create();</script> </html>qué opciones hay, usando HTML o Javascript o sintaxis específica de Markdown para tener ambos idiomas en el mismo archivo como este:
<textarea id="source"> First slide ||| Première diapositive My presentation about XYZ ||| Ma présentation à propos de XYZ --- Second slide ||| Seconde diapositive Hello ! ||| Bonjour </textarea> <javascript> chooseLanguage(document.getElementBydId('source'), 'en'); // there is surely a better solution // than a parsing and splitting by '|||' ? </javascript>Como una forma de organizar mejor los textos localizados, puede usar clases de CSS para marcar qué idioma se aplica a cada texto.
Remark proporciona una extensión de descuento llamada "Clases de contenido" ( https://remarkjs.com/#12 ), se usa para aplicar clases de CSS a los textos.
Creo que esta función podría aprovecharse para envolver textos localizados dentro de la fuente de rebajas, de esta manera:
.lang_en[Second slide].lang_fr[Seconde diapositive].lang_it[Seconda diapositiva]Estos se transcribirán en HTML como:
<span class="lang_en">Second slide</span><span class="lang_fr">Seconde diapositive</span><span class="lang_it">Seconda diapositiva</span>Una vez que los textos están estructurados de esta manera, puede mostrarlos u ocultarlos fácilmente a través de javascript y CSS.
Este violín muestra el texto modelo de Remark localizado en inglés e italiano, adaptado usando la estrategia anterior (el selector de idioma de JavaScript no se proporciona en el fragmento): https://jsfiddle.net/k7au5oe3/