Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

help: Document new formatting buttons. 

Updates icons and adds instructions for formatting text using the new
formatting buttons in the compose box.

Fixes #27850.
This commit is contained in:
David Rosa 2023-11-30 21:33:04 -08:00 committed by Tim Abbott
parent 8d5573b395
commit 6b94b1183f
16 changed files with 365 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
help/bulleted-lists.md
View File

@ -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**
(<i class="zulip-icon zulip-icon-unordered-list"></i>) icon at the
bottom of the compose box to insert list formatting.
!!! tip ""
You can also use the **Bulleted list**
(<i class="zulip-icon zulip-icon-unordered-list"></i>) icon
to remove existing list formatting from the current line or selected text.
{tab|via-markdown}
{!start-composing.md!}
@ -20,20 +36,6 @@
Pressing <kbd>Enter</kbd> 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** (<i class="fa fa-list-ul"></i>) icon at the
bottom of the compose box to insert list formatting.
!!! tip ""
You can also use the **Bulleted list** (<i class="fa fa-list-ul"></i>) icon
to remove existing list formatting from the current line or selected text.
{end_tabs}
## Examples

53
help/code-blocks.md
View File

@ -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** (<i class="zulip-icon zulip-icon-code"></i>) 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** (<i class="zulip-icon zulip-icon-code"></i>)
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!}

2
help/custom-emoji.md
View File

@ -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

39
help/emoji-and-emoticons.md
View File

@ -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** (<i class="zulip-icon zulip-icon-smile-bigger"></i>)
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** (<i class="fa fa-smile-o"></i>) 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!}

39
help/format-a-quote.md
View File

@ -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** (<i class="zulip-icon zulip-icon-quote"></i>) icon at the
bottom of the compose box to insert quote formatting.
!!! tip ""
You can also use the **Quote** (<i class="zulip-icon zulip-icon-quote"></i>)
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!}

50
help/format-your-message-using-markdown.md
View File

@ -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** (<i class="fa fa-list-ul"></i>)
You can also use the **Bulleted list**
(<i class="zulip-icon zulip-icon-unordered-list"></i>)
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** (<i class="fa fa-list-ol"></i>)
You can also use the **Numbered list**
(<i class="zulip-icon zulip-icon-ordered-list"></i>)
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 (<kbd>Ctrl</kbd> +
<kbd>Shift</kbd> + <kbd>L</kbd>) to insert a link.
[Learn more](/help/insert-a-link).
You can also use the **Link**
(<i class="zulip-icon zulip-icon-link"></i>)
button or a keyboard shortcut (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> +
<kbd>L</kbd>) 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** (<i class="zulip-icon zulip-icon-code"></i>)
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** (<i class="zulip-icon zulip-icon-math"></i>)
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** (<i class="zulip-icon zulip-icon-quote"></i>)
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**
(<i class="zulip-icon zulip-icon-spoiler"></i>) 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**
(<i class="zulip-icon zulip-icon-time"></i>) 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** (<i class="fa fa-question"></i>) icon at the bottom of
the compose box.
the **question mark** (<i class="zulip-icon zulip-icon-question"></i>) icon
at the bottom of the compose box.
{end_tabs}

30
help/global-times.md
View File

@ -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** (<i class="zulip-icon zulip-icon-time"></i>)
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 + <kbd>Enter</kbd>.
1. Click **Confirm** to insert the selected time.
{tab|via-markdown}
{!start-composing.md!}
1. Type `<time`, and click **Mention a time-zone-aware time**, or press
<kbd>Enter</kbd> to open the date picker.
1. Select the desired time by clicking with your mouse, or using the arrow
keys + <kbd>Enter</kbd>.
1. Click **Confirm** to insert the selected time.
{end_tabs}
## Examples
{!global-times-examples.md!}

6
help/include/emoji-and-emoticons-intro.md
View File

@ -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

40
help/insert-a-link.md
View File

