From 6b94b1183fad67b7914c8829a942d5637902fd60 Mon Sep 17 00:00:00 2001 From: David Rosa Date: Thu, 30 Nov 2023 21:33:04 -0800 Subject: [PATCH] help: Document new formatting buttons. Updates icons and adds instructions for formatting text using the new formatting buttons in the compose box. Fixes #27850. --- help/bulleted-lists.md | 30 ++++----- help/code-blocks.md | 53 ++++++++++++++++ help/custom-emoji.md | 2 +- help/emoji-and-emoticons.md | 39 ++++++------ help/format-a-quote.md | 39 ++++++++++++ help/format-your-message-using-markdown.md | 50 ++++++++++++--- help/global-times.md | 30 +++++++++ help/include/emoji-and-emoticons-intro.md | 6 +- help/insert-a-link.md | 40 ++++++------ help/latex.md | 38 ++++++++++++ help/numbered-lists.md | 30 ++++----- help/preview-your-message-before-sending.md | 3 +- help/share-and-upload-files.md | 6 +- help/spoilers.md | 39 ++++++++++++ help/start-a-call.md | 12 ++-- help/text-emphasis.md | 69 ++++++++++++--------- 16 files changed, 365 insertions(+), 121 deletions(-) diff --git a/help/bulleted-lists.md b/help/bulleted-lists.md index 4962ce0f2b..eec5e5d595 100644 --- a/help/bulleted-lists.md +++ b/help/bulleted-lists.md @@ -6,6 +6,22 @@ {start_tabs} +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. _(optional)_ Select the text you want to format. + +1. Click the **Bulleted list** + () icon at the + bottom of the compose box to insert list formatting. + +!!! tip "" + + You can also use the **Bulleted list** + () icon + to remove existing list formatting from the current line or selected text. + {tab|via-markdown} {!start-composing.md!} @@ -20,20 +36,6 @@ Pressing Enter on a blank list item will remove the list formatting on the current line. -{tab|via-compose-box-buttons} - -{!start-composing.md!} - -1. _(optional)_ Select the text you want to format. - -1. Click the **Bulleted list** () icon at the - bottom of the compose box to insert list formatting. - -!!! tip "" - - You can also use the **Bulleted list** () icon - to remove existing list formatting from the current line or selected text. - {end_tabs} ## Examples diff --git a/help/code-blocks.md b/help/code-blocks.md index c8c00467f9..d55791566d 100644 --- a/help/code-blocks.md +++ b/help/code-blocks.md @@ -2,6 +2,59 @@ {!code-blocks-intro.md!} +## Insert code formatting + +{start_tabs} + +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. _(optional)_ Select the text you want to format. + +1. Click the **Code** () icon at the + bottom of the compose box to insert code formatting. The appropriate inline + or block formatting will be applied automatically depending on whether you + selected a whole line, part of a line, or multiple lines. + +!!! tip "" + + You can also use the **Code** () + icon to remove existing code formatting from the selected text. + +{tab|via-markdown} + +{!start-composing.md!} + +1. To create an inline code span, use single backticks around the text: +~~~ +`text` +~~~ + To create a code block, use triple backticks around the text: +~~~ +``` +def f(x): + return x+1 +``` +~~~ + To enable syntax highlighting, use triple backticks followed by one or more + letters, and select the desired programming language from the auto-complete + suggestions. +~~~ +```python +def fib(n): + # TODO: base case + return fib(n-1) + fib(n-2) +``` +~~~ + +!!! tip "" + + You can also use `~~~` to start code blocks, or just indent the code 4 or more + spaces. + +{end_tabs} + ## Examples {!code-blocks-examples.md!} diff --git a/help/custom-emoji.md b/help/custom-emoji.md index ca6a24c6a2..135c2ed9ce 100644 --- a/help/custom-emoji.md +++ b/help/custom-emoji.md @@ -42,7 +42,7 @@ emoji. Using REST API endpoints requires some technical expertise; You can replace a default emoji by adding a custom emoji of the same name. If an emoji has several names, you must use the emoji's primary name to replace it. You can find the primary name of an emoji by hovering over it -in the [emoji picker](/help/emoji-and-emoticons#select-an-emoji-from-the-emoji-picker), +in the [emoji picker](/help/emoji-and-emoticons#use-an-emoji-in-your-message), while the search box is empty (you may have to scroll down a bit to find it). ## Deactivate custom emoji diff --git a/help/emoji-and-emoticons.md b/help/emoji-and-emoticons.md index b307d6774b..a14df7fd9a 100644 --- a/help/emoji-and-emoticons.md +++ b/help/emoji-and-emoticons.md @@ -8,10 +8,20 @@ ## Use an emoji in your message -### Enter an emoji name - {start_tabs} +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. Click the **smiley face** () + icon at the bottom of the compose box. + +1. Select an emoji. You can type to search, use the arrow keys, or click on + an emoji with your mouse. + +{tab|via-markdown} + {!start-composing.md!} 1. Type `:`, followed by a few letters from the emoji name, to see autocomplete @@ -21,6 +31,12 @@ 1. Type the full emoji name followed by `:`, or select an emoji from the list of suggestions. +{tab|via-paste} + +{!start-composing.md!} + +1. Paste an emoji copied from outside of Zulip directly into the compose box. + {end_tabs} !!! tip "" @@ -28,20 +44,6 @@ You can hover over an emoji in the emoji picker, a message, or an [emoji reaction](/help/emoji-reactions) to learn its name. -### Select an emoji from the emoji picker - -{start_tabs} - -{!start-composing.md!} - -1. Click the **smiley face** () icon at the - bottom of the compose box. - -1. Select an emoji. You can type to search, use the arrow keys, or click on - an emoji with your mouse. - -{end_tabs} - ### Use an emoticon You can configure Zulip to convert emoticons into emoji, so that, e.g., `:)` @@ -64,11 +66,6 @@ will be displayed as The list of supported emoticons is available [here](/help/configure-emoticon-translations). -### Paste an emoji - -You can paste an emoji copied from outside of Zulip directly into the compose -box. - ## Examples {!emoji-and-emoticons-examples.md!} diff --git a/help/format-a-quote.md b/help/format-a-quote.md index 70473bdc17..d8491f0368 100644 --- a/help/format-a-quote.md +++ b/help/format-a-quote.md @@ -2,6 +2,45 @@ {!quotes-intro.md!} +## Insert quote formatting + +{start_tabs} + +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. _(optional)_ Select the text you want to format. + +1. Click the **Quote** () icon at the + bottom of the compose box to insert quote formatting. + +!!! tip "" + + You can also use the **Quote** () + icon to remove existing quote formatting from the selected text. + +{tab|via-markdown} + +{!start-composing.md!} + +1. To create a multi-line quote, type `>` followed by a space and some text: +~~~ +> a multi-line +quote on two lines +~~~ + To create a multi-paragraph quote, use triple backticks and the word quote + (````quote`) followed by some text and triple backticks at the end: +~~~ +```quote +A multi-paragraph + +quote in two paragraphs +``` +~~~ + +{end_tabs} + ## Examples {!quotes-examples.md!} diff --git a/help/format-your-message-using-markdown.md b/help/format-your-message-using-markdown.md index 5304d87d96..f2889647d9 100644 --- a/help/format-your-message-using-markdown.md +++ b/help/format-your-message-using-markdown.md @@ -9,9 +9,9 @@ formatting, such as using `*` at the start of a line in a bulleted list, or around text to indicate emphasis. This page provides an overview of all the formatting available in Zulip. There -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. +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. * [Text emphasis](#text-emphasis) * [Bulleted lists](#bulleted-lists) @@ -49,7 +49,8 @@ whenever you need a reminder of the formatting syntax below. !!! tip "" - You can also use the **Bulleted list** () + You can also use the **Bulleted list** + () button in the compose box to insert bulleted list formatting. [Learn more](/help/bulleted-lists). @@ -61,7 +62,8 @@ whenever you need a reminder of the formatting syntax below. !!! tip "" - You can also use the **Numbered list** () + You can also use the **Numbered list** + () button in the compose box to insert numbered list formatting. [Learn more](/help/numbered-lists). @@ -73,9 +75,10 @@ whenever you need a reminder of the formatting syntax below. !!! tip "" - You can also use a button or a keyboard shortcut (Ctrl + - Shift + L) to insert a link. - [Learn more](/help/insert-a-link). + You can also use the **Link** + () + button or a keyboard shortcut (Ctrl + Shift + + L) to insert a link. [Learn more](/help/insert-a-link). ## Code blocks @@ -83,12 +86,24 @@ whenever you need a reminder of the formatting syntax below. {!code-blocks-examples.md!} +!!! tip "" + + You can also use the **Code** () + button in the compose box to insert code formatting. + [Learn more](/help/code-blocks). + ## LaTeX {!latex-intro.md!} {!latex-examples.md!} +!!! tip "" + + You can also use the **LaTeX** () + button in the compose box to insert LaTeX formatting. + [Learn more](/help/latex). + ## Quotes {!quotes-intro.md!} @@ -99,6 +114,9 @@ whenever you need a reminder of the formatting syntax below. There is a handy option to [quote and reply](/help/quote-and-reply) to a message in Zulip. + You can also use the **Quote** () + button in the compose box to insert quote formatting. + [Learn more](/help/format-a-quote). ## Spoilers @@ -106,6 +124,12 @@ whenever you need a reminder of the formatting syntax below. {!spoilers-examples.md!} +!!! tip "" + + You can also use the **Spoiler** + () button in the compose + box to insert spoiler formatting. [Learn more](/help/spoilers). + ## Emoji and emoticons {!emoji-and-emoticons-intro.md!} @@ -130,6 +154,12 @@ whenever you need a reminder of the formatting syntax below. {!global-times-examples.md!} +!!! tip "" + + You can also use the **Add global time** + () button in the compose + box to select a time from the date picker. [Learn more](/help/global-times). + ## Tables {!tables-intro.md!} @@ -161,8 +191,8 @@ A summary of the formatting syntax above is available in the Zulip app. !!! tip "" You can also [open the compose box](/help/open-the-compose-box), and click - the **question mark** () icon at the bottom of - the compose box. + the **question mark** () icon + at the bottom of the compose box. {end_tabs} diff --git a/help/global-times.md b/help/global-times.md index fb01eaf99c..faf15b4083 100644 --- a/help/global-times.md +++ b/help/global-times.md @@ -2,6 +2,36 @@ {!global-times-intro.md!} +## Insert a time + +{start_tabs} + +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. Click the **Add global time** () + icon at the bottom of the compose box to open the date picker. + +1. Select the desired time by clicking with your mouse, or using the arrow + keys + Enter. + +1. Click **Confirm** to insert the selected time. + +{tab|via-markdown} + +{!start-composing.md!} + +1. Type `Enter to open the date picker. + +1. Select the desired time by clicking with your mouse, or using the arrow + keys + Enter. + +1. Click **Confirm** to insert the selected time. + +{end_tabs} + ## Examples {!global-times-examples.md!} diff --git a/help/include/emoji-and-emoticons-intro.md b/help/include/emoji-and-emoticons-intro.md index c1b2f2d38d..b096d92896 100644 --- a/help/include/emoji-and-emoticons-intro.md +++ b/help/include/emoji-and-emoticons-intro.md @@ -1,14 +1,14 @@ There are several ways to use an emoji in your message: -- [Enter an emoji name](/help/emoji-and-emoticons#enter-an-emoji-name) +- [Enter an emoji name](/help/emoji-and-emoticons#use-an-emoji-in-your-message) surrounded by `:`, with help from autocomplete suggestions. - [Select an emoji from the emoji - picker](/help/emoji-and-emoticons#select-an-emoji-from-the-emoji-picker) + picker](/help/emoji-and-emoticons#use-an-emoji-in-your-message) - [Use an emoticon](/help/emoji-and-emoticons#use-an-emoticon) -- [Paste an emoji](/help/emoji-and-emoticons#paste-an-emoji) +- [Paste an emoji](/help/emoji-and-emoticons#use-an-emoji-in-your-message) You can [add custom emoji](/help/custom-emoji) for your organization. Like default emoji, custom emoji can be entered into the compose box by name, or diff --git a/help/insert-a-link.md b/help/insert-a-link.md index 1509ac1b00..d500083404 100644 --- a/help/insert-a-link.md +++ b/help/insert-a-link.md @@ -2,10 +2,6 @@ {!links-intro.md!} -## Examples - -{!links-examples.md!} - ## Insert a link {start_tabs} @@ -18,6 +14,22 @@ 1. Paste a URL to turn the selected text into a named link. +!!! keyboard_tip "" + + You can also use Ctrl + Shift + L + to insert link formatting. + +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. Select the text you want to linkify. + +1. Click the **link** () icon at the + bottom of the compose box. + +1. Replace `url` with a valid URL. + !!! keyboard_tip "" You can also use Ctrl + Shift + L @@ -30,22 +42,6 @@ 1. To create a named link, use `[ ]` around the link text, and `( )` around the URL: `[Link text](URL)`. -!!! keyboard_tip "" - - You can also use Ctrl + Shift + L - to insert link formatting. - -{tab|via-compose-box-buttons} - -{!start-composing.md!} - -1. Select the text you want to linkify. - -1. Click the **link** () icon at the - bottom of the compose box. - -1. Replace `url` with a valid URL. - !!! keyboard_tip "" You can also use Ctrl + Shift + L @@ -53,6 +49,10 @@ {end_tabs} +## Examples + +{!links-examples.md!} + ## Related articles * [Message formatting](/help/format-your-message-using-markdown) diff --git a/help/latex.md b/help/latex.md index 791b7d357e..8ad1ff27c0 100644 --- a/help/latex.md +++ b/help/latex.md @@ -2,6 +2,44 @@ {!latex-intro.md!} +## Insert LaTeX formatting + +{start_tabs} + +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. _(optional)_ Select the text you want to format. + +1. Click the **LaTeX** () icon at the + bottom of the compose box to insert LaTeX formatting. The appropriate inline + or block formatting will be applied automatically depending on whether you + selected a whole line, part of a line, or multiple lines. + +!!! tip "" + + You can also use the **LaTeX** () + icon to remove existing LaTeX formatting from the selected text. + +{tab|via-markdown} + +{!start-composing.md!} + +1. To use inline LaTeX, use double dollar signs (`$$`) around the text: +~~~ +$$O(n^2)$$ +~~~ + To use displayed LaTeX, use triple backticks and the word math + (````math`) followed by some text and triple backticks at the end: +~~~ +``` math +\int_a^b f(t)\, dt = F(b) - F(a) +``` +~~~ + +{end_tabs} + ## Examples {!latex-examples.md!} diff --git a/help/numbered-lists.md b/help/numbered-lists.md index a20db8cebb..c6a56285af 100644 --- a/help/numbered-lists.md +++ b/help/numbered-lists.md @@ -6,6 +6,22 @@ {start_tabs} +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. _(optional)_ Select the text you want to format. + +1. Click the **Numbered list** + () icon at the + bottom of the compose box to insert list formatting. + +!!! tip "" + + You can also use the **Numbered list** + () icon + to remove existing list formatting from the current line or selected text. + {tab|via-markdown} {!start-composing.md!} @@ -19,20 +35,6 @@ Pressing Enter on a blank list item will remove the list formatting on the current line. -{tab|via-compose-box-buttons} - -{!start-composing.md!} - -1. _(optional)_ Select the text you want to format. - -1. Click the **Numbered list** () icon at the - bottom of the compose box to insert list formatting. - -!!! tip "" - - You can also use the **Numbered list** () icon - to remove existing list formatting from the current line or selected text. - {end_tabs} ## Examples diff --git a/help/preview-your-message-before-sending.md b/help/preview-your-message-before-sending.md index afb0f6bb7d..4359d7cc7b 100644 --- a/help/preview-your-message-before-sending.md +++ b/help/preview-your-message-before-sending.md @@ -6,7 +6,8 @@ 1. Write a message. -1. Click the **eye** () icon at the bottom of the compose box. +1. Click the **eye** () icon at + the bottom of the compose box. {end_tabs} diff --git a/help/share-and-upload-files.md b/help/share-and-upload-files.md index db210f99dc..c123d4c0e9 100644 --- a/help/share-and-upload-files.md +++ b/help/share-and-upload-files.md @@ -47,9 +47,9 @@ People reading the message can click on the preview to {!start-composing.md!} -1. Click the **paperclip** () icon at - the bottom of the compose box to select one or more files. Zulip will upload - the files, and insert named links using +1. Click the **paperclip** () + icon at the bottom of the compose box to select one or more files. + Zulip will upload the files, and insert named links using [Markdown formatting](/help/format-your-message-using-markdown#links): `[Link text](URL)`. diff --git a/help/spoilers.md b/help/spoilers.md index 916de32cd4..358d83a6b0 100644 --- a/help/spoilers.md +++ b/help/spoilers.md @@ -2,6 +2,45 @@ {!spoilers-intro.md!} +## Insert spoiler formatting + +{start_tabs} + +{tab|via-compose-box-buttons} + +{!start-composing.md!} + +1. _(optional)_ Select the text you want to format. + +1. Click the **Spoiler** () + icon at the bottom of the compose box to insert spoiler formatting. + +!!! tip "" + + You can also use the **Spoiler** + () icon + to remove existing spoiler formatting from the selected text. + +{tab|via-markdown} + +{!start-composing.md!} + +1. To create a spoiler section, use triple backticks and the word spoiler + (````spoiler`) followed by an optional spoiler heading, some text, and triple + backticks at the end: +~~~ +```spoiler The spoiler heading +This content is initially hidden. +``` +~~~ + +!!! tip "" + + A message can contain both spoilers and other content, and you can combine + spoilers with other formatting. + +{end_tabs} + ## Examples {!spoilers-examples.md!} diff --git a/help/start-a-call.md b/help/start-a-call.md index 468493ed62..991bfe3f8e 100644 --- a/help/start-a-call.md +++ b/help/start-a-call.md @@ -8,9 +8,9 @@ {!start-composing.md!} -1. Click the **video camera** () icon at the - bottom of the compose box. This will insert a **Join video call.** link into - your message. +1. Click the **video camera** () + icon at the bottom of the compose box. This will insert a **Join video call.** + link into your message. 1. Send the message. @@ -52,9 +52,9 @@ {!start-composing.md!} -1. Click the **phone** () icon at the - bottom of the compose box. This will insert a **Join voice call.** link into - your message. +1. Click the **phone** () icon + at the bottom of the compose box. This will insert a **Join voice call.** + link into your message. 1. Send the message. diff --git a/help/text-emphasis.md b/help/text-emphasis.md index f2861e257e..0b6a7c1de5 100644 --- a/help/text-emphasis.md +++ b/help/text-emphasis.md @@ -2,33 +2,29 @@ {!emphasis-intro.md!} -## Examples - -{!emphasis-examples.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 Ctrl + B to insert bold formatting. - {tab|via-compose-box-buttons} {!start-composing.md!} 1. Select the text you want to format. -1. Click the **Bold** () icon at the +1. Click the **Bold** () icon at the bottom of the compose box. +!!! keyboard_tip "" + + You can also use Ctrl + B to insert bold formatting. + +{tab|via-markdown} + +{!start-composing.md!} + +1. To make text bold, use double asterisks (`**`) around the text: `**text**`. + !!! keyboard_tip "" You can also use Ctrl + B to insert bold formatting. @@ -39,24 +35,24 @@ {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 Ctrl + I to insert italic formatting. - {tab|via-compose-box-buttons} {!start-composing.md!} 1. Select the text you want to format. -1. Click the **Italic** () icon at the - bottom of the compose box. +1. Click the **Italic** () icon at + the bottom of the compose box. + +!!! keyboard_tip "" + + You can also use Ctrl + I to insert italic formatting. + +{tab|via-markdown} + +{!start-composing.md!} + +1. To make text italic, use single asterisks (`*`) around the text: `*text*`. !!! keyboard_tip "" @@ -68,12 +64,29 @@ {start_tabs} +{tab|via-compose-box-buttons} + {!start-composing.md!} -1. Surround your text with two tildes (`~~`) to apply strikethrough formatting. +1. Select the text you want to format. + +1. Click the **Strikethrough** + () icon at the + bottom of the compose box. + +{tab|via-markdown} + +{!start-composing.md!} + +1. To apply strikethrough formatting, use two tildes (`~~`) around the text: + `~~text~~`. {end_tabs} +## Examples + +{!emphasis-examples.md!} + ## Related articles * [Message formatting](/help/format-your-message-using-markdown)