From 3ae1a6fa1543d27f0715a134ccd0d7f7eadcec26 Mon Sep 17 00:00:00 2001 From: yiwen101 Date: Sat, 3 Feb 2024 16:58:46 +0800 Subject: [PATCH 01/19] Update trouble shooting --- docs/userGuide/troubleshooting.md | 62 ++++++++++++++++++++++++------- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index 1b3924f5aa..04a57821b5 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -14,19 +14,16 @@ Unexpected behavior can occur in rendered pages due to a number of different reasons. One of these reasons is when the rendered pages are not valid HTML. Incorrect HTML markup can be due to: + - nesting block-level elements inside `

` or `` elements - missing `` tags ###### Example: block-level elements inside `` elements -```html +```html - -Animal | Trainable? | Price | Remarks -:------|:----------:|------:|-------- -Ants | no | 5 | -Bees | no | 20 | -Cats | yes | 100 | + Animal | Trainable? | Price | Remarks :------|:----------:|------:|-------- + Ants | no | 5 | Bees | no | 20 | Cats | yes | 100 | ``` @@ -40,20 +37,57 @@ This is likely caused by incorrect HTML markup, for example nesting block-level or missing ``. Bailing hydration and performing full client-side render. ``` + See [SSR guide for Vue](https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) for more details on hydration mismatch. A possible fix for the above situation is to wrap the table in a `

