代码之家 › 专栏 › 技术社区 › Basj

HTML+Markdown文档的国际化(使用RemarkJS)

remarkjs markdown internationalization html javascript

1

Basj · 技术社区 · 3 年前

我有很多演示幻灯片 RemarkJS 。它是一个HTML文件 slides_fr.html 用一个 <textarea id="source"> 包含Markdown语法中的实际内容(+一个或两个特定的标记标记,用分页符分隔幻灯片),以及一个对JS库RemarkJS的调用。

我正在把这份文件翻译成英文(我第一次复印 slides_fr.html 进入 slides_en.html 并开始翻译)。问题:每次我对英文版的幻灯片进行改进时,我都必须重新修改原始文件 slides_fr.html 以使它们保持同步。根据我的经验,这很少能长期有效。最好将两个版本放在同一个文件中,并为语言添加标记。

问题:为了避免有两个文件 slides_fr.html 和 幻灯片_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>

0 回复 | 直到 3 年前

1

GrafiCode 3 年前

为了更好地组织本地化文本,您可以使用CSS类来标记哪种语言适用于每个文本。

Remark提供了一个名为“内容类”的降价扩展( https://remarkjs.com/#12 ),它用于将CSS类应用于文本。

我认为可以利用此功能将本地化文本包装在降价源中,方式如下:

.lang_en[Second slide]
.lang_fr[Seconde diapositive]
.lang_it[Seconda diapositiva]

这些将在HTML中转录为:

Second slide
Seconde diapositive
Seconda diapositiva

一旦文本以这种方式结构化,您就可以通过javascript和CSS轻松地显示/隐藏它们。

这个小提琴展示了英语和意大利语本地化的Remark样板,使用上述策略进行了改编(代码片段中没有提供javascript语言切换器): https://jsfiddle.net/k7au5oe3/