Difference between revisions of "Discord/formatting"

from HTYP, the free directory anyone can edit if they can prove to me that they're not a spambot
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{fmt/title|Discord text formatting/markup}}
 
{{fmt/title|Discord text formatting/markup}}
Text formatting is similar to a subset of [[Markdown]], although there are differences:
+
Text formatting is similar to a subset of [[Markdown]], although there are differences. Here's what works that we're currently aware of.
 +
==Inline==
 
* '''bold''' is <code>**two asterisks**</code>
 
* '''bold''' is <code>**two asterisks**</code>
 
* ''italic'' is <code>*one asterisk*</code> or <code>_one underscore_</code>
 
* ''italic'' is <code>*one asterisk*</code> or <code>_one underscore_</code>
Line 9: Line 10:
 
** You can use this format to paste [[URL]]s without them becoming links or displaying a preview.
 
** You can use this format to paste [[URL]]s without them becoming links or displaying a preview.
 
** There's a better way to just suppress previews, however: see [[#Previews]].
 
** There's a better way to just suppress previews, however: see [[#Previews]].
 +
** There's also a markup for multiple lines of code, with optional syntax highlighting: see Sections below.
 +
* <code>&gt; </code> (right-angle plus a space) will cause the following paragraph to be indented with a vertical bar
 +
* spoiler text is <code>||two pipes||</code>: this causes the text to be obscured until clicked on (similar to {{spoiler|this}} but requiring a click rather than mouse-hover)
 +