` element instead: ```html -
- -Animal | Trainable? | Price | Remarks -:------|:----------:|------:|-------- -Ants | no | 5 | -Bees | no | 20 | -Cats | yes | 100 | + Animal | Trainable? | Price | Remarks :------|:----------:|------:|-------- + Ants | no | 5 | Bees | no | 20 | Cats | yes | 100 |
``` +##### Markdown Rendering Issues + +If you encounter issues of failure in rendering markdown in a component, it is likely that the markdown is not being properly recognized due to syntax errors. Sign posting is required to inform markdown to parse content of a presentation component as markdown rather than plain text. + +You could sign post markdown either by: + +- using the `markdown` tag +- using an empty line without any indentation before the markdown content + + +Both using the `markdown` tag and adding line breaks will render the markdown content.Example: + +```html + **Hello World** +``` + +and + +```html + + +**Hello World** + +``` +will render as: + + +**Hello World** + + + + +If you do not sign post markdown, the content will be rendered as plain text. +Example: + + ```html + **Hello World** + ``` + will render as: + **Hello World** + \ No newline at end of file From 9da62fa83b2cd611937f0c15becf2b14bb160a90 Mon Sep 17 00:00:00 2001 From: yiwen101 Date: Sat, 3 Feb 2024 17:54:52 +0800 Subject: [PATCH 02/19] Update code examples in affected presentation components --- docs/userGuide/components/presentation.md | 6 ++++- docs/userGuide/syntax/badges.md | 25 ++++++++++++++++----- docs/userGuide/syntax/boxes.md | 27 +++++++++++++---------- docs/userGuide/syntax/panels.md | 12 +++++----- docs/userGuide/syntax/tabs.md | 22 +++++++----------- docs/userGuide/usingComponents.md | 10 ++++----- 6 files changed, 57 insertions(+), 45 deletions(-) diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md index b86565eb95..d62e878abb 100644 --- a/docs/userGuide/components/presentation.md +++ b/docs/userGuide/components/presentation.md @@ -27,8 +27,12 @@ The components in this page are the core **presentational** components you may w
{% endmacro %} - {% for k,v in topics %} + {% if 'presentation' in v[1] %} {{ show_topic(k) }} {% endif %} diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md index 59b1d78e93..431f487567 100644 --- a/docs/userGuide/syntax/badges.md +++ b/docs/userGuide/syntax/badges.md @@ -1,5 +1,14 @@ ## Badges - +Example: + +html + + +**Heading** + + + +You can choose from a variety of colors for your badges. You can also use the `rounded-pill` class to make the badges pill-shaped. html @@ -35,22 +44,23 @@ Links: Buttons: Headings: ### Feature X beta {.no-index} + ##### Feature Y stable {.no-index} + -
%%{{ icon_info }} You can refer to [Bootstrap documentation](https://getbootstrap.com/docs/5.1/components/badge/) to find more information about Badges.%% -
+
@@ -58,9 +68,10 @@ Headings: Primary Success ``` +
@@ -68,7 +79,9 @@ Headings: Primary Success
diff --git a/docs/userGuide/syntax/boxes.md b/docs/userGuide/syntax/boxes.md index ff2c95d2a7..a0a48cf55a 100644 --- a/docs/userGuide/syntax/boxes.md +++ b/docs/userGuide/syntax/boxes.md @@ -2,14 +2,22 @@ ## Boxes -**Boxes come with different built-in types.** - +**Simple Example** html - default +plain text +_markdown_ + + + +**Boxes come with different built-in types.** + + +html + info @@ -50,9 +58,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i html - - default - primary @@ -212,7 +217,7 @@ Custom styles **(** `background-color`, `border-color`, `border-left-color`, `ic -****Options**** +\***\*Options\*\*** Name | Type | Default | Description --- | --- | --- | --- background-color | `String` | `null` | @@ -228,18 +233,16 @@ type | `String` | `''` | Supports: `info`, `warning`, `success`, `important`, `w theme | `String` | `''` | Supports: `primary`, `secondary`, `success`, `danger`, `warning`, `tip`, `light`, `dark` or empty for default. light | `Boolean` | `false` | Uses a light color scheme for the box. seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` is specified, this style will not be activated. -no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`. +no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`. no-background | `Boolean` | `false` | Removes background, except if styled by `background-color` option. no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `icon` option. -
```html - - warning - + warning ``` +
diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md index 663e8ee9d1..94537b0901 100644 --- a/docs/userGuide/syntax/panels.md +++ b/docs/userGuide/syntax/panels.md @@ -8,7 +8,8 @@ html - Lorem ipsum ... + _markdown_ + plain text ... @@ -103,7 +104,6 @@ - **Show/Hide buttons using `no-switch`, `no-close`, or `no-minimized-switch`.** @@ -189,7 +189,7 @@ -****Options**** +\***\*Options\*\*** Name | Type | Default | Description --- | --- | --- | --- header{{slot_info_trigger}} | `String` | `''` | The clickable text on the Panel's header. Supports MarkDown text. @@ -210,10 +210,9 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S
```html - - ... - + ... ``` +
@@ -249,5 +248,4 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S ... -
diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md index 97adfa7265..cbee445086 100644 --- a/docs/userGuide/syntax/tabs.md +++ b/docs/userGuide/syntax/tabs.md @@ -5,7 +5,8 @@ - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. + Text in the first tab + _some markdown_ @@ -28,7 +29,7 @@ -****Options**** +\***\*Options\*\*** `tabs`: Name | Type | Default | Description @@ -56,22 +57,15 @@ Tabs, tab group and individual tab can be omitted during printing by adding Boot ```html - - Content of the first tab - - - Contents of the second tab - + Content of the first tab + Contents of the second tab - - Some stuff about stars ... - - - Some stuff about the moon ... - + Some stuff about stars ... + Some stuff about the moon ... ``` +
diff --git a/docs/userGuide/usingComponents.md b/docs/userGuide/usingComponents.md index d951195b87..1c5400720d 100644 --- a/docs/userGuide/usingComponents.md +++ b/docs/userGuide/usingComponents.md @@ -17,27 +17,27 @@
**MarkBind provides a number of components** (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages. +
To use a component, just use the corresponding markup in your file. For example, to create a Panel, you just need to use the markup: ```html - - Panel Content. - + Panel Content. ``` {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %} {% macro show_topic(filename) %} +
{% endmacro %} {% for k,v in topics %} - {% if 'component' in v[1] %} +{% if 'component' in v[1] %} {{ show_topic(k) }} - {% endif %} +{% endif %} {% endfor %}
From 24fa82e3716bd2f36099c3df2bcd6a67a5cb9555 Mon Sep 17 00:00:00 2001 From: yiwen101 Date: Sat, 3 Feb 2024 18:48:39 +0800 Subject: [PATCH 03/19] Update message for presentation component --- docs/userGuide/components/presentation.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md index d62e878abb..25b035fc42 100644 --- a/docs/userGuide/components/presentation.md +++ b/docs/userGuide/components/presentation.md @@ -19,12 +19,27 @@
The components in this page are the core **presentational** components you may want to use. Panels and tabs can be used to **organise content sections**, while badges and boxes can **highlight small, specific pieces of information**. +
+ + +As presentational components are HTML-based, you need to follow the HTML syntax when using markdown in the content of the components. + +More specifically, you should use either: + +- add a line break with no indentation beforethe markdown content +- use the `` or `` + tag to wrap the markdown content + +For more information, please refer to this [section](../usingHtmlJavascriptCss.html#markdown-in-html). + + {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %} {% macro show_topic(filename) %} +
{% endmacro %} {% for k,v in topics %} From a99d9723ae6b249aa4b78984b4473334e3cbbc9d Mon Sep 17 00:00:00 2001 From: yiwen101 Date: Sat, 3 Feb 2024 19:15:59 +0800 Subject: [PATCH 04/19] Revert unrelated changes --- docs/userGuide/usingComponents.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/userGuide/usingComponents.md b/docs/userGuide/usingComponents.md index 1c5400720d..d951195b87 100644 --- a/docs/userGuide/usingComponents.md +++ b/docs/userGuide/usingComponents.md @@ -17,27 +17,27 @@
**MarkBind provides a number of components** (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages. -
To use a component, just use the corresponding markup in your file. For example, to create a Panel, you just need to use the markup: ```html - Panel Content. + + Panel Content. + ``` {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %} {% macro show_topic(filename) %} -
{% endmacro %} {% for k,v in topics %} -{% if 'component' in v[1] %} + {% if 'component' in v[1] %} {{ show_topic(k) }} -{% endif %} + {% endif %} {% endfor %}
From 9c4b9a54a0b9af31e1cccb16543ff24c7dbeefbc Mon Sep 17 00:00:00 2001 From: yiwen101 Date: Sat, 3 Feb 2024 21:06:02 +0800 Subject: [PATCH 05/19] Fix links --- docs/userGuide/components/presentation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md index 25b035fc42..5be1eef420 100644 --- a/docs/userGuide/components/presentation.md +++ b/docs/userGuide/components/presentation.md @@ -31,7 +31,7 @@ More specifically, you should use either: - use the `` or `` tag to wrap the markdown content -For more information, please refer to this [section](../usingHtmlJavascriptCss.html#markdown-in-html). +For more information, please refer to this [section]({{baseUrl}}/userGuide/usingHtmlJavaScriptCss.html#markdown-in-html). From 3c16fb3350332dd536d9a017eded8b21d00dd9f9 Mon Sep 17 00:00:00 2001 From: Wang Yiwen <121547057+yiwen101@users.noreply.github.com> Date: Sat, 10 Feb 2024 10:21:04 +0800 Subject: [PATCH 06/19] Update docs/userGuide/components/presentation.md Co-authored-by: Chan Yu Cheng <77204346+yucheng11122017@users.noreply.github.com> --- docs/userGuide/components/presentation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md index 5be1eef420..6bbb9c8be3 100644 --- a/docs/userGuide/components/presentation.md +++ b/docs/userGuide/components/presentation.md @@ -27,7 +27,7 @@ As presentational components are HTML-based, you need to follow the HTML syntax More specifically, you should use either: -- add a line break with no indentation beforethe markdown content +- add a line break with no indentation before the markdown content - use the `` or `` tag to wrap the markdown content From fdfdc8bc66c2adb4771d27c379cc009633321470 Mon Sep 17 00:00:00 2001 From: yiwen101 Date: Sat, 10 Feb 2024 11:20:17 +0800 Subject: [PATCH 07/19] Revert distracting changes made by formatter --- docs/userGuide/components/presentation.md | 14 ++------------ docs/userGuide/syntax/badges.md | 13 +++++-------- docs/userGuide/syntax/boxes.md | 4 ++-- docs/userGuide/syntax/panels.md | 4 ++-- docs/userGuide/syntax/tabs.md | 3 +-- docs/userGuide/troubleshooting.md | 4 +--- 6 files changed, 13 insertions(+), 29 deletions(-) diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md index 5be1eef420..d9873be1ef 100644 --- a/docs/userGuide/components/presentation.md +++ b/docs/userGuide/components/presentation.md @@ -19,35 +19,25 @@
The components in this page are the core **presentational** components you may want to use. Panels and tabs can be used to **organise content sections**, while badges and boxes can **highlight small, specific pieces of information**. -
As presentational components are HTML-based, you need to follow the HTML syntax when using markdown in the content of the components. - More specifically, you should use either: - - add a line break with no indentation beforethe markdown content - use the `` or `` - tag to wrap the markdown content - + tag to wrap the markdown content. For more information, please refer to this [section]({{baseUrl}}/userGuide/usingHtmlJavaScriptCss.html#markdown-in-html). - {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %} {% macro show_topic(filename) %} -
{% endmacro %} + {% for k,v in topics %} - {% if 'presentation' in v[1] %} {{ show_topic(k) }} {% endif %} diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md index 431f487567..61c7d83d54 100644 --- a/docs/userGuide/syntax/badges.md +++ b/docs/userGuide/syntax/badges.md @@ -1,4 +1,5 @@ ## Badges + Example: html @@ -44,22 +45,20 @@ Links: Buttons: Headings: ### Feature X beta {.no-index} - ##### Feature Y stable {.no-index} - +
%%{{ icon_info }} You can refer to [Bootstrap documentation](https://getbootstrap.com/docs/5.1/components/badge/) to find more information about Badges.%% -
@@ -68,7 +67,7 @@ Headings: Primary Success ``` @@ -79,9 +78,7 @@ Difficulty Level 4 Primary Success
diff --git a/docs/userGuide/syntax/boxes.md b/docs/userGuide/syntax/boxes.md index a0a48cf55a..0b5340241e 100644 --- a/docs/userGuide/syntax/boxes.md +++ b/docs/userGuide/syntax/boxes.md @@ -217,7 +217,7 @@ Custom styles **(** `background-color`, `border-color`, `border-left-color`, `ic -\***\*Options\*\*** +****Options**** Name | Type | Default | Description --- | --- | --- | --- background-color | `String` | `null` | @@ -237,12 +237,12 @@ no-border | `Boolean` | `false` | Removes border, except if styled by `border-co no-background | `Boolean` | `false` | Removes background, except if styled by `background-color` option. no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `icon` option. +
```html warning ``` -
diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md index 94537b0901..d0d0b2216b 100644 --- a/docs/userGuide/syntax/panels.md +++ b/docs/userGuide/syntax/panels.md @@ -104,6 +104,7 @@ + **Show/Hide buttons using `no-switch`, `no-close`, or `no-minimized-switch`.** @@ -189,7 +190,7 @@ -\***\*Options\*\*** +****Options**** Name | Type | Default | Description --- | --- | --- | --- header{{slot_info_trigger}} | `String` | `''` | The clickable text on the Panel's header. Supports MarkDown text. @@ -247,5 +248,4 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S ... -
diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md index cbee445086..8720a66146 100644 --- a/docs/userGuide/syntax/tabs.md +++ b/docs/userGuide/syntax/tabs.md @@ -29,7 +29,7 @@ -\***\*Options\*\*** +****Options**** `tabs`: Name | Type | Default | Description @@ -65,7 +65,6 @@ Tabs, tab group and individual tab can be omitted during printing by adding Boot ``` -
diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index 04a57821b5..9b0a045343 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -14,13 +14,12 @@ Unexpected behavior can occur in rendered pages due to a number of different reasons. One of these reasons is when the rendered pages are not valid HTML. Incorrect HTML markup can be due to: - - nesting block-level elements inside `

` or `` elements - missing `` tags ###### Example: block-level elements inside `` elements - ```html + Animal | Trainable? | Price | Remarks :------|:----------:|------:|-------- Ants | no | 5 | Bees | no | 20 | Cats | yes | 100 | @@ -37,7 +36,6 @@ This is likely caused by incorrect HTML markup, for example nesting block-level or missing ``. Bailing hydration and performing full client-side render. ``` - See [SSR guide for Vue](https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) for more details on hydration mismatch. From 420ceba1fbf7340fd9485b45cc1c8ce45eb10eaa Mon Sep 17 00:00:00 2001 From: yiwen101 Date: Sat, 10 Feb 2024 11:27:52 +0800 Subject: [PATCH 08/19] Revert distracting changes by formatter2 --- docs/userGuide/syntax/badges.md | 2 +- docs/userGuide/syntax/panels.md | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md index 61c7d83d54..4da97b5e2a 100644 --- a/docs/userGuide/syntax/badges.md +++ b/docs/userGuide/syntax/badges.md @@ -61,6 +61,7 @@ Headings: %%{{ icon_info }} You can refer to [Bootstrap documentation](https://getbootstrap.com/docs/5.1/components/badge/) to find more information about Badges.%%

+
```markdown @@ -70,7 +71,6 @@ Headings: Difficulty Level 4 ``` -
diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md index d0d0b2216b..689512e51b 100644 --- a/docs/userGuide/syntax/panels.md +++ b/docs/userGuide/syntax/panels.md @@ -213,7 +213,6 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S ```html ... ``` -
From f2b511be1e04b1ba7c1d2f7090eebacef2ba1ad8 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sat, 10 Feb 2024 13:42:54 +0800 Subject: [PATCH 09/19] Migrate to codeAndOutput --- docs/userGuide/syntax/badges.md | 6 +++- docs/userGuide/syntax/boxes.md | 5 ++- docs/userGuide/syntax/panels.md | 4 +-- docs/userGuide/troubleshooting.md | 51 ++++++++++++++----------------- 4 files changed, 34 insertions(+), 32 deletions(-) diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md index 4da97b5e2a..93d6d80f46 100644 --- a/docs/userGuide/syntax/badges.md +++ b/docs/userGuide/syntax/badges.md @@ -5,7 +5,11 @@ Example: html -**Heading** +Some Plain Text + + + +**Some Markdown** diff --git a/docs/userGuide/syntax/boxes.md b/docs/userGuide/syntax/boxes.md index 0b5340241e..e2c8863cb2 100644 --- a/docs/userGuide/syntax/boxes.md +++ b/docs/userGuide/syntax/boxes.md @@ -8,7 +8,10 @@ plain text -_markdown_ + + + +_markdown_ diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md index 689512e51b..b48888f944 100644 --- a/docs/userGuide/syntax/panels.md +++ b/docs/userGuide/syntax/panels.md @@ -8,8 +8,8 @@ html - _markdown_ - plain text ... +_markdown_ +plain text ... diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index 9b0a045343..eafeac6999 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -50,42 +50,37 @@ A possible fix for the above situation is to wrap the table in a `
` element ##### Markdown Rendering Issues -If you encounter issues of failure in rendering markdown in a component, it is likely that the markdown is not being properly recognized due to syntax errors. Sign posting is required to inform markdown to parse content of a presentation component as markdown rather than plain text. +If you encounter issues in rendering Markdown in a component, it is likely that the Markdown is not being properly recognized due to syntax errors. Signposting is required to inform Markdown to parse the content of a presentation component as Markdown rather than plain text. -You could sign post markdown either by: +You could signpost Markdown either by: -- using the `markdown` tag +- using the `markdown`(block level elements) or `md`(inline level elements) tags - using an empty line without any indentation before the markdown content +Example: correct markdown rendering using Tags or newline: + +html + + - -Both using the `markdown` tag and adding line breaks will render the markdown content.Example: - -```html - **Hello World** -``` - -and +**Example1** + -```html - -**Hello World** + **Example2** -``` -will render as: + - -**Hello World** + **Example3** - - -If you do not sign post markdown, the content will be rendered as plain text. -Example: - - ```html - **Hello World** - ``` - will render as: - **Hello World** + + + + + +html + + **This will be rendered as plain text** + + \ No newline at end of file From eb6f783d21bce96fbe7c14dfc0d119f820c44cba Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:24:57 +0800 Subject: [PATCH 10/19] Updade doc --- docs/userGuide/troubleshooting.md | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index eafeac6999..7f86d178ed 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -21,8 +21,12 @@ Incorrect HTML markup can be due to: ```html - Animal | Trainable? | Price | Remarks :------|:----------:|------:|-------- - Ants | no | 5 | Bees | no | 20 | Cats | yes | 100 | + +Animal | Trainable? | Price | Remarks +:------|:----------:|------:|-------- +Ants | no | 5 | +Bees | no | 20 | +Cats | yes | 100 | ``` @@ -43,8 +47,12 @@ A possible fix for the above situation is to wrap the table in a `
` element ```html
- Animal | Trainable? | Price | Remarks :------|:----------:|------:|-------- - Ants | no | 5 | Bees | no | 20 | Cats | yes | 100 | + +Animal | Trainable? | Price | Remarks +:------|:----------:|------:|-------- +Ants | no | 5 | +Bees | no | 20 | +Cats | yes | 100 |
``` @@ -54,9 +62,9 @@ If you encounter issues in rendering Markdown in a component, it is likely that You could signpost Markdown either by: -- using the `markdown`(block level elements) or `md`(inline level elements) tags +- using the ``(block level elements) or ``(inline level elements) tags wrap the markdown content. - using an empty line without any indentation before the markdown content -Example: correct markdown rendering using Tags or newline: +Example: correct markdown rendering using tags or newline: html @@ -76,7 +84,7 @@ Example: correct markdown rendering using Tags or newline: - + html From 0cd7a61fa9f7e3e4184100985bd47d55745287c1 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:28:43 +0800 Subject: [PATCH 11/19] Update presentation.md --- docs/userGuide/components/presentation.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md index 44648a51e9..a9fd9c3da0 100644 --- a/docs/userGuide/components/presentation.md +++ b/docs/userGuide/components/presentation.md @@ -25,8 +25,7 @@ The components in this page are the core **presentational** components you may w As presentational components are HTML-based, you need to follow the HTML syntax when using markdown in the content of the components. More specifically, you should use either: - add a line break with no indentation before the markdown content -- use the `` or `` - tag to wrap the markdown content. +- use the `` (block level elements) or `` (inline level elements) tags to wrap the markdown content. For more information, please refer to this [section]({{baseUrl}}/userGuide/usingHtmlJavaScriptCss.html#markdown-in-html). From c81bb3d247faf898c998ebde5d150fca94247a14 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:30:09 +0800 Subject: [PATCH 12/19] Update ug --- docs/userGuide/syntax/badges.md | 6 +++--- docs/userGuide/syntax/boxes.md | 6 ++++-- docs/userGuide/syntax/panels.md | 6 +++++- docs/userGuide/syntax/tabs.md | 8 ++++++-- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md index 93d6d80f46..be89fe1314 100644 --- a/docs/userGuide/syntax/badges.md +++ b/docs/userGuide/syntax/badges.md @@ -1,6 +1,6 @@ ## Badges -Example: +**Example:** html @@ -9,11 +9,11 @@ Some Plain Text -**Some Markdown** +_Some Markdown_ -You can choose from a variety of colors for your badges. You can also use the `rounded-pill` class to make the badges pill-shaped. +**You can choose from a variety of colors for your badges. You can also use the `rounded-pill` class to make the badges pill-shaped.** html diff --git a/docs/userGuide/syntax/boxes.md b/docs/userGuide/syntax/boxes.md index e2c8863cb2..dd70699b2e 100644 --- a/docs/userGuide/syntax/boxes.md +++ b/docs/userGuide/syntax/boxes.md @@ -236,7 +236,7 @@ type | `String` | `''` | Supports: `info`, `warning`, `success`, `important`, `w theme | `String` | `''` | Supports: `primary`, `secondary`, `success`, `danger`, `warning`, `tip`, `light`, `dark` or empty for default. light | `Boolean` | `false` | Uses a light color scheme for the box. seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` is specified, this style will not be activated. -no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`. +no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`. no-background | `Boolean` | `false` | Removes background, except if styled by `background-color` option. no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `icon` option. @@ -244,7 +244,9 @@ no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `i
```html - warning + + warning + ```
diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md index b48888f944..465093fef5 100644 --- a/docs/userGuide/syntax/panels.md +++ b/docs/userGuide/syntax/panels.md @@ -211,7 +211,9 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S
```html - ... + + ... + ```
@@ -247,4 +249,6 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S ... + +
diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md index 8720a66146..ec97106c40 100644 --- a/docs/userGuide/syntax/tabs.md +++ b/docs/userGuide/syntax/tabs.md @@ -60,8 +60,12 @@ Tabs, tab group and individual tab can be omitted during printing by adding Boot Content of the first tab Contents of the second tab - Some stuff about stars ... - Some stuff about the moon ... + + Some stuff about stars ... + + + Some stuff about the moon ... + ``` From a282b015635d886ed8b7c505c8f87edc7d8b6596 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:32:51 +0800 Subject: [PATCH 13/19] Clean formatting error --- docs/userGuide/syntax/boxes.md | 2 +- docs/userGuide/syntax/panels.md | 2 +- docs/userGuide/syntax/tabs.md | 4 ++-- docs/userGuide/troubleshooting.md | 1 + 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/userGuide/syntax/boxes.md b/docs/userGuide/syntax/boxes.md index dd70699b2e..e7c78a8389 100644 --- a/docs/userGuide/syntax/boxes.md +++ b/docs/userGuide/syntax/boxes.md @@ -245,7 +245,7 @@ no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `i ```html - warning + warning ```
diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md index 465093fef5..1dd70d1f84 100644 --- a/docs/userGuide/syntax/panels.md +++ b/docs/userGuide/syntax/panels.md @@ -212,7 +212,7 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S ```html - ... + ... ```
diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md index ec97106c40..2494f0bef8 100644 --- a/docs/userGuide/syntax/tabs.md +++ b/docs/userGuide/syntax/tabs.md @@ -61,10 +61,10 @@ Tabs, tab group and individual tab can be omitted during printing by adding Boot Contents of the second tab - Some stuff about stars ... + Some stuff about stars ... - Some stuff about the moon ... + Some stuff about the moon ... diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index 7f86d178ed..6113173ab9 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -46,6 +46,7 @@ See [SSR guide for Vue](https://vuejs.org/guide/scaling-up/ssr.html#hydration-mi A possible fix for the above situation is to wrap the table in a `
` element instead: ```html +
Animal | Trainable? | Price | Remarks From 54e1d861342f46aaab82bc13b47074cfd4bf123b Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:41:32 +0800 Subject: [PATCH 14/19] Proof read --- docs/userGuide/components/presentation.md | 1 + docs/userGuide/syntax/badges.md | 3 ++- docs/userGuide/troubleshooting.md | 7 ++++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md index a9fd9c3da0..c743f81b59 100644 --- a/docs/userGuide/components/presentation.md +++ b/docs/userGuide/components/presentation.md @@ -26,6 +26,7 @@ As presentational components are HTML-based, you need to follow the HTML syntax More specifically, you should use either: - add a line break with no indentation before the markdown content - use the `` (block level elements) or `` (inline level elements) tags to wrap the markdown content. + For more information, please refer to this [section]({{baseUrl}}/userGuide/usingHtmlJavaScriptCss.html#markdown-in-html). diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md index be89fe1314..73f8a24692 100644 --- a/docs/userGuide/syntax/badges.md +++ b/docs/userGuide/syntax/badges.md @@ -13,6 +13,7 @@ Some Plain Text + **You can choose from a variety of colors for your badges. You can also use the `rounded-pill` class to make the badges pill-shaped.** html @@ -38,7 +39,7 @@ Normal: -You can use Badges in combination with headings, buttons, links, etc. +**You can use Badges in combination with headings, buttons, links, etc.** html diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index 6113173ab9..c3d0b1a79f 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -63,9 +63,10 @@ If you encounter issues in rendering Markdown in a component, it is likely that You could signpost Markdown either by: -- using the ``(block level elements) or ``(inline level elements) tags wrap the markdown content. +- using the ``(block level elements) or ``(inline level elements) tags to wrap the markdown content. - using an empty line without any indentation before the markdown content -Example: correct markdown rendering using tags or newline: + +###### Example: correct markdown rendering using tags or newline: html @@ -85,7 +86,7 @@ Example: correct markdown rendering using tags or newline: - + html From 1d9040640198e6a5b3460d19895b2c4aa97b8948 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:44:26 +0800 Subject: [PATCH 15/19] Improve formatting --- docs/userGuide/syntax/panels.md | 2 +- docs/userGuide/syntax/tabs.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md index 1dd70d1f84..485f52a67e 100644 --- a/docs/userGuide/syntax/panels.md +++ b/docs/userGuide/syntax/panels.md @@ -211,7 +211,7 @@ type | `String` | `light` | The type or color scheme of the panel (single).
S
```html - + ... ``` diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md index 2494f0bef8..8e8fa39e70 100644 --- a/docs/userGuide/syntax/tabs.md +++ b/docs/userGuide/syntax/tabs.md @@ -61,10 +61,10 @@ Tabs, tab group and individual tab can be omitted during printing by adding Boot Contents of the second tab - Some stuff about stars ... + Some stuff about stars ... - Some stuff about the moon ... + Some stuff about the moon ... From 2fc7094d62f42894ad4724cdb522e6932c082cf2 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:46:16 +0800 Subject: [PATCH 16/19] Improve format --- docs/userGuide/syntax/tabs.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md index 8e8fa39e70..1ceb2e8e75 100644 --- a/docs/userGuide/syntax/tabs.md +++ b/docs/userGuide/syntax/tabs.md @@ -57,8 +57,12 @@ Tabs, tab group and individual tab can be omitted during printing by adding Boot ```html - Content of the first tab - Contents of the second tab + + Content of the first tab + + + Contents of the second tab + Some stuff about stars ... From 15b65328ab30e4db8a860aad8f5d08b4c66af976 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:47:01 +0800 Subject: [PATCH 17/19] Improve format --- docs/userGuide/syntax/tabs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md index 1ceb2e8e75..e24ac2a048 100644 --- a/docs/userGuide/syntax/tabs.md +++ b/docs/userGuide/syntax/tabs.md @@ -58,10 +58,10 @@ Tabs, tab group and individual tab can be omitted during printing by adding Boot ```html - Content of the first tab + Content of the first tab - Contents of the second tab + Contents of the second tab From f7ca43f999c99584d69332a7f379330e9198b563 Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:57:21 +0800 Subject: [PATCH 18/19] Update troubleshooting.md --- docs/userGuide/troubleshooting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index c3d0b1a79f..5e5e8f4bcb 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -30,7 +30,7 @@ Cats | yes | 100 | ``` -The table specified by the markdown syntax above will be rendered as a block-level element, which will be included in a inline span element. This makes the HTML output invalid. +The table specified by the Markdown syntax above will be rendered as a block-level element, which will be included in a inline span element. This makes the HTML output invalid. @@ -64,7 +64,7 @@ If you encounter issues in rendering Markdown in a component, it is likely that You could signpost Markdown either by: - using the ``(block level elements) or ``(inline level elements) tags to wrap the markdown content. -- using an empty line without any indentation before the markdown content +- using an empty line without any indentation before the Markdown content ###### Example: correct markdown rendering using tags or newline: From ac5e734a716e4c351ea94d35d960e5a4b2b6afdc Mon Sep 17 00:00:00 2001 From: Wang Yiwen Date: Sun, 11 Feb 2024 11:58:13 +0800 Subject: [PATCH 19/19] Update troubleshooting.md --- docs/userGuide/troubleshooting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md index 5e5e8f4bcb..51048d2d39 100644 --- a/docs/userGuide/troubleshooting.md +++ b/docs/userGuide/troubleshooting.md @@ -63,10 +63,10 @@ If you encounter issues in rendering Markdown in a component, it is likely that You could signpost Markdown either by: -- using the ``(block level elements) or ``(inline level elements) tags to wrap the markdown content. +- using the ``(block level elements) or ``(inline level elements) tags to wrap the Markdown content. - using an empty line without any indentation before the Markdown content -###### Example: correct markdown rendering using tags or newline: +###### Example: correct Markdown rendering using tags or newline: html