HTML + Markdown 文檔的國際化（使用 RemarkJS）

Question

我有許多幻燈片用於使用RemarkJS制作的演示文稿。 它是一個 HTML 文件slides_fr.html ，其中包含一個<textarea id="source">包含 Markdown 語法中的實際內容（+一個或兩個特定的標記標簽，以用分頁符分隔幻燈片），以及對 JS 的一次調用庫 RemarkJS。

我正在將此文檔翻譯成英文（我首先將slides_fr.html復制到slides_en.html並開始翻譯）。 問題：每次我對英文版的幻燈片進行改進時，我都必須重新修改原始文件slides_fr.html以使其保持同步。 根據我的經驗，這很少能長期有效。 最好將兩個版本放在同一個文件中，並帶有語言標記。

問題：為了避免有兩個像這樣的文件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>

Answer 1

作為一種更好地組織本地化文本的方法，您可以使用 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/

HTML + Markdown 文檔的國際化（使用 RemarkJS）

問題描述

1 個解決方案

解決方案1
1 2022-06-02 17:06:06

HTML + Markdown 文檔的國際化（使用 RemarkJS）

問題描述

1 個解決方案

解決方案1 1 2022-06-02 17:06:06

解決方案1
1 2022-06-02 17:06:06