@ -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 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
to insert link formatting.
{tab|via-compose-box-buttons}
{!start-composing.md!}
1. Select the text you want to linkify.
1. Click the **link** (<i class="zulip-icon zulip-icon-link"></i>) icon at the
bottom of the compose box.
1. Replace `url` with a valid URL.
!!! keyboard_tip ""
You can also use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
@ -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 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
to insert link formatting.
{tab|via-compose-box-buttons}
{!start-composing.md!}
1. Select the text you want to linkify.
1. Click the **link** (<i class="fa fa-link"></i>) icon at the
bottom of the compose box.
1. Replace `url` with a valid URL.
!!! keyboard_tip ""
You can also use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
@ -53,6 +49,10 @@
{end_tabs}
## Examples
{!links-examples.md!}
## Related articles
* [Message formatting](/help/format-your-message-using-markdown)

38
help/latex.md
View File

@ -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** (<i class="zulip-icon zulip-icon-math"></i>) 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** (<i class="zulip-icon zulip-icon-math"></i>)
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!}

30
help/numbered-lists.md
View File

@ -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**
(<i class="zulip-icon zulip-icon-ordered-list"></i>) icon at the
bottom of the compose box to insert list formatting.
!!! tip ""
You can also use the **Numbered list**
(<i class="zulip-icon zulip-icon-ordered-list"></i>) icon
to remove existing list formatting from the current line or selected text.
{tab|via-markdown}
{!start-composing.md!}
@ -19,20 +35,6 @@
Pressing <kbd>Enter</kbd> 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** (<i class="fa fa-list-ol"></i>) icon at the
bottom of the compose box to insert list formatting.
!!! tip ""
You can also use the **Numbered list** (<i class="fa fa-list-ol"></i>) icon
to remove existing list formatting from the current line or selected text.
{end_tabs}
## Examples

3
help/preview-your-message-before-sending.md
View File

@ -6,7 +6,8 @@
1. Write a message.
1. Click the **eye** (<i class="fa fa-eye"></i>) icon at the bottom of the compose box.
1. Click the **eye** (<i class="zulip-icon zulip-icon-preview"></i>) icon at
the bottom of the compose box.
{end_tabs}

6
help/share-and-upload-files.md
View File

@ -47,9 +47,9 @@ People reading the message can click on the preview to
{!start-composing.md!}
1. Click the **paperclip** (<i class="fa fa-paperclip"></i>) 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** (<i class="zulip-icon zulip-icon-attachment"></i>)
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)`.

39
help/spoilers.md
View File

@ -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** (<i class="zulip-icon zulip-icon-spoiler"></i>)
icon at the bottom of the compose box to insert spoiler formatting.
!!! tip ""
You can also use the **Spoiler**
(<i class="zulip-icon zulip-icon-spoiler"></i>) 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!}

12
help/start-a-call.md
View File

@ -8,9 +8,9 @@
{!start-composing.md!}
1. Click the **video camera** (<i class="fa fa-video-camera"></i>) icon at the
bottom of the compose box. This will insert a **Join video call.** link into
your message.
1. Click the **video camera** (<i class="zulip-icon zulip-icon-video-call"></i>)
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** (<i class="fa fa-phone"></i>) icon at the
bottom of the compose box. This will insert a **Join voice call.** link into
your message.
1. Click the **phone** (<i class="zulip-icon zulip-icon-voice-call"></i>) icon
at the bottom of the compose box. This will insert a **Join voice call.**
link into your message.
1. Send the message.

69
help/text-emphasis.md
View File

@ -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 <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
1. Click the **Bold** (<i class="zulip-icon zulip-icon-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.
{tab|via-markdown}
{!start-composing.md!}
1. To make text bold, use double asterisks (`**`) around the text: `**text**`.
!!! keyboard_tip ""
You can also use <kbd>Ctrl</kbd> + <kbd>B</kbd> 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 <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.
1. Click the **Italic** (<i class="zulip-icon zulip-icon-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.
{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**
(<i class="zulip-icon zulip-icon-strikethrough"></i>) 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)