* links with specified text can be done like this: <tt>[a link to HTYP](https://htyp.org)</tt> produces [https://htyp.org a link to HTYP]
 +
 +
To display characters that would otherwise be treated as formatting, escape them with a backslash:
 +
* <code>\*</code> will display as <code>*</code>
 +
* <code>\_</code> will display as <code>_</code>
 +
* <s>This does not seem to work with backticks (<code>`</code>), however.</s> This appears to have been a bug which is now fixed.
 +
 +
It looks like escaping an emoji code (like this: "\:smile:") will use the native Unicode emoji instead of Discord's emoji image. The emoji won't appear until the line is sent.
 +
==Sections / Text Blocks==
 
* multiple lines of code can be started with three backticks at the beginning of a line:
 
* multiple lines of code can be started with three backticks at the beginning of a line:
 
  ```
 
  ```
Line 18: Line 31:
 
  php code...
 
  php code...
 
  ```
 
  ```
* <code>&gt; </code> (right-angle plus a space) will cause the following paragraph to be indented with a vertical bar
+
* Section headers can be displayed like this:
* spoiler text is <code>||two pipes||</code>: this causes the text to be obscured until clicked on (similar to {{spoiler|this}} but requiring a click rather than mouse-hover)
+
# header 1
 +
## header 2
 +
### header 3
 +
Header 3 is smallest. In my tests, header 3 is just slightly larger than normal text and bolded; all 3 used used the same sans-serif font.
  
To display characters that would otherwise be treated as formatting, escape them with a backslash:
+
* Itemized lists use an initial "*" or "-", with two spaces of indentation to indent the resulting list:
* <code>\*</code> will display as <code>*</code>
+
* item 1
* <code>\_</code> will display as <code>_</code>
+
* item 2
* <s>This does not seem to work with backticks (<code>`</code>), however.</s> This appears to have been a bug which is now fixed.
+
  * item 2a
 +
  * item 2b
 +
* item 3
  
It looks like escaping an emoji code (like this: "\:smile:") will use the native Unicode emoji instead of Discord's emoji image. The emoji won't appear until the line is sent.
+
...renders like this:
 +
* item 1
 +
* item 2
 +
** item 2a
 +
** item 2b
 +
* item 3
 
==Previews==
 
==Previews==
 
To display a link without Discord also inserting a preview, surround the URL with angle brackets: &lt;<nowiki>https://htyp.org</nowiki>&gt;. The angle brackets will not be displayed, and preview will be suppressed, but the URL will be presented as a link.
 
To display a link without Discord also inserting a preview, surround the URL with angle brackets: &lt;<nowiki>https://htyp.org</nowiki>&gt;. The angle brackets will not be displayed, and preview will be suppressed, but the URL will be presented as a link.
 +
* This also works within formatted links: the angle-brackets still go around the URL, not the whole expression -- like this: <tt>[a previewless link](&lt;https://htyp.org&gt;)</tt>
 
* Discord's settings refer to the preview as an "embedded link". Previews of links pasted into a discussion can be turned off by revoking this privilege.
 
* Discord's settings refer to the preview as an "embedded link". Previews of links pasted into a discussion can be turned off by revoking this privilege.
 
* As of 2022-06-28, this seems to not work on iOS.
 
* As of 2022-06-28, this seems to not work on iOS.
 +
 
==Live Time==
 
==Live Time==
 
* <code><t:{{arg|UNIX time}}:{{arg|format character}}></code>
 
* <code><t:{{arg|UNIX time}}:{{arg|format character}}></code>
Line 49: Line 74:
 
** escapes emoji (haven't had time to explore in order to describe it precisely)
 
** escapes emoji (haven't had time to explore in order to describe it precisely)
 
** block indent, but only when pasting (?)
 
** block indent, but only when pasting (?)
 +
==Links==
 +
* Discord Support: [https://support.discord.com/hc/en-us/articles/210298617-Markdown-Text-101-Chat-Formatting-Bold-Italic-Underline- Markdown Text 101 (Chat Formatting: Bold, Italic, Underline)]

Latest revision as of 19:16, 2 February 2024

Discord text formatting/markup

Text formatting is similar to a subset of Markdown, although there are differences. Here's what works that we're currently aware of.

Inline

  • bold is **two asterisks**
  • italic is *one asterisk* or _one underscore_
    • They are rendered exactly the same (using <em>) but parsed differently: "a*b*c" becomes abc but a_b_c is left unformatted.
  • underline is __two underscores__
  • strike is ~~two tildes~~
  • code (fixed-pitch inline unformatted text) is `backticks`
    • You can use this format to paste URLs without them becoming links or displaying a preview.
    • There's a better way to just suppress previews, however: see #Previews.
    • There's also a markup for multiple lines of code, with optional syntax highlighting: see Sections below.
  • > (right-angle plus a space) will cause the following paragraph to be indented with a vertical bar
  • spoiler text is ||two pipes||: this causes the text to be obscured until clicked on (similar to this but requiring a click rather than mouse-hover)
  • links with specified text can be done like this: [a link to HTYP](https://htyp.org) produces a link to HTYP

To display characters that would otherwise be treated as formatting, escape them with a backslash:

  • \* will display as *
  • \_ will display as _
  • This does not seem to work with backticks (`), however. This appears to have been a bug which is now fixed.

It looks like escaping an emoji code (like this: "\:smile:") will use the native Unicode emoji instead of Discord's emoji image. The emoji won't appear until the line is sent.

Sections / Text Blocks

  • multiple lines of code can be started with three backticks at the beginning of a line:
```
code lines
code lines
```
  • the initial backticks can have a language designator afterwards, for syntax highlighting:
```php
php code...
```
  • Section headers can be displayed like this:
# header 1
## header 2
### header 3

Header 3 is smallest. In my tests, header 3 is just slightly larger than normal text and bolded; all 3 used used the same sans-serif font.

  • Itemized lists use an initial "*" or "-", with two spaces of indentation to indent the resulting list:
* item 1
* item 2
  * item 2a
  * item 2b 
* item 3

...renders like this:

  • item 1
  • item 2
    • item 2a
    • item 2b
  • item 3

Previews

To display a link without Discord also inserting a preview, surround the URL with angle brackets: <https://htyp.org>. The angle brackets will not be displayed, and preview will be suppressed, but the URL will be presented as a link.

  • This also works within formatted links: the angle-brackets still go around the URL, not the whole expression -- like this: [a previewless link](<https://htyp.org>)
  • Discord's settings refer to the preview as an "embedded link". Previews of links pasted into a discussion can be turned off by revoking this privilege.
  • As of 2022-06-28, this seems to not work on iOS.

Live Time

  • <t:<UNIX time>:<format character>>
    • UNIX time is the time in seconds since... uh, midnight, I think?... on 1969-12-31
    • format character: t,T,d,D,f,F or R
      • t 5:35 PM
      • T 5:35:00 PM
      • d 07/25/2022
      • D July 25, 2022
      • f July 25, 2022 5:35 PM
      • F Monday, July 25, 2022 5:35 PM
      • R in 2 minutes
    • example: <t:1658784360:R> shows the relative time since about 17:17 EDST om 2022-07-25

Credit to Jems for discovering and reverse-engineering this from Discord Timestamp Generator.

Exploration Needed

  • >>>
    • escapes emoji (haven't had time to explore in order to describe it precisely)
    • block indent, but only when pasting (?)

Links