help: Add a dedicated page on how to add emphasis to text.

- Adds "Via Markdown" instructions block.
- Adds "Via compose box buttons" instructions block.

Fixes part of #24209.

help/format-your-message-using-markdown.md

@@ -13,7 +13,7 @@ is a convenient [**message formatting
 reference**](#message-formatting-reference) in the Zulip app that you can use
 whenever you need a reminder of the formatting syntax below.
 
-* [Emphasis](#emphasis)
+* [Text emphasis](#text-emphasis)
 * [Lists](#lists)
 * [Links and images](#links)
 * [Code blocks](#code)
@@ -28,15 +28,14 @@ whenever you need a reminder of the formatting syntax below.
 * [To-do lists](#to-do-lists)
 * [Paragraphs and lines](#paragraphs-and-lines)
 
-## Emphasis
+## Text emphasis
 
-```
+{!emphasis.md!}
-**bold**, *italic*, and ~~strikethrough~~ text
-***~~All three at once~~***
-```
-
-![Markdown emphasis](/static/images/help/markdown-emphasis.png)
 
+!!! tip ""
+    You can also use buttons or keyboard shortcuts (<kbd>Ctrl</kbd> +
+    <kbd>B</kbd> or <kbd>Ctrl</kbd> + <kbd>I</kbd>) to make text bold or italic.
+    [Learn more](/help/text-emphasis).
 
 ## Lists
 

help/include/emphasis.md

@@ -0,0 +1,12 @@
+In Zulip, you can make text bold or italic, or cross it out with strikethrough.
+
+### What you type
+
+```
+**bold**, *italic*, and ~~strikethrough~~ text
+***~~All three at once~~***
+```
+
+### What it looks like
+
+![Markdown emphasis](/static/images/help/markdown-emphasis.png)

help/include/sidebar_index.md

@@ -62,6 +62,7 @@
 * [Emoji and emoticons](/help/emoji-and-emoticons)
 * [Share and upload files](/help/share-and-upload-files)
 * [Add GIFs in your message](/help/animated-gifs-from-giphy)
+* [Text emphasis](/help/text-emphasis)
 * [Code blocks](/help/code-blocks)
 * [Create a poll](/help/create-a-poll)
 * [Start a video call](/help/start-a-call)

help/text-emphasis.md

@@ -0,0 +1,77 @@
+# Text emphasis
+
+{!emphasis.md!}
+
+## Making text bold
+
+{start_tabs}
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. Surround your text with double asterisks (`**`) to make it bold.
+
+!!! keyboard_tip ""
+
+    You can also use <kbd>Ctrl</kbd> + <kbd>B</kbd> to insert bold formatting.
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. Select the text you want to format.
+
+1. Click the **Bold** (<i class="fa fa-bold"></i>) icon at the
+   bottom of the compose box.
+
+!!! keyboard_tip ""
+
+    You can also use <kbd>Ctrl</kbd> + <kbd>B</kbd> to insert bold formatting.
+
+{end_tabs}
+
+## Making text italic
+
+{start_tabs}
+
+{tab|via-markdown}
+
+{!start-composing.md!}
+
+1. Surround your text with single asterisks (`*`) to make it italic.
+
+!!! keyboard_tip ""
+
+    You can also use <kbd>Ctrl</kbd> + <kbd>I</kbd> to insert italic formatting.
+
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. Select the text you want to format.
+
+1. Click the **Italic** (<i class="fa fa-italic"></i>) icon at the
+   bottom of the compose box.
+
+!!! keyboard_tip ""
+
+    You can also use <kbd>Ctrl</kbd> + <kbd>I</kbd> to insert italic formatting.
+
+{end_tabs}
+
+## Applying strikethrough formatting
+
+{start_tabs}
+
+{!start-composing.md!}
+
+1. Surround your text with two tildes (`~~`) to apply strikethrough formatting.
+
+{end_tabs}
+
+## Related articles
+
+* [Message formatting](/help/format-your-message-using-markdown)
+* [Preview messages before sending](/help/preview-your-message-before-sending)
+* [Resize the compose box](/help/resize-the-compose-box)

zerver/lib/markdown/tabbed_sections.py

@@ -93,6 +93,8 @@ TAB_SECTION_LABELS = {
     "user": "User",
     "bot": "Bot",
     "on-sign-up": "On sign-up",
+    "via-markdown": "Via Markdown",
+    "via-compose-box-buttons": "Via compose box buttons",
 }