HTML的国际化＆＃x2B;降价文档（使用备注）
我有许多幻灯片用于用 remendjs 。它是一个html文件slide_fr.html，带有一个＆lt; textarea ID =“ source”＆gt;包含Markdown语法中的实际内容（+一个或两个特定的标记标签通过页面断开幻灯片），并呼叫JS Library备注。
我将此文档翻译成英语（我首先复制slide_fr.html slides_en.html并开始翻译）。问题：每次我对英文版本中的幻灯片进行改进时，我都必须重新修改原始文件slide_fr.html以使它们保持同步。根据我的经验，这很少在长期上运作良好。最好在同一文件中使用两个版本，并使用语言标记。
问题：为了避免拥有两个文件slide_fr.html和slide_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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了更好地组织本地化文本，您可以使用CSS类来标记哪种语言适用于每个文本。
备注提供了称为“内容类”的降价扩展名（ https：//remarkjs.com/#12 ），它用于将CSS类应用于文本。
我认为可以利用此功能以这种方式利用此功能在Markdown源内包装本地化文本：
.lang_en [second Slide].lang_fr [seconde diapostive]。 lang_it [seconda diapositiva]这些将在html中转录为：
＆lt; span class =“ lang_en”＆gt; second slide＆lt;/span＆gt;＆lt; span class = “＆gt; seconde diapastive＆lt;/span＆gt;＆lt; span class =“ lang_it”＆gt; seconda diapositiva＆lt;/span＆gt;一旦文本结构，您就可以轻松地显示/隐藏/隐藏/隐藏/隐藏/隐藏/隐藏/隐藏它们通过JavaScript和CSS。
该小提琴显示了使用上述策略改编的备注样板（在摘要中未提供JavaScript语言切换器）： https://jsfiddle.net/k7au5oe3/
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/