我有很多用RemarkJS做的演示幻灯片。它是一个HTML文件slides_fr.html，其中单个<textarea id="source">包含Markdown语法中的实际内容(+一个或两个特定的标记标签，以分页符分隔幻灯片)，以及对JS库的一次调用。
我正在把这个文档翻译成英文(我先把slides_fr.html复制成slides_en.html，然后开始翻译)。问题:每次我对英文版的幻灯片做改进时，我都必须修改原始文件slides_fr.html以保持同步。根据我的经验，这种方法很少能长期有效。最好将两个版本放在同一个文件中，并为language添加标记。
问题:为了避免slides_fr.html和slides_en.html这两个文件最终永远不会保持同步:
<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>
有哪些选项，使用HTML或Javascript或markdown特定语法将两种语言放在同一个文件中，如下所示:
<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>
作为一种更好地组织本地化文本的方法，您可以使用CSS类来标记每个文本应用的语言。
Remark提供了一个名为"Content classes"(https://remarkjs.com/#12)，它用于将CSS类应用于文本。
我认为这个特性可以用来在markdown源中包装本地化的文本，以这种方式:
.lang_en[Second slide].lang_fr[Seconde diapositive].lang_it[Seconda diapositiva]
这些将在HTML中转录为:
<span class="lang_en">Second slide</span><span class="lang_fr">Seconde diapositive</span><span class="lang_it">Seconda diapositiva</span>
一旦文本以这种方式结构化，您可以轻松地通过javascript和CSS显示/隐藏它们。
下面显示了翻译成英语和意大利语的Remark样板文件，使用了上述策略(代码片段中没有提供javascript语言切换器):https://jsfiddle.net/k7au5oe3/