I have many slides for a presentation made with RemarkJS. It is a HTML file slides_fr.html with a single <textarea id="source"> containing the actual content in Markdown syntax (+ one or two specific markup tags to separate the slides with a page break), and one call to the JS library RemarkJS.
I am translating this document into English (I first duplicated slides_fr.html into slides_en.html and started to translate). Problem: each time I do improvement on the slides in the English version, I'll have to remodify the original file slides_fr.html to keep them in sync. In my experience, this rarely works well on the long-term. It would be better to have both versions in the same file, with markup for language.
Question: in order to avoid having two files slides_fr.html and slides_en.html like this that will ultimately never stay in sync:
<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>
which options are there, using HTML or Javascript or Markdown-specific syntax to have both languages in the same file like this:
<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>
As a way to better organize localized texts, you could use CSS classes to mark which language applies to each text.
Remark provides a markdown extension called "Content classes" (https://remarkjs.com/#12), it's used to apply CSS classes to texts.
I think this feature could be exploited to wrap localized texts inside the markdown source, in this fashion:
.lang_en[Second slide].lang_fr[Seconde diapositive].lang_it[Seconda diapositiva]These will be transcripted in HTML as:
<span class="lang_en">Second slide</span><span class="lang_fr">Seconde diapositive</span><span class="lang_it">Seconda diapositiva</span>Once texts are structured this way, you can easily show / hide them via javascript and CSS.
This fiddle shows the Remark boilerplate localized in english and italian, adapted using the above strategy (javascript language switcher not provided in the snippet): https://jsfiddle.net/k7au5oe3/