From f783e8b6cac8466393d23ae1c853675765282a20 Mon Sep 17 00:00:00 2001
From: David Rosa <rosatamsen@gmail.com>
Date: Thu, 9 Mar 2023 21:54:05 -0700
Subject: [PATCH] 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 | 15 ++---
 help/include/emphasis.md                   | 12 ++++
 help/include/sidebar_index.md              |  1 +
 help/text-emphasis.md                      | 77 ++++++++++++++++++++++
 zerver/lib/markdown/tabbed_sections.py     |  2 +
 5 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 help/include/emphasis.md
 create mode 100644 help/text-emphasis.md

diff --git a/help/format-your-message-using-markdown.md b/help/format-your-message-using-markdown.md
index adb68cb393..53cdb5448c 100644
--- a/help/format-your-message-using-markdown.md
+++ b/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
 
-```
-**bold**, *italic*, and ~~strikethrough~~ text
-***~~All three at once~~***
-```
-
-![Markdown emphasis](/static/images/help/markdown-emphasis.png)
+{!emphasis.md!}
 
+!!! 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
 
diff --git a/help/include/emphasis.md b/help/include/emphasis.md
new file mode 100644
index 0000000000..1933873f62
--- /dev/null
+++ b/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)
diff --git a/help/include/sidebar_index.md b/help/include/sidebar_index.md
index fbbe26d791..c9eb3989bc 100644
--- a/help/include/sidebar_index.md
+++ b/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)
diff --git a/help/text-emphasis.md b/help/text-emphasis.md
new file mode 100644
index 0000000000..0945f0a669
--- /dev/null
+++ b/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)
diff --git a/zerver/lib/markdown/tabbed_sections.py b/zerver/lib/markdown/tabbed_sections.py
index 99e35ab2fb..0ed3ebbe10 100644
--- a/zerver/lib/markdown/tabbed_sections.py
+++ b/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",
 }