# Forum Editor | Formatting Reference \[Guide\] **URL:** \ **Category:** Site Feedback\ **Created:** [July 21, 2021, 2:50am UTC](https://forums.ankiweb.net/t/forum-editor-formatting-reference-guide/11563 "2021-07-21T02:50:30Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\ **Post date:** [July 21, 2021, 2:50am UTC](https://forums.ankiweb.net/t/forum-editor-formatting-reference-guide/11563/1 "2021-07-21T02:50:30Z")
_I created the this guide hoping it will lead to less clutter in various support threads. This is a wiki-post, so you can click “Edit” to see how I created this post with Markdown and HTML. Also, feel free to submit changes if you have further pointers you deem important._ * * * # Formatting Guide | Forum Editor * * * This forum uses [Discourse](https://www.discourse.org/) - a very popular forum service. Its editor provides a special flavor of [Markdown](https://daringfireball.net/projects/markdown/). For more details on Markdown, visit the official [syntax guide](https://daringfireball.net/projects/markdown/syntax) by John Gruber. For specific information about Discourse, it’s best to check the [GitHub repository](https://daringfireball.net/projects/markdown/syntax). * * * ## Table of contents 1. [Basic formatting](#1-basic-formatting-3) 1.1. [Headings](#11-headings-4) 1.2. [Horizontal rule](#12-horizontal-rule-12) 1.3. [Font styles](#13-font-styles-13) 1.4. [Lists](#14-lists-17) 1.5. [Tables](#15-tables-20) 2. [Code formatting](#2-code-formatting-image22x18uploadxznarfis61j4hkxot55pc7vcqvrpng-22) 2.1. [Inline code](#21-inline-code-23) 2.2. [Single line of code](#22-single-line-of-code-24) 2.3. [Code block with syntax highlighting](#23-code-block-with-syntax-highlighting-25) 3. [Images](#3-images-image22x14uploadyrif4ebhd8vzylzxg4f6bifainapng-30) 3.1. [Resizing images](#31-resizing-images-31) 4. [Social features](#4-social-features-32) 4.1. [Quotes](#41-quotes-33) 4.2. [Mentions](#42-mentions-34) 4.3. [Hyperlinks](#43-hyperlinks-image23x19uploadsli4nd7d2fqfzvkdap62mc27u0hpng-35) 5. [Advanced features](#5-advanced-features-image20x19upload7qkxup9rjuzjhujflu9kxdwtbcxpng-36) 5.1. [Hide details](#51-hide-details-image16x17upload3lfvmmld8li17gf1luxneyzbg4bpng-37) 5.2. [Polls](#52-polls-image22x18uploadbrtyfezhj335c5t7vh6xgvmup5hpng-39) 6. [Miscellaneous](#6-miscellaneous-41) 6.1. [Fancy keyboard shortcuts](#61-fancy-keyboard-shortcuts-42) 6.2. [Embed third party sites](#62-embed-third-party-sites-43) * * * ## 1. Basic formatting ### 1.1. Headings * * * > Proper use of headings can improve the readability of your posts. To create a heading, prepend a line with a specific number of #. #### Available headings: - # # h1 - ## ## h2 - ### ### h3 - #### #### h4 - ##### ##### h5 - ###### ###### h6 * * * ### 1.2. Horizontal rule * * * > Horizontal rules are another good way to segment your content. **Syntax** : `---` (three [hyphens](https://www.compart.com/de/unicode/U+002D)) > The hyphens translate into an `
`. If there is no extra line between the content above and the hyphens, an underlined heading will be created. ### 1.3. Font styles * * * #### **Bold** text ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/f/fea442c7189be1534b73b300bb8b683622aabeb5.png) | Shortcut | Markdown | Output | | --- | --- | --- | | Ctrl+B | \*\*bold\*\* | **bold** | #### _Italic_ text ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c8c9eab69e9b5a7bdcacf288265bb56dd9a090f8.png) | Shortcut | Markdown | Output | | --- | --- | --- | | Ctrl+I | \*italic\* | _italic_ | #### ~~Strikethrough~~ text | Shortcut | Markdown | Output | | --- | --- | --- | | | ~~strike~~ | ~~strike~~ | ### 1.4. Lists * * * #### Unordered list > Indent list items with 2 spaces to nest them: | Editor input | Alternative | Output | | --- | --- | --- | | - Item 1   - Item 2     - Item 3 | \* Item 1   \* Item 2     \* Item 3 | - Item 1 - Item 2 - Item 3 | #### Ordered list > Markdown automatically indents sub-items of an ordered list: | Editor input | Output | | --- | --- | | 1. Item 1.1. Item 2. Item | 1. Item     1.1. Item 2. Item | ### 1.5. Tables * * * > To create a table with Markdown, use the following syntax: ```plaintext | Markdown | HTML | Image | |:---------------|:-----------:|----------------:| | justified left | centered | justified right | | *italic* | bold | ![image](url) | ``` > The colons - e.g. `|:--|` tell Markdown how to align the the cells’ content. You can even use Markdown or HTML within the cells and you can create multiline content with `
` tags. #### Output | Markdown | HTML | Image | | --- | --- | --- | | justified left | centered | justified right | | _italic_ | **bold** | ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/d/d26d65a1ca342f3022126e211012096262e59a98.png) | ## 2. Code formatting ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/e/eb4765e906b5a61172f223fdac4b89bba603adbd.png) * * * > Discourse offers syntax highlighting for code snippets (HTML, CSS, JavaScript etc.). - Shortcut: Ctrl+E - Editor toolbar button: ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/e/eb4765e906b5a61172f223fdac4b89bba603adbd.png) ```auto ``` While the shortcut is usually the fastest way, there are three options to do this manually, too: ### 2.1. Inline code * * * > You can emphasise HTML tags, classes, functions or other technical jargon with inline preformatted text. **Syntax** : wrap with single [backtick](https://www.compart.com/de/unicode/U+0060) (`) - Shortcut: Ctrl+E | Editor input | | Output | |—|—|—|—| | This `\` is inline. | | This `
` is inline. | ### 2.2. Single line of code > You can quickly create a single code line by indenting it with spaces (no syntax highlighting). ``` This line is indented with 4 spaces. ``` ### 2.3. Code block with syntax highlighting * * * > Code blocks are the best way to display template samples or error messages, since the code container offers syntax highlighting and the original format is respected. **Syntax** : wrap with three [backticks](https://www.compart.com/de/unicode/U+0060) (```) - Shortcut: Ctrl+E > Discourse uses [highlight.js](https://highlightjs.org/) for syntax highlighting. When using a code block, it will try to automatically apply the correct syntax highlighting for the selected text. ### Editor input ``` \ ⠀⠀console.log(“This snippet has syntax highlighting.”); \ ``` ### Output ```auto ``` > **Set desired language explicitly** > > > You can also set the desired syntax explicitly. > > This code block is explicitly set to JavaScript syntax highlighting: > > ``` javascript > function foo(bar) { > ⠀⠀return bar + 1; > } > ``` > > #### Output: > > ```javascript > function foo(bar) { > return bar + 1; > } > > ``` > > The following code block will be interpreted as plain text: > > ``` text > function foo(bar) { > ⠀⠀return bar + 1; > } > ``` > > #### Output: > > ```plaintext > function foo(bar) { > return bar + 1; > } > > ``` ## 3. Images ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/f/f15ff59995270d0caa190dec662d88294a193f0a.png) * * * > You don’t need to upload your images to an external image hosting site! You can easily add images to your posts per drag and drop or Ctrl+V from your clipboard. You can also use the ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/f/f15ff59995270d0caa190dec662d88294a193f0a.png) button. Discourse will automatically apply the correct Markdown syntax. ### 3.1. Resizing images * * * > You can resize uploaded images by adding special parameters: | Original upload | Percentage | Pixels | | --- | --- | --- | | ![image|200x200](url) | ![image|200x200, 50%](url) | ![image|32x32](url) | > The editor also suggests the following sizes on hover: ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/2/254fa7b0ab3fdb3d21435b4f68bcd39bd96e6937.png) ## 4. Social features * * * ### 4.1. Quotes * * * > When highlighting content from another post, the following tooltip appears: ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/d/de77c6b55cb371199da7cb7a91a9f1e317f6c5a1.png) > On click, Discourse will automatically create a quote in your editor at the current caret position. > The user you quoted will be notified when you publish the post, as it is handled like an answer. ### 4.2. Mentions * * * > The correct way to adress someone directly in the forum is @username. This way that user will be notified and is therefore more likely to read your post. ### 4.3. Hyperlinks ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c9a18a63a999d749fbb8e4744a2cde524f71b8f1.png) * * * > [Hyperlinks](https://en.wikipedia.org/wiki/Hyperlink) serve a variety of functions. Proper linking helps make the forum a better knowledge base. **Shortcut** : Ctrl+K **Syntax** : `[text](url)` > Instead of quoting a post’s content, you can use it’s unique url to embed it into your post: ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/8/867d1ddcb76c1f91c02bc05815c59ade2c4add18.png) > Websites that provide an oEmbed format (e.g. GitHub, YouTube, CodePen) can also be embedded this way (see 6.2.). ## 5. Advanced features ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/3/341555f93943bb9d1987662a6a6113d8cdfc558b.png) ### 5.1. Hide details ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/1/1a6a31737421234c171c9533613b117235793b7b.png) * * * > If a section of your post is very specific (e.g. note template code) and won’t be of interest to a broader audience, you can use _details_ to collapse that part: ![gif](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/0/0f496b30ba915e285fe15922682017fd2f8072a3.gif) #### Output: > **Code** > > Very specific code that takes up a lot of space: > > ```auto > console.log("Hello, world!"); > > ``` > This is a very useful to keep your posts concise and tidy. It reduces visual clutter and makes scrolling through the thread easier. ### 5.2. Polls ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/5/5323a1d89296f60c54cb324655f9a13c02c8d37b.png) * * * > To prevent redundant posts like “+1” or “I agree” when asking for community feedback, you can create a poll. ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/9/93150a7f6e55cb15e645621de75fb94adf2289d0.png) #### Sample poll _Poll ([view on site](https://forums.ankiweb.net/t/forum-editor-formatting-reference-guide/11563/1))_ ## 6. Miscellaneous * * * ### 6.1. Fancy keyboard shortcuts * * * > You can wrap keyboard shortcuts with the `` HTML tag to display them more professionally: | Editor input | Output | | --- | --- | | `Ctrl<\kbd>+A` | Ctrl+A | ### 6.2. Embed third party sites * * * > To embed YouTube videos, GitHub PRs or CodePens, simply paste the link into a new line in the editor. The embedded may be displayed as a gray box until the post is published. #### YouTube [![](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/7/73550cfd5cdc27df565cf191a68a8180cdc51653.jpeg "Syncing in Anki: Getting Started") ](https://www.youtube.com/watch?v=YkiM4DPzSVc) #### GitHub PR > > > Inspired by the summernote Image handle and @Arthur-Milchior's \[Resize images in… editor\](https://ankiweb.net/shared/info/1103084694). > > 1. This introduces \`editable-container\`, which contains the style sheets and editable. This is where the shadow root now starts, instead of in editing-area. The shadow root was necessary to isolate editor styles from user content styles, however if we keep including more of our styles into \`editable.scss\`, it kinda defeats its purpose :) > > 2. Clicking on an image activates the image handle overlay. The image handle overlay itself is written in Svelte. There are no modifications done to the HTML in the editable field, it all works through overlays. In the overlay you can change the float property of the image. You can also see its dimension. You can also (by clicking the bottom button, or dblclick) toggle the size between: > \- \*\*constrained size\*\*: constrained to 250x125px. The image is constrained so that big pictures do not make the editor hard to navigate. > \- \*\*display size\*\*: the size that will be used when the image is shown in the (p)reviewer. > > 3. The image handle overlay adapts to RTL mode (otherwise the float icons would be terribly confusing). > 4. The image can be resized in display mode by clicking on its bottom corners. > > !\[Screenshot 2021-07-21 at 18 37 49\](https://user-images.githubusercontent.com/7188844/126526318-b8fc5aee-f99c-4347-9dff-56dc28a880b1.png) #### CodePen [https://codepen.io/kleinerpirat/pen/vYmJaEM](https://codepen.io/kleinerpirat/pen/vYmJaEM) ---
**Author:** ![cqg](https://avatars.discourse-cdn.com/v4/letter/c/e95f7d/32.png) [@cqg](https://forums.ankiweb.net/u/cqg)\ **Post date:** [July 21, 2021, 6:46pm UTC](https://forums.ankiweb.net/t/forum-editor-formatting-reference-guide/11563/2 "2021-07-21T18:46:33Z")
Thanks, great guide. ---
**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\ **Post date:** [May 1, 2023, 3:04am UTC](https://forums.ankiweb.net/t/forum-editor-formatting-reference-guide/11563/3 "2023-05-01T03:04:48Z")
Closed on May 1, 2023, 3:04am UTC