Merge pull request #9355 from weseek/imprv/sandbox

imprv: Tidy up /Sandbox

apps/app/resource/locales/en_US/sandbox-markdown.md

@@ -0,0 +1,227 @@
+# Alerts
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+
+```markdown
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
+
+# Quote text
+- Use quoted expressions by putting `>` at the beginning of the paragraph
+    - Multiple quotations can be expressed by using a sequence of `>` characters
+- Lists and other elements can be used together within the blockquotes
+
+#### Example
+> - Quotation
+> - Quotation
+>> Multiple quotations need to insert more `>`
+
+```markdown
+> - Quotation
+> - Quotation
+>> Multiple quotations need to insert more `>`
+```
+
+
+# Code
+- It is possible to express the code by adding it in three `` ` ``
+
+#### Example
+
+```markdown
+Add codes here  
+
+Line breaks and paragraphs can be reflected in the code as-is
+```
+
+#### Example (source code)
+
+```javascript:mersenne-twister.js
+function MersenneTwister(seed) {
+  if (arguments.length == 0) {
+    seed = new Date().getTime();
+  }
+
+  this._mt = new Array(624);
+  this.setSeed(seed);
+}
+```
+
+## Inline Code
+- Enclose words in `` ` `` to make inline code
+
+#### Example
+Here is the `inline code` 
+
+
+
+# Task List
+- Insert an unchecked checkbox list by writing `[] `
+    - Check the checkbox by writing `[x]`
+
+#### Example
+- [ ] Task 1
+    - [x] Task 1-1
+    - [ ] Task 1-2
+- [x] Task 2
+
+
+# Horizontal lines
+- Insert the horizontal line with three or more consecutive asterisks `*` or underscores `_`
+
+#### Example
+Below is a horizontal line
+***
+
+Below is a horizontal line
+___
+
+```markdown
+Below is a horizontal line
+***
+
+Below is a horizontal line
+___
+```
+
+
+# Footnotes
+
+You can add footnotes to your content by using this bracket syntax:
+
+Here is a simple footnote[^1].
+
+A footnote can also have multiple lines[^2].
+
+[^1]: My reference.
+[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
+  This is a second line.
+
+```markdown
+Here is a simple footnote[^1].
+
+A footnote can also have multiple lines[^2].
+
+[^1]: My reference.
+[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
+  This is a second line.
+```
+
+
+# emoji
+
+You can add emojis to your text by typing the emoji name after a colon `:`.
+
+- :+1: GOOD!
+- :white_check_mark: Check
+- :lock: Lock
+
+When you type two or more characters after the colon, an emoji suggestion list will appear. This list will narrow down as you continue typing. Once you find the emoji you are looking for, press Tab or Enter to insert the highlighted emoji.
+
+For a list of available emojis, refer to the "[Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md)".
+
+
+# Table
+### General syntax
+#### Example
+
+| Left align | Right align | Center align |
+|:-----------|------------:|:------------:|
+| This       | This        | This         |
+| column     | column      | column       |
+| will       | will        | will         |
+| be         | be          | be           |
+| left       | right       | center       |
+| aligned    | aligned     | aligned      |
+
+```markdown
+| Left align | Right align | Center align |
+|:-----------|------------:|:------------:|
+| This       | This        | This         |
+| column     | column      | column       |
+| will       | will        | will         |
+| be         | be          | be           |
+| left       | right       | center       |
+| aligned    | aligned     | aligned      |
+```
+
+### CSV / TSV
+
+#### Example
+
+``` tsv
+Content Cell	Content Cell
+Content Cell	Content Cell
+```
+
+~~~
+``` csv
+Content Cell,Content Cell
+Content Cell,Content Cell
+```
+~~~
+
+~~~
+``` tsv
+Content Cell	Content Cell
+Content Cell	Content Cell
+```
+~~~
+
+
+### CSV / TSV (with header)
+
+
+#### Example
+
+``` tsv-h
+First Header	Second Header
+Content Cell	Content Cell
+Content Cell	Content Cell
+```
+
+~~~
+``` csv-h
+First Header,Second Header
+Content Cell,Content Cell
+Content Cell,Content Cell
+```
+~~~
+
+~~~
+``` tsv-h
+First Header	Second Header
+Content Cell	Content Cell
+Content Cell	Content Cell
+```
+~~~
+
+

apps/app/resource/locales/en_US/sandbox.md

@@ -1,6 +1,39 @@
-# What is Sandbox?
-- On this page, you will find tips that help you to master GROWI 
-- Feel free to enrich the content of your pages with the references under this page hierarchy
+# Welcome to the GROWI Sandbox!
+
+> [!NOTE]
+> **What is a Sandbox?**
+> 
+> This is a practice page that you can freely edit. It's the perfect place to try new things!
+
+
+## :beginner: For Beginners
+
+With GROWI, you can easily create visually appealing pages using a notation called "Markdown".  
+By using Markdown, you can do things like this!
+
+- Emphasize text with **bold** or *italic*
+- Create bulleted or numbered lists
+- [Insert links](#-link)
+- Create tables
+- Add code blocks
+
+Various other decorations are also possible.
+
+## Let's Try It!
+
+1. Feel free to edit this page
+1. There's no need to fear making mistakes
+1. You can always revert changes
+1. You can also learn from others' edits
+
+> [!IMPORTANT]
+> **For Administrators**
+> 
+> The sandbox is an important place for learning:
+> - As a first step for new members to get used to GROWI
+> - As a practice ground for Markdown
+> - As a communication tool within the team
+>     - Even if this page becomes cluttered, it is a sign of active learning. Regular cleanups are good, but it is recommended to maintain its nature as a free experimentation space.
 
 
 # :closed_book: Headings & Paragraphs
@@ -45,66 +78,24 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-## Horizontal lines
-- Insert the horizontal line with three or more consecutive asterisks `*` or underscores `_`
-
-#### Example
-Below is a horizontal line
-***
 
-Below is a horizontal line
-___
+# :blue_book: Styling Text
 
-```markdown
-Below is a horizontal line
-***
-
-Below is a horizontal line
-___
-```
-
-
-# :green_book: Styling Text
 - Various styles can be applied to enrich the textual expression of a sentence
-    - These styles also can be easily applied by selecting the toolbar icon at the bottom of the Edit screen
-
-## Italic
-- Enclose the text with an asterisk `*` or an underscore `_`.
-
-#### Examples
-- This sentence indicates emphasis with *Italic*
-- This sentence indicates emphasis with _Italic_ 
-
-```markdown
-- This sentence indicates emphasis with *Italic*
-- This sentence indicates emphasis with _Italic_ 
-```
+    - These styles can also be easily applied by selecting the toolbar icon at the bottom of the Edit screen
 
-## Bold
-- Enclose the text with two asterisks `*` or two underscores `_`
+| Style                     | Syntax                 | Keyboard Shortcut | Example                                   | Output                                 |
+| ------------------------- | ---------------------- | ----------------- | ----------------------------------------- | -------------------------------------- |
+| Bold                      | `** **` or `__ __`     | (TBD)             | `**This is bold text**`                   | **This is bold text**                  |
+| Italic                    | `* *` or `_ _`         | (TBD)             | `_This text is italicized_`               | *This text is italicized*              |
+| Strikethrough             | `~~ ~~`                | (TBD)             | `~~This was mistaken text~~`             | ~~This was  mistaken text~~            |
+| Bold and nested italic | `** **` and `_ _`     | None              | `**This text is _extremely_ important**`  | **This text is _extremely_ important** |
+| All Bold and Italic   | `*** ***`              | None              | `***All this text is important***`       | ***All this text is important***      |
+| Subscript                 | `<sub> </sub>`         | None              | `This is a <sub>subscript</sub> text`       | This is a <sub>subscript</sub> text      |
+| Superscript               | `<sup> </sup>`         | None              | `This is a <sup>superscript</sup> text`     | This is a <sup>superscript</sup> text    |
 
-#### Example
-- This sentence indicates emphasis with **Bold** 
-- This sentence indicates emphasis with __Bold__
-
-```markdown
-- This sentence indicates emphasis with **Bold** 
-- This sentence indicates emphasis with __Bold__
-```
-
-## Italic & Bold
-- Enclose the text with three asterisks `*` or three underscores `_`
 
-#### Example
-- This sentence indicates emphasis with ***Italic & Bold***
-- This sentence indicates emphasis witH ___Italic & Bold___
-
-```markdown
-- This sentence indicates emphasis with ***Italic & Bold***
-- This sentence indicates emphasis witH ___Italic & Bold___
-```
-
-# :orange_book: Insert Lists
+# :green_book: Insert Lists
 ## Bulleted List
 - Insert a bulleted list by starting a line with a hyphen `-`, a plus `+`, or an asterisk `*`
 
@@ -131,18 +122,8 @@ ___
 1. This sentence is present in the bulleted list
     - This sentence is present in the bulleted list
 
-## Task List
-- Insert an unchecked checkbox list by writing `[] `
-    - Check the checkbox by writing `[x]`
 
-#### Example
-- [ ] Task 1
-    - [x] Task 1-1
-    - [ ] Task 1-2
-- [x] Task 2
-
-
-# :blue_book: Link
+# :ledger: Link
 
 ## Auto link
 Just write the URL and the link will be generated automatically.
@@ -181,140 +162,16 @@ Flexible link syntax make it easy to write a link by page path, a relative page
 - [[How to write formulas?>./Math]]
 ```
 
-# :notebook: Others
-## Blockquotes
-- Use quoted expressions by putting `>` at the beginning of the paragraph
-    - Multiple quotations can be expressed by using a sequence of `>` characters
-- Lists and other elements can be used together within the blockquotes
-
-#### Example
-> - Quotation
-> - Quotation
->> Multiple quotations need to insert more `>`
-
-```markdown
-> - Quotation
-> - Quotation
->> Multiple quotations need to insert more `>`
-```
-
-## Code
-- It is possible to express the code by adding it in three `` ` ``
-
-#### Example
-
-```markdown
-Add codes here  
-
-Line breaks and paragraphs can be reflected in the code as-is
-```
-
-#### Example (source code)
-
-```javascript:mersenne-twister.js
-function MersenneTwister(seed) {
-  if (arguments.length == 0) {
-    seed = new Date().getTime();
-  }
-
-  this._mt = new Array(624);
-  this.setSeed(seed);
-}
-```
-
-## Inline Code
-- Enclose words in `` ` `` to make inline code
-
-#### Example
-Here is the `inline code` 
-
-
-## Table
-
-### General syntax
-
-#### Example
-
-| Left align | Right align | Center align |
-|:-----------|------------:|:------------:|
-| This       | This        | This         |
-| column     | column      | column       |
-| will       | will        | will         |
-| be         | be          | be           |
-| left       | right       | center       |
-| aligned    | aligned     | aligned      |
-
-```markdown
-| Left align | Right align | Center align |
-|:-----------|------------:|:------------:|
-| This       | This        | This         |
-| column     | column      | column       |
-| will       | will        | will         |
-| be         | be          | be           |
-| left       | right       | center       |
-| aligned    | aligned     | aligned      |
-```
-
-### CSV / TSV
-
-#### Example
-
-``` tsv
-Content Cell	Content Cell
-Content Cell	Content Cell
-```
-
-~~~
-``` csv
-Content Cell,Content Cell
-Content Cell,Content Cell
-```
-~~~
-
-~~~
-``` tsv
-Content Cell	Content Cell
-Content Cell	Content Cell
-```
-~~~
-
-
-### CSV / TSV (with header)
-
-
-#### Example
-
-``` tsv-h
-First Header	Second Header
-Content Cell	Content Cell
-Content Cell	Content Cell
-```
-
-~~~
-``` csv-h
-First Header,Second Header
-Content Cell,Content Cell
-Content Cell,Content Cell
-```
-~~~
-
-~~~
-``` tsv-h
-First Header	Second Header
-Content Cell	Content Cell
-Content Cell	Content Cell
-```
-~~~
-
 
-# :ledger: More Applications
-- [Bootstrap](/Sandbox/Bootstrap)
+# :notebook: More Applications
 
-- [Diagrams](/Sandbox/Diagrams)
+- [Learn more about Markdown](/Sandbox/Markdown)
 
-- [Math](/Sandbox/Math)
+- [Further decorate your page (Bootstrap5)](/Sandbox/Bootstrap5)
 
+- [How to represent diagrams (Diagrams)](/Sandbox/Diagrams)
 
+- [How to represent mathematical formulas (Math)](/Sandbox/Math)
 
 
 

apps/app/resource/locales/fr_FR/sandbox-markdown.md

@@ -0,0 +1,226 @@
+# Alerts
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+
+```markdown
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
+
+# Autres
+## Citations
+- Utilisez des expressions entre guillemets en mettant `>` au début du paragraphe
+    - Plusieurs citations peuvent être exprimées en utilisant une séquence de caractères `>`
+- Des listes et d'autres éléments peuvent être utilisés ensemble dans les citations
+
+#### Exemple
+> - Citation
+> - Citation
+>> Plusieurs citations doivent insérer plus de `>`
+
+```markdown
+> - Citation
+> - Citation
+>> Plusieurs citations doivent insérer plus de `>`
+```
+
+# Code
+- Il est possible d'exprimer le code en l'ajoutant en trois `` ` ``
+
+#### Exemple
+
+```markdown
+Ajoutez des codes ici
+
+Les sauts de ligne et les paragraphes peuvent être reflétés dans le code tel quel
+```
+
+#### Exemple (code source)
+
+```javascript:mersenne-twister.js
+function MersenneTwister(seed) {
+  if (arguments.length == 0) {
+    seed = new Date().getTime();
+  }
+
+  this._mt = new Array(624);
+  this.setSeed(seed);
+}
+```
+
+## Code en ligne
+- Entourez les mots de `` ` `` pour créer du code en ligne
+
+#### Exemple
+Voici le `code en ligne`
+
+
+
+# Liste des tâches
+- Insérer une liste de cases à cocher non cochées en écrivant `[]`
+    - Cocher la case à cocher en écrivant `[x]`
+
+#### Exemple
+- [ ] Tâche 1
+    - [x] Tâche 1-1
+    - [ ] Tâche 1-2
+- [x] Tâche 2
+
+
+# Lignes horizontales
+- Insérer la ligne horizontale avec trois astérisques consécutifs ou plus `*` ou des traits de soulignement `_`
+
+#### Exemple
+Ci-dessous se trouve une ligne horizontale
+***
+
+Ci-dessous se trouve une ligne horizontale
+___
+
+```markdown
+Ci-dessous se trouve une ligne horizontale
+***
+
+Ci-dessous se trouve une ligne horizontale
+___
+```
+
+
+# Footnotes
+
+You can add footnotes to your content by using this bracket syntax:
+
+Here is a simple footnote[^1].
+
+A footnote can also have multiple lines[^2].
+
+[^1]: My reference.
+[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
+  This is a second line.
+
+```markdown
+Here is a simple footnote[^1].
+
+A footnote can also have multiple lines[^2].
+
+[^1]: My reference.
+[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
+  This is a second line.
+```
+
+
+# emoji
+
+Vous pouvez ajouter des emojis à votre texte en tapant le nom de l'emoji après un deux-points `:`.
+
+- :+1: BON!
+- :white_check_mark: Vérifié
+- :lock: Verrouillé
+
+Lorsque vous tapez deux caractères ou plus après le deux-points, une liste de suggestions d'emojis apparaîtra. Cette liste se réduira au fur et à mesure que vous continuez à taper. Une fois que vous avez trouvé l'emoji que vous recherchez, appuyez sur Tab ou Entrée pour insérer l'emoji sélectionné.
+
+Pour une liste des emojis disponibles, consultez le "[Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md)".
+
+
+## Tableau
+
+### Syntaxe générale
+
+#### Exemple
+
+| Left align | Right align | Center align |
+|:-----------|------------:|:------------:|
+| This       | This        | This         |
+| column     | column      | column       |
+| will       | will        | will         |
+| be         | be          | be           |
+| left       | right       | center       |
+| aligned    | aligned     | aligned      |
+
+```markdown
+| Left align | Right align | Center align |
+|:-----------|------------:|:------------:|
+| This       | This        | This         |
+| column     | column      | column       |
+| will       | will        | will         |
+| be         | be          | be           |
+| left       | right       | center       |
+| aligned    | aligned     | aligned      |
+```
+
+### CSV / TSV
+
+#### Exemple
+
+``` tsv
+Cellule de contenu Cellule de contenu
+Cellule de contenu Cellule de contenu
+```
+
+~~~
+``` csv
+Cellule de contenu,Cellule de contenu
+Cellule de contenu,Cellule de contenu
+```
+~~~
+
+~~~
+``` tsv
+Cellule de contenu Cellule de contenu
+Cellule de contenu Cellule de contenu
+```
+~~~
+
+### CSV / TSV (avec en-tête)
+
+#### Exemple
+
+``` tsv-h
+Premier en-tête Deuxième en-tête
+Cellule de contenu Cellule de contenu
+Cellule de contenu Cellule de contenu
+```
+
+~~~
+``` csv-h
+Premier en-tête Deuxième en-tête
+Cellule de contenu,Cellule de contenu
+Cellule de contenu,Cellule de contenu
+```
+~~~
+
+~~~
+``` tsv-h
+Premier en-tête Deuxième en-tête
+Cellule de contenu Cellule de contenu
+Cellule de contenu Contenu Cellule
+```
+~~~
+

apps/app/resource/locales/fr_FR/sandbox.md

@@ -1,6 +1,40 @@
-# Qu'est-ce que Sandbox ?
-- Sur cette page, vous trouverez des conseils qui vous aideront à maîtriser GROWI
-- N'hésitez pas à enrichir le contenu de vos pages avec les références sous cette hiérarchie de pages
+# Bienvenue dans le bac à sable GROWI !
+
+> [!NOTE]
+> **Qu'est-ce qu'un bac à sable ?**
+> 
+> Ceci est une page de pratique que vous pouvez éditer librement. C'est l'endroit idéal pour essayer de nouvelles choses !
+
+
+## :beginner: Pour les débutants
+
+Avec GROWI, vous pouvez facilement créer des pages visuellement attrayantes en utilisant une notation appelée "Markdown".  
+En utilisant Markdown, vous pouvez faire des choses comme ça !
+
+- Mettre en évidence du texte avec du **gras** ou de l'*italique*
+- Créer des listes à puces ou numérotées
+- [Insérer des liens](#-lien)
+- Créer des tableaux
+- Ajouter des blocs de code
+
+Diverses autres décorations sont également possibles.
+
+## Essayons-le !
+
+1. N'hésitez pas à éditer cette page
+1. Il n'y a pas besoin de craindre de faire des erreurs
+1. Vous pouvez toujours revenir en arrière sur les modifications
+1. Vous pouvez également apprendre des modifications des autres
+
+> [!IMPORTANT]
+> **Pour les administrateurs**
+> 
+> Le bac à sable est un lieu important pour l'apprentissage :
+> - Comme première étape pour que les nouveaux membres s'habituent à GROWI
+> - Comme terrain de pratique pour Markdown
+> - Comme outil de communication au sein de l'équipe
+>     - Même si cette page devient encombrée, c'est un signe d'apprentissage actif. Des nettoyages réguliers sont bons, mais il est recommandé de maintenir sa nature d'espace d'expérimentation libre.
+
 
 # :closed_book: Titres et paragraphes
 - En insérant des titres et des paragraphes, vous pouvez rendre le texte de la page plus facile à lire
@@ -44,65 +78,23 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-## Lignes horizontales
-- Insérer la ligne horizontale avec trois astérisques consécutifs ou plus `*` ou des traits de soulignement `_`
 
-#### Exemple
-Ci-dessous se trouve une ligne horizontale
-***
-
-Ci-dessous se trouve une ligne horizontale
-___
-
-```markdown
-Ci-dessous se trouve une ligne horizontale
-***
-
-Ci-dessous se trouve une ligne horizontale
-___
-```
-
-# :green_book: Style du texte
+# :blue_book: Style du texte
 - Différents styles peuvent être appliqués pour enrichir l'expression textuelle d'une phrase
     - Ces styles peuvent également être facilement appliqués en sélectionnant l'icône de la barre d'outils en bas de l'écran d'édition
 
-## Italique
-- Entourez le texte d'un astérisque `*` ou d'un trait de soulignement `_`.
-
-#### Exemples
-- Cette phrase indique l'emphase avec *Italique*
-- Cette phrase indique l'emphase avec _Italique_
+| Style                     | Syntax                 | Keyboard Shortcut | Example                                   | Output                                 |
+| ------------------------- | ---------------------- | ----------------- | ----------------------------------------- | -------------------------------------- |
+| Bold                      | `** **` or `__ __`     | (TBD)             | `**This is bold text**`                   | **This is bold text**                  |
+| Italic                    | `* *` or `_ _`         | (TBD)             | `_This text is italicized_`               | *This text is italicized*              |
+| Strikethrough             | `~~ ~~`                | (TBD)             | `~~This was mistaken text~~`             | ~~This was  mistaken text~~            |
+| Bold and nested italic | `** **` and `_ _`     | None              | `**This text is _extremely_ important**`  | **This text is _extremely_ important** |
+| All Bold and Italic   | `*** ***`              | None              | `***All this text is important***`       | ***All this text is important***      |
+| Subscript                 | `<sub> </sub>`         | None              | `This is a <sub>subscript</sub> text`       | This is a <sub>subscript</sub> text      |
+| Superscript               | `<sup> </sup>`         | None              | `This is a <sup>superscript</sup> text`     | This is a <sup>superscript</sup> text    |
 
-```markdown
-- Cette phrase indique l'emphase avec *Italique*
-- Cette phrase indique l'emphase avec _Italique_
-```
 
-## Gras
-- Entourez le texte de deux astérisques `*` ou de deux traits de soulignement `_`
-
-#### Exemple
-- Cette phrase indique l'emphase avec **Gras**
-- Cette phrase indique l'emphase avec __Gras__
-
-```markdown
-- Cette phrase indique l'emphase avec **Gras**
-- Cette phrase indique l'emphase avec __Gras__
-```
-
-## Italique et Gras
-- Entourez le texte de trois astérisques `*` ou de trois traits de soulignement `_`
-
-#### Exemple
-- Cette phrase indique l'emphase avec ***Italique et Gras***
-- Cette phrase indique l'emphase avec ___Italique et Gras___
-
-```markdown
-- Cette phrase indique l'emphase avec ***Italique et gras***
-- Cette phrase indique l'emphase avec ___Italique et gras___
-```
-
-# :orange_book: Insérer des listes
+# :green_book: Insérer des listes
 ## Liste à puces
 - Insérer une liste à puces en commençant une ligne par un trait d'union `-`, un plus `+` ou un astérisque `*`
 
@@ -129,17 +121,8 @@ ___
 1. Cette phrase est présente dans la liste à puces
     - Cette phrase est présente dans la liste à puces
 
-## Liste des tâches
-- Insérer une liste de cases à cocher non cochées en écrivant `[]`
-    - Cocher la case à cocher en écrivant `[x]`
 
-#### Exemple
-- [ ] Tâche 1
-    - [x] Tâche 1-1
-    - [ ] Tâche 1-2
-- [x] Tâche 2
-
-# :blue_book: Lien
+# :ledger: Lien
 
 ## Lien automatique
 Il suffit d'écrire l'URL et le lien sera généré automatiquement.
@@ -178,131 +161,12 @@ La syntaxe de lien flexible permet d'écrire facilement un lien par chemin de pa
 - [[Comment écrire des formules ?>./Math]]
 ```
 
-# :notebook: Autres
-## Citations
-- Utilisez des expressions entre guillemets en mettant `>` au début du paragraphe
-- Plusieurs citations peuvent être exprimées en utilisant une séquence de caractères `>`
-- Des listes et d'autres éléments peuvent être utilisés ensemble dans les citations
-
-#### Exemple
-> - Citation
-> - Citation
->> Plusieurs citations doivent insérer plus de `>`
-
-```markdown
-> - Citation
-> - Citation
->> Plusieurs citations doivent insérer plus de `>`
-```
-
-## Code
-- Il est possible d'exprimer le code en l'ajoutant en trois `` ` ``
-
-#### Exemple
-
-```markdown
-Ajoutez des codes ici
-
-Les sauts de ligne et les paragraphes peuvent être reflétés dans le code tel quel
-```
-
-#### Exemple (code source)
-
-```javascript:mersenne-twister.js
-function MersenneTwister(seed) {
-  if (arguments.length == 0) {
-    seed = new Date().getTime();
-  }
-
-  this._mt = new Array(624);
-  this.setSeed(seed);
-}
-```
-
-## Code en ligne
-- Entourez les mots de `` ` `` pour créer du code en ligne
-
-#### Exemple
-Voici le `code en ligne`
-
-## Tableau
 
-### Syntaxe générale
-
-#### Exemple
-
-| Left align | Right align | Center align |
-|:-----------|------------:|:------------:|
-| This       | This        | This         |
-| column     | column      | column       |
-| will       | will        | will         |
-| be         | be          | be           |
-| left       | right       | center       |
-| aligned    | aligned     | aligned      |
-
-```markdown
-| Left align | Right align | Center align |
-|:-----------|------------:|:------------:|
-| This       | This        | This         |
-| column     | column      | column       |
-| will       | will        | will         |
-| be         | be          | be           |
-| left       | right       | center       |
-| aligned    | aligned     | aligned      |
-```
-
-### CSV / TSV
-
-#### Exemple
-
-``` tsv
-Cellule de contenu Cellule de contenu
-Cellule de contenu Cellule de contenu
-```
-
-~~~
-``` csv
-Cellule de contenu,Cellule de contenu
-Cellule de contenu,Cellule de contenu
-```
-~~~
-
-~~~
-``` tsv
-Cellule de contenu Cellule de contenu
-Cellule de contenu Cellule de contenu
-```
-~~~
-
-### CSV / TSV (avec en-tête)
-
-#### Exemple
-
-``` tsv-h
-Premier en-tête Deuxième en-tête
-Cellule de contenu Cellule de contenu
-Cellule de contenu Cellule de contenu
-```
-
-~~~
-``` csv-h
-Premier en-tête Deuxième en-tête
-Cellule de contenu,Cellule de contenu
-Cellule de contenu,Cellule de contenu
-```
-~~~
-
-~~~
-``` tsv-h
-Premier en-tête Deuxième en-tête
-Cellule de contenu Cellule de contenu
-Cellule de contenu Contenu Cellule
-```
-~~~
+# :notebook: Autres applications
+- [En savoir plus sur Markdown](/Sandbox/Markdown)
 
-# :ledger: Autres applications
-- [Bootstrap](/Sandbox/Bootstrap)
+- [Décorez davantage votre page (Bootstrap5)](/Sandbox/Bootstrap5)
 
-- [Diagrammes](/Sandbox/Diagrammes)
+- [Comment représenter des diagrammes (Diagrams)](/Sandbox/Diagrams)
 
-- [Math](/Sandbox/Math)
+- [Comment représenter des formules mathématiques (Math)](/Sandbox/Math)

apps/app/resource/locales/ja_JP/sandbox-markdown.md

@@ -0,0 +1,214 @@
+# アラート
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+
+```markdown
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
+
+# テキストの引用
+- 行頭に `>` を記述することで引用表現を記述できます
+    - 多重引用の際は `>` を複数個連続で記述することで表現できます
+
+#### 例
+> - 引用符
+> - 引用符
+>> 複数の引用符にはさらに `>` を挿入する必要があります
+
+```markdown
+> - 引用する文章が入ります
+> - 引用する文章が入ります
+>> 多重引用を表現するにはさらに `>` を挿入します
+```
+
+
+# コード
+- `` ` `` 3つで囲むことでコードの表現をすることが可能です
+
+#### 例
+
+```markdown
+ここにコードを追加
+
+改行と段落はそのまま反映されます
+```
+#### 例 (ソースコード)
+
+```javascript:mersenne-twister.js
+function MersenneTwister(seed) {
+  if (arguments.length == 0) {
+    seed = new Date().getTime();
+  }
+
+  this._mt = new Array(624);
+  this.setSeed(seed);
+}
+```
+
+## インライン コード
+- `` ` `` で単語を囲むとインラインコードになります
+
+#### 例
+こちらは `インラインコード` です
+
+
+# タスク リスト
+- `[] ` を記述することでリストに対して未チェックのチェックボックスを挿入することができます
+    - `[x] ` を記述することでチェック済みのチェックボックスを挿入することができます
+
+#### 例
+- [ ] タスク 1
+    - [x] タスク 1-1
+    - [ ] タスク 1-2
+- [x] タスク2
+
+
+# 水平線
+- 3 つ以上の連続したアスタリスク `*` またはアンダースコア `_` で水平線を挿入します
+
+#### 例
+以下は水平線です
+***
+
+以下は水平線です
+___
+
+```markdown
+以下は水平線です
+***
+
+以下は水平線です
+___
+```
+
+
+# 脚注
+角かっこ構文を使用して、コンテンツに脚注を追加できます。
+
+シンプルな脚注[^1].
+
+複数行にわたる脚注も追加できます[^myfootnote2].
+
+[^1]: 注記はこのように書きます.
+[^myfootnote2]: 注記を改行するには、新しい行頭にで2つの連続したスペースをいれます。
+  こちらが2行目です。
+
+
+```markdown
+シンプルな脚注[^1].
+
+複数行にわたる脚注も追加できます[^myfootnote2].
+
+[^1]: 注記はこのように書きます.
+[^myfootnote2]: 注記を改行するには、新しい行頭にで2つの連続したスペースをいれます。
+  こちらが2行目です。
+```
+
+
+# 絵文字
+
+`:EMOJICODE:` とコロンの後に絵文字の名前を入力することで、文章に絵文字を追加できます。
+
+- :+1: GOOD!
+- :white_check_mark: チェック
+- :lock: 鍵マーク
+
+`:` に続いて2文字以上入力すると、絵文字のサジェストリストが表示されます。このリストは、入力を進めるにつれて絞り込まれていくので、探している絵文字が見つかり次第、Tab または Enter を押して、ハイライトされているものを入力してください。
+
+使用可能な絵文字の一覧は、「[絵文字チートシート](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md)」を参照してください。
+
+
+# 表
+### Markdown 標準
+- Markdown で記載できる標準的な形式の表です
+
+#### 例
+| 左揃え               |               右揃え |        中央揃え        |
+| :------------------- | -------------------: | :--------------------: |
+| この列は             |             この列は |        この列は        |
+| 左揃えで表示されます | 右揃えで表示されます | 中央揃えで表示されます |
+
+```markdown
+| 左揃え               |               右揃え |        中央揃え        |
+| :------------------- | -------------------: | :--------------------: |
+| この列は             |             この列は |        この列は        |
+| 左揃えで表示されます | 右揃えで表示されます | 中央揃えで表示されます |
+```
+
+### CSV / TSV
+#### 例
+
+``` tsv
+10:00	集合
+10:20	移動
+```
+
+~~~
+``` csv
+11:00,MTG
+12:00,昼食
+```
+~~~
+
+~~~
+``` tsv
+10:00	集合
+10:20	移動
+```
+~~~
+
+### CSV / TSV（ヘッダー付き）
+#### 例
+``` tsv-h
+時間	行動
+10:00	集合
+10:20	移動
+```
+
+~~~
+``` csv-h
+時間,行動
+11:00,MTG
+12:00,昼食
+```
+~~~
+
+~~~
+``` tsv-h
+時間	行動
+10:00	集合
+10:20	移動
+```
+~~~
+
+
+
+

apps/app/resource/locales/ja_JP/sandbox.md

@@ -1,6 +1,40 @@
-# サンドボックスとは?
-- このページでは、GROWI を使いこなすためのヒントを紹介します
-- このページと下の階層にある参考記述を利用して、ページのコンテンツを充実させることができます
+# GROWI の砂場へようこそ！
+
+> [!NOTE]
+> **サンドボックスとは?**
+> 
+> ここは自由に編集できる練習用のページです。新しいことを試すのに最適な場所です！
+
+
+## :beginner: はじめての方へ
+
+GROWI では「マークダウン」という記法で簡単に見栄えの良いページを作ることができます。  
+マークダウンを使うと、こんなことができます！
+
+- **太字**や*斜体*で文字を強調
+- 箇条書きや番号付きリストの作成
+- [リンクの挿入](#-リンク)
+- 表の作成
+- コードブロックの追加
+
+その他、様々な装飾が可能です。
+
+## 試してみましょう！
+
+1. このページを自由に編集してください
+1. 失敗を恐れる必要はありません
+1. 元に戻すこともできます
+1. 他の人の編集も参考になります
+
+> [!IMPORTANT]
+> **管理者の方へ**
+> 
+> 砂場は学習のための大切な場所です：
+> - 新しいメンバーがGROWIに慣れるための第一歩として
+> - マークダウンの練習場として
+> - チーム内のコミュニケーションツールとして
+>     - このページが乱雑になっても、それは活発な学習の証です。定期的なクリーンアップは良いですが、自由な実験の場としての性質は維持することをおすすめします。
+
 
 # :closed_book: 見出しと段落
 - 見出しと段落を挿入すると、ページ上のテキストを読みやすくすることができます
@@ -46,65 +80,25 @@
 
 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
 
-## 水平線
-- 3 つ以上の連続したアスタリスク `*` またはアンダースコア `_` で水平線を挿入します
-
-#### 例
-以下は水平線です
-***
 
-以下は水平線です
-___
-
-```markdown
-以下は水平線です
-***
 
-以下は水平線です
-___
-```
-
-# :green_book: テキストのスタイル設定
+# :blue_book: テキストのスタイル設定
 - さまざまなスタイルを適用して、文章のテキスト表現を豊かにすることができます
 - これらのスタイルは、編集画面の下部にあるツールバー アイコンを選択して簡単に適用することもできます
 
-## 斜体
-- テキストをアスタリスク `*` またはアンダースコア `_` で囲みます。
-
-#### 例
-- この文は *斜体* で強調を示します
-- この文は _斜体_ で強調を示します
-
-```markdown
-- この文は *斜体* で強調を示します
-- この文は _斜体_ で強調を示します
-```
-
-## 太字
-- テキストを 2 つのアスタリスク `*` または 2 つのアンダースコア `_` で囲みます
-
-#### 例
-- この文は **太字** で強調を示します
-- この文は __太字__ で強調を示します
-
-```markdown
-- この文は **太字** で強調を示します
-- この文は __太字__ で強調を示します
-```
-
-## 斜体と太字
-- テキストを 3 つのアスタリスク `*` または 3 つのアンダースコア `_` で囲みます
+| スタイル                   | 構文                   | キーボードショートカット | 例                                       | 出力                                   |
+| -------------------------- | ---------------------- | ------------------------ | ---------------------------------------- | -------------------------------------- |
+| 太字                       | `** **` または `__ __` | (準備中)                 | `**これは太字のテキストです**`           | **これは太字のテキストです**           |
+| [斜体]                     | `* *` または `_ _`     | (準備中)                 | `_このテキストは斜体です_`               | *このテキストは斜体です*               |
+| 取り消し線                 | `~~ ~~`                | (準備中)                 | `~~これは間違ったテキストでした~~`       | ~~これは間違ったテキストでした~~       |
+| 太字および太字中にある斜体 | `** **` および `_ _`   | なし                     | `**This text is _extremely_ important**` | **This text is _extremely_ important** |
+| 全体が太字か斜体           | `*** ***`              | なし                     | `***このテキストはすべて重要です***`     | ***このテキストはすべて重要です***     |
+| 下付き                     | `<sub> </sub>`         | なし                     | `これは<sub>下付き</sub>テキストです`    | これは<sub>下付き</sub>テキストです    |
+| 上付き                     | `<sup> </sup>`         | なし                     | `これは<sup>上付き</sup>テキストです`    | これは<sup>上付き</sup>テキストです    |
 
-#### 例
-- この文は ***斜体と太字*** で強調を示します
-- この文は ___斜体と太字で強調を示します太字___
 
-```markdown
-- この文は ***斜体 & 太字*** で強調を示します
-- この文は ___斜体 & 太字___ で強調を示します
-```
 
-# :orange_book: リストの挿入
+# :green_book: リストの挿入
 ## 箇条書きリスト
 - ハイフン `-`、プラス `+`、アスタリスク `*` を行頭に記述することで、箇条書きのリストを挿入することでができます
 
@@ -130,17 +124,9 @@ ___
 1. この文章は箇条書きリストで表現しています
     - この文章は箇条書きリストで表現しています  
 
-## タスク リスト
-- `[] ` を記述することでリストに対して未チェックのチェックボックスを挿入することができます
-    - `[x] ` を記述することでチェック済みのチェックボックスを挿入することができます
 
-#### 例
-- [ ] タスク 1
-    - [x] タスク 1-1
-    - [ ] タスク 1-2
-- [x] タスク2
 
-# :blue_book: リンク
+# :ledger: リンク
 
 ## 自動リンク
 URL を記述するだけで、リンクが自動的に生成されます。
@@ -179,118 +165,11 @@ https://www.google.co.jp
 - [[数式の書き方は?>./Math]]
 ```
 
-# :notebook: その他
-## 引用符
-- 行頭に `>` を記述することで引用表現を記述できます
-    - 多重引用の際は `>` を複数個連続で記述することで表現できます
-
-#### 例
-> - 引用符
-> - 引用符
->> 複数の引用符にはさらに `>` を挿入する必要があります
-
-```markdown
-> - 引用する文章が入ります
-> - 引用する文章が入ります
->> 多重引用を表現するにはさらに `>` を挿入します
-```
-
-## コード
-- `` ` `` 3つで囲むことでコードの表現をすることが可能です
-
-#### 例
-
-```markdown
-ここにコードを追加
-
-改行と段落はそのまま反映されます
-```
-#### 例 (ソースコード)
-
-```javascript:mersenne-twister.js
-function MersenneTwister(seed) {
-  if (arguments.length == 0) {
-    seed = new Date().getTime();
-  }
-
-  this._mt = new Array(624);
-  this.setSeed(seed);
-}
-```
-
-## インライン コード
-- `` ` `` で単語を囲むとインラインコードになります
-
-#### 例
-こちらは `インラインコード` です
-
-
-
-# :memo:表の挿入
-## Markdown 標準
-- Markdown で記載できる標準的な形式の表です
-
-#### 例
-| 左揃え               |               右揃え |        中央揃え        |
-| :------------------- | -------------------: | :--------------------: |
-| この列は             |             この列は |        この列は        |
-| 左揃えで表示されます | 右揃えで表示されます | 中央揃えで表示されます |
-
-```markdown
-| 左揃え               |               右揃え |        中央揃え        |
-| :------------------- | -------------------: | :--------------------: |
-| この列は             |             この列は |        この列は        |
-| 左揃えで表示されます | 右揃えで表示されます | 中央揃えで表示されます |
-```
-
-### CSV / TSV
-#### 例
-
-``` tsv
-10:00	集合
-10:20	移動
-```
-
-~~~
-``` csv
-11:00,MTG
-12:00,昼食
-```
-~~~
-
-~~~
-``` tsv
-10:00	集合
-10:20	移動
-```
-~~~
+# :notebook: さらにアプリケーションを活用
 
-### CSV / TSV（ヘッダー付き）
-#### 例
-``` tsv-h
-時間	行動
-10:00	集合
-10:20	移動
-```
-
-~~~
-``` csv-h
-時間,行動
-11:00,MTG
-12:00,昼食
-```
-~~~
-
-~~~
-``` tsv-h
-時間	行動
-10:00	集合
-10:20	移動
-```
-~~~
+- [もっとマークダウンについて学ぶ](/Sandbox/Markdown)
 
-# :ledger: さらにアプリケーションを利用
-- [ページの装飾方法（Bootstrap5）](/Sandbox/Bootstrap5)
+- [さらにページの装飾をする（Bootstrap5）](/Sandbox/Bootstrap5)
 
 - [図形の表現方法（Diagrams）](/Sandbox/Diagrams)
 

apps/app/resource/locales/zh_CN/sandbox-markdown.md

@@ -0,0 +1,225 @@
+# Alert
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+
+```markdown
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
+
+# 引用
+- 在段落开头放置 `>` 即可使用带引号的表达式
+    - 可以使用一系列 `>` 字符来表示多个引号
+- 列表和其他元素可以在区块引用中一起使用
+
+#### 示例
+> - 引号
+> - 引号
+>> 多个引号需要插入更多 `>`
+
+```markdown
+> - 引号
+> - 引号
+>> 多个引号需要插入更多 `>`
+```
+
+
+# 代码
+- 可以通过在三个 `` ` `` 中添加代码来表示代码
+
+####示例
+
+```markdown
+在此处添加代码
+
+换行符和段落可以按原样反映在代码中
+```
+
+#### 示例（源代码）
+
+```javascript:mersenne-twister.js
+function MersenneTwister(seed) {
+  if (arguments.length == 0) {
+    seed = new Date().getTime();
+  }
+
+  this._mt = new Array(624);
+  this.setSeed(seed);
+}
+```
+
+## 内联代码
+- 将单词括在 `` ` `` 中以制作内联代码
+
+#### 示例
+以下是 `内联代码`
+
+
+
+# 任务列表
+- 通过写入 `[] ` 插入未选中的复选框列表
+    - 通过写入 `[x]` 选中复选框
+
+#### 示例
+- [ ] 任务 1
+    - [x] 任务 1-1
+    - [ ] 任务 1-2
+- [x] 任务 2
+
+
+# 水平线
+- 用三个或更多连续的星号 `*` 或下划线 `_` 插入水平线
+
+#### 示例
+下面是一条水平线
+***
+下面是一条水平线
+___
+
+```markdown
+下面是一条水平线
+***
+下面是一条水平线
+___
+```
+
+
+# 脚注
+
+您可以使用此括号语法为您的内容添加脚注：
+
+Here is a simple footnote[^1].
+
+A footnote can also have multiple lines[^2].
+
+[^1]: My reference.
+[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
+  This is a second line.
+
+```markdown
+Here is a simple footnote[^1].
+
+A footnote can also have multiple lines[^2].
+
+[^1]: My reference.
+[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
+  This is a second line.
+```
+
+
+# 表情符号
+
+您可以通过在冒号 `:` 后输入表情符号名称来添加表情符号。
+
+- :+1: 好！
+- :white_check_mark: 检查
+- :lock: 锁定
+
+当您在冒号后输入两个或更多字符时，会出现一个表情符号建议列表。随着您继续输入，这个列表会逐渐缩小范围。一旦找到您要查找的表情符号，按 Tab 或 Enter 键插入高亮显示的表情符号。
+
+有关可用表情符号的列表，请参阅 "[Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md)"。
+
+
+
+# 表格
+
+### 通用语法
+
+#### 示例
+
+| Left align | Right align | Center align |
+|:-----------|------------:|:------------:|
+| This       | This        | This         |
+| column     | column      | column       |
+| will       | will        | will         |
+| be         | be          | be           |
+| left       | right       | center       |
+| aligned    | aligned     | aligned      |
+
+```markdown
+| Left align | Right align | Center align |
+|:-----------|------------:|:------------:|
+| This       | This        | This         |
+| column     | column      | column       |
+| will       | will        | will         |
+| be         | be          | be           |
+| left       | right       | center       |
+| aligned    | aligned     | aligned      |
+```
+
+### CSV / TSV
+
+#### 示例
+
+``` tsv
+内容单元格 内容单元格
+内容单元格 内容单元格
+```
+
+~~~
+``` csv
+内容单元格,内容单元格
+内容单元格,内容单元格
+```
+~~~
+
+~~~
+``` tsv
+内容单元格 内容单元格
+内容单元格 内容单元格
+```
+~~~
+
+### CSV / TSV (带标题)
+
+#### 示例
+
+``` tsv-h
+第一个标题 第二个标题
+内容单元格 内容单元格
+内容单元格 内容单元格
+```
+
+~~~
+``` csv-h
+第一个标题,第二个标题
+内容单元格,内容单元格
+内容单元格,内容单元格
+```
+~~~
+
+~~~
+``` tsv-h
+第一个标题 第二个标题
+内容单元格 内容单元格
+内容单元格 内容单元格
+```
+~~~
+

apps/app/resource/locales/zh_CN/sandbox.md

@@ -1,6 +1,40 @@
-# 什么是沙盒？
-- 在此页面上，您将找到帮助您掌握 GROWI 的技巧
-- 使用此页面层次结构下的参考资料随意丰富页面内容
+# 欢迎来到 GROWI 沙盒！
+
+> [!NOTE]
+> **什么是沙盒？**
+>
+> 这是一个您可以自由编辑的练习页面。它是尝试新事物的绝佳场所！
+
+## :beginner: 初学者指南
+
+使用 GROWI，您可以使用名为“Markdown”的符号轻松创建具有视觉吸引力的页面。
+
+通过使用 Markdown，您可以做这样的事情！
+
+- 用**粗体**或*斜体*强调文本
+- 创建项目符号或编号列表
+- [插入链接](#-link)
+- 创建表格
+- 添加代码块
+
+还可以使用各种其他装饰。
+
+## 让我们尝试一下！
+
+1. 随意编辑此页面
+1. 无需担心犯错
+1. 您随时可以撤销更改
+1. 您还可以从其他人的编辑中学习
+
+> [!IMPORTANT]
+> **对于管理员**
+>
+> 沙盒是学习的重要场所：
+> - 作为新成员习惯 GROWI 的第一步
+> - 作为 Markdown 的练习场
+> - 作为团队内部的沟通工具
+> - 即使此页面变得杂乱无章，这也是积极学习的标志。定期清理是好的，但建议保持其作为自由实验空间的性质。
+
 
 # :closed_book: 标题和段落
 - 通过插入标题和段落，您可以使页面上的文本更易于阅读
@@ -44,63 +78,23 @@ Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。
 
-## 水平线
-- 用三个或更多连续的星号 `*` 或下划线 `_` 插入水平线
 
-#### 示例
-下面是一条水平线
-***
-下面是一条水平线
-___
-
-```markdown
-下面是一条水平线
-***
-下面是一条水平线
-___
-```
-
-# :green_book: 文本样式
+# :blue_book: 文本样式
 - 可以应用各种样式来丰富句子的文本表达
     - 也可以通过选择编辑屏幕底部的工具栏图标轻松应用这些样式
 
-## 斜体
-- 用星号 `*` 或下划线 `_` 括住文本。
-
-#### 示例
-- 本句用 *Italic* 表示强调
-- 本句用 _Italic_ 表示强调
-
-```markdown
-- 本句用 *Italic* 表示强调
-- 本句用 _Italic_ 表示强调
-```
-
-## 粗体
-- 用两个星号 `*` 或两个下划线 `_` 括住文本
-
-#### 示例
-- 本句用 **Bold** 表示强调
-- 本句用 __Bold__ 表示强调
-
-```markdown
-- 本句用 **Bold** 表示强调
-- 本句用 __Bold__ 表示强调
-```
+| Style | 语法 | 键盘快捷键 | 示例 | 输出 |
+|-------|------|------------|------|------|
+| 加粗 | `** **` 或 `__ __` | (TBD) | `**这是粗体文本**` | **这是粗体文本** |
+| 斜体 | `* *` 或 `_ _` | (TBD) | `_这是斜体文本_` | *这是斜体文本* |
+| 删除线 | `~~ ~~` | 无 | `~~这是错误文本~~` | ~~这是错误文本~~ |
+| 粗体和嵌入的斜体 | `** **` 和 `_ _` | (TBD) | `**This text is _extremely_ important**` | **This text is _extremely_ important** |
+| 全部粗体和斜体 | `*** ***` | 无 | ***所有这些文本都很重要*** | ***所有这些文本都很重要*** |
+| 下标 | `<sub> </sub>` | 无 | This is a <sub>subscript</sub> text | 这是<sub>下标</sub>文本 |
+| 上标 | `<sup> </sup>` | 无 | This is a <sup>superscript</sup> text | 这是<sup>上标</sup>文本 |
 
-## 斜体 & 粗体
-- 用三个星号 `*` 或三个下划线 `_` 括住文本
 
-#### 示例
-- 本句用 ***Italic & 粗体*** 表示强调
-- 本句用 ___Italic & 粗体___ 表示强调
-
-```markdown
--本句使用 ***斜体和粗体*** 表示强调
-- 本句使用 ___斜体和粗体___ 表示强调
-```
-
-# :orange_book: 插入列表
+# :green_book: 插入列表
 ## 项目符号列表
 - 通过在行首使用连字符 `-`、加号 `+` 或星号 `*` 插入项目符号列表
 
@@ -127,17 +121,9 @@ ___
 1. 此句子出现在项目符号列表中
     - 此句子出现在项目符号列表中
 
-## 任务列表
-- 通过写入 `[] ` 插入未选中的复选框列表
-    - 通过写入 `[x]` 选中复选框
 
-#### 示例
-- [ ] 任务 1
-    - [x] 任务 1-1
-    - [ ] 任务 1-2
-- [x] 任务 2
 
-# :blue_book: 链接
+# :ledger: 链接
 
 ## 自动链接
 只需输入 URL，链接就会自动生成。
@@ -176,131 +162,12 @@ https://www.google.co.jp
 - [[如何写公式？>./Math]]
 ```
 
-# :notebook: 其他
-## 区块引用
-- 在段落开头放置 `>` 即可使用带引号的表达式
-    - 可以使用一系列 `>` 字符来表示多个引号
-- 列表和其他元素可以在区块引用中一起使用
-
-#### 示例
-> - 引号
-> - 引号
->> 多个引号需要插入更多 `>`
-
-```markdown
-> - 引号
-> - 引号
->> 多个引号需要插入更多 `>`
-```
-
-## 代码
-- 可以通过在三个 `` ` `` 中添加代码来表示代码
 
-####示例
-
-```markdown
-在此处添加代码
-
-换行符和段落可以按原样反映在代码中
-```
-
-#### 示例（源代码）
-
-```javascript:mersenne-twister.js
-function MersenneTwister(seed) {
-  if (arguments.length == 0) {
-    seed = new Date().getTime();
-  }
-
-  this._mt = new Array(624);
-  this.setSeed(seed);
-}
-```
-
-## 内联代码
-- 将单词括在 `` ` `` 中以制作内联代码
-
-#### 示例
-以下是 `内联代码`
-
-## 表格
-
-### 通用语法
-
-#### 示例
-
-| Left align | Right align | Center align |
-|:-----------|------------:|:------------:|
-| This       | This        | This         |
-| column     | column      | column       |
-| will       | will        | will         |
-| be         | be          | be           |
-| left       | right       | center       |
-| aligned    | aligned     | aligned      |
-
-```markdown
-| Left align | Right align | Center align |
-|:-----------|------------:|:------------:|
-| This       | This        | This         |
-| column     | column      | column       |
-| will       | will        | will         |
-| be         | be          | be           |
-| left       | right       | center       |
-| aligned    | aligned     | aligned      |
-```
-
-### CSV / TSV
-
-#### 示例
-
-``` tsv
-内容单元格 内容单元格
-内容单元格 内容单元格
-```
-
-~~~
-``` csv
-内容单元格,内容单元格
-内容单元格,内容单元格
-```
-~~~
-
-~~~
-``` tsv
-内容单元格 内容单元格
-内容单元格 内容单元格
-```
-~~~
-
-### CSV / TSV (带标题)
-
-#### 示例
-
-``` tsv-h
-第一个标题 第二个标题
-内容单元格 内容单元格
-内容单元格 内容单元格
-```
-
-~~~
-``` csv-h
-第一个标题,第二个标题
-内容单元格,内容单元格
-内容单元格,内容单元格
-```
-~~~
-
-~~~
-``` tsv-h
-第一个标题 第二个标题
-内容单元格 内容单元格
-内容单元格 内容单元格
-```
-~~~
+# :notebook: 更多应用
+- [了解更多关于 Markdown](/Sandbox/Markdown)
 
-# :ledger: 更多应用
-- [Bootstrap](/Sandbox/Bootstrap)
+- [进一步装饰你的页面 (Bootstrap5)](/Sandbox/Bootstrap5)
 
-- [Diagrams](/Sandbox/Diagrams)
+- [如何表示图表 (Diagrams)](/Sandbox/Diagrams)
 
-- [Math](/Sandbox/Math)
+- [如何表示数学公式 (Math)](/Sandbox/Math)

apps/app/src/server/service/installer.ts

@@ -69,6 +69,7 @@ export class InstallerService {
      *   2. avoid difference for order in VRT
      */
     await this.createPage(path.join(localeDir, lang, 'sandbox.md'), '/Sandbox');
+    await this.createPage(path.join(localeDir, lang, 'sandbox-markdown.md'), '/Sandbox/Markdown');
     await this.createPage(path.join(localeDir, lang, 'sandbox-bootstrap5.md'), '/Sandbox/Bootstrap5');
     await this.createPage(path.join(localeDir, lang, 'sandbox-diagrams.md'), '/Sandbox/Diagrams');
     await this.createPage(path.join(localeDir, lang, 'sandbox-math.md'), '/Sandbox/Math');