🖌️ 📐Markdown and other formatting - Cheat Sheet

[dakanga]

This post gives you access to resources and "tricks"that may assist people with their learning and including explaining things in their posts, and having fun talking with others.

i.e.

editbar.jpg (18.16 KiB) Viewed 4296 times

See Basic editing in the message box (though there are some differences there)

Originally posted and inspired by dlhgl , with some modifications, and updates for this new environment for markdown formatting options. Original post

Input	Result	Guide
[color=red]red text[/color]	red text	GUIDE
---	Separator line
Formatting links [Duolingo]( https://www.duolingo.com/ ) : [br] a language learning app	Duolingo : a language learning app	GUIDE
To post an image :  i.e. : 		GUIDE
To make a link by clicking an image : [](redirect URL) i.e. : [](https://forum.duome.eu/viewtopic.php?t=756) Duo emoji list	Duo emoji list	GUIDE
*Italic* / [i]Italic[/i] **bold** / [b]bold[/b] ***italic and bold*** / [b][i]italic and bold[/i][/b] [u]underline[/u] ~~Strikethrough~~ / [s]strikethrough[/s]	Italic / Italic bold / bold italic and bold / italic and bold underline Strikethrough / strikethrough

index

• Hug emoji's
• Text Faces ¯\_(ツ)\_/¯

• Index
  
  
  
  

  • Headings / Titles - GUIDE

  • Line Breaks
    

  • Quotes
    

  • Unordered Lists
    

  • Ordered Lists
    

  • Tables
    

  • Image - screen shots
    

  • More
    

header-1

Headings / Titles - GUIDE

Input

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5

Result

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Back to index

---

header-2

Line Breaks

Add a blank line to start a new paragraph.

[br] also produces a line break
[br] is very powerful when used in a table - to give a line break for your text in the table.

Back to index

header-3

Quotes - GUIDE

Input

> This is a quote. Add a blank line
> to produce line breaks

> > This is a nested quote

> Add a blank line at the end of the quote

This is not a quote.

Result

This is a quote. Add a blank line
to produce line breaks

This is a nested quote

Add a blank line at the end of the quote

This is not a quote.

Back to index

header-4

Unordered Lists - GUIDE Bullets, GUIDE Embedded lists

Input

* This is an unordered list
* Start each line with a * (or - or +) followed by a space
* and before a nested list, leave a blank line above it.

* Add 4 leading spaces
* for sub-lists

Result

• This is an unordered list

• Start each line with a * (or - or +) followed by a space

• and before a nested list, leave a blank line above it.

  • Add 4 leading spaces (or insert a "tab" ... though that is "tricky" to do. 4 leading spaces is much simpler. )

  • for sub-lists

Back to index

header-5

Ordered Lists - GUIDE

Input

1. This is an ordered list
2. Start each line with a number followed by a dot and a space
3. This is line 3
to produce a line break within a list item

Result

1. This is an ordered list
2. Start each line with a number followed by a dot and a space
3. This is line 3
   to produce a line break within a list item

(editing notes: Information on Tables has been edited - see comments below)

Back to index

header-6

Tables

Input - Simple pipe table

|Left align|Centre|Right align|
|:-|:-:|-:|
|row 1 a|row 1 b|row 1 c|
|row 2 a|row 2 b|row 2 c|

Result - Simple pipe table

Left align	Centre	Right align
row 1 a	row 1 b	row 1 c
row 2 a	row 2 b	row 2 c

NOTE:

• It is optional to add pipes at the beginning and the end of the line/row

• For the "column alignment/second line of the table" : use

  • :- left align (or you can use the symbol - . But in my experience, it does not give you good control in presentation to use only the symbol - )

  • :-: center

  • -: right align

Another way to form Tables

• viewtopic.php?p=6774#p6774 by eI000yo.
  This shows how you a different way you can create tables.

Back to index

header-7

Images - screen shots

• How to take a screen shot
• If you save your image/screen shot to your device in a file size that is not too large (details of size etc. to be confirmed) , you can then also attach this image direct to your duome.eu post !!!! :
  1. See the menu option below the comment box, and "add files" ;
  2. Then once the file is added, select "place inline"

duomeAttachments.jpg (35.49 KiB) Viewed 4872 times

Back to index

header-8

More

• [GUIDE] How To add a signature for your posts by MatOzone
• [GUIDE] Formatting : Special Characters by daKanga
• Basic editing in the message box by eI000yo (note : some changes have occurred since this was posted, and currently this has not been updated)

Back to index

---

N.B. if those who are fluent in other languages would like to translate this and post it in the appropriate "Languages / I speak " subforums, this would be greatly appreciated by our global community.

Though as a heads up - this Header Post (HP) is likely to continue to be edited/modified/updated over this next month especially - as we all settle into the power and potential of this new forum.
Thank you, each of you, for the kindness and also the patience you show towards others, as we strive to be an outstanding community to assist language learning.

This place is yours, not mine. And every decision to take - it's not mine, but ours - together we can do better than any of us alone. It's one of my favorite words by the way. Together. Insieme:) : duome.eu administrator

[EranBarLev]

To "test" things there is a special forum : viewforum.php?f=99.
Please use this other test forum to test things out.

It says I'm not authorised. Why isn't that subforum open to all users?

[dakanga]

Thanks for this heads up EranBarLev.

I also am on a learning curve with understanding these forums.

Apparrently the forum I mentioned was some sort of "testing" that was being done. And I made an error, thinking it was something it was not.

I have now removed and edited the comment in the header post (HP. Also sometimes called Original Post OP - though OP is also used to refer to the person who originally posted the header post. This is why I choose to refer to it as the Header Post.)

Thanks again for all that you do that makes this community so wonderful !

[DmGabin]

The second column of the sample table is not actually centered. Maybe, some other code is needed?

[eI000yo]

You are right [mention]DmGabin[/mention].
I copied and pasted the official examples from the app.php/help/markdown#f3r0

| Left | Center | Right |
|:-----|:------:|------:|
| x | x | x |

[code]Left|Center|Right
:-|:-:|-:
x|x|x

Left	Center	Right
x	x	x

Left	Center	Right
x	x	x

I tested them using ReText and the codes are correct, but the alignment shown here is the default, centered titles and left-align cell contents.

But you can see at viewtopic.php?p=6770#p6770 a solution.

header 1	header 2	header 3
left	center	right

The code is

Code: Select all

[table]
  [tr]
    [th]header 1[/th]
    [th]header 2[/th]
    [th]header 3[/th]
  [/tr]
  [tr]
    [td][ALIGN=left]left[/ALIGN][/td]
    [td][ALIGN=center]center[/ALIGN][/td]
    [td][ALIGN=right]right[/ALIGN][/td]
  [/tr]
[/table]

Keep in mind that MarkDown has a lot of "flavors". There is no standard version.

Regards!

[dakanga]

Comments in the Oringinal/header post (HP) edited, after
the appreciated commentry by DmGabin here
and the valuable response by eI000yo here

Thank you to both of you !

[dakanga]

Embedded list

• item 1

  • subitem 1
  • subitem 2
    
    • subsubitem 1
      
      • subsubsubitem 1
      • subsubsubitem 2
        
        • subsubsubsubitem 1
        • subsubsubsubitem 2
        • subsubsubsubitem 3
          
          • subsubsubsubsubitem 1
        • subsubsubsubitem 1
  • subitem 1

• item 2

  • subitem 1

    • subsubitem 1

  • subitem 2

  • subitem 3

• item 3

• item 4

---

How to do this:

• Start the first item with a - or a * followed by a space, then type your first item, AND then leave a blank line after.
• Sub-items must start with FOUR spaces then - or a * followed by a space, then type your first sub-item
• Sub-sub-items must start with EIGHT spaces then - or a * followed by a space then type your first sub-sub-item
• Sub-sub-sub-items must start with TWELVE spaces then - or a * followed by a space, then type your first sub-sub-sub-item
  and so on.

---

Example code

Index of "[bracket codes]" used in explanation.

[ 4] : 4 blank spaces
[ . 8 .] : 8 blank spaces
[ . .12 . ] : 12 blank spaces
[ . . . 16 . . ] : 16 blank spaces
[ . . . . 20 . . . ] : 20 blank spaces

Example

- item 1

[ 4]- subitem 1
[ 4]- subitem 2

[ . 8 .]- subsubitem 1

[ . .12 . ]- subsubsubitem 1
[ . .12 . ]- subsubsubitem 2

[ . . . 16 . . ]- subsubsubsubitem 1
[ . . . 16 . . ]- subsubsubsubitem 2
[ . . . 16 . . ]- subsubsubsubitem 3

[ . . . . 20 . . . ]- subsubsubsubsubitem 1

[ . . . 16 . . ]- subsubsubsubitem 1

[ 4]- subitem 1

- item 2

[ 4]- subitem 1

[ . 8 .]- subsubitem 1

[ 4]- subitem 2
[ 4]- subitem 3

- item 3
- item 4

ps. also check out the sub discussion here on "Quotes" nested quoting This is a different style that may also be appropriate for some authors.

[dakanga]

Superscript numbers

I usually use another site, such as:

• https://lingojam.com/SuperscriptGenerator

Other times I copy them for other things I have pre-prepared.

Here, for example is a list:

¹
²
³
⁴
⁵
⁶
⁷
⁸
⁹
¹⁰

And sometimes, as I usually use the international keyboard, I use the function keys on that.

To read more about that : check [GUIDE] Keyboards

Shift + right Alt + 1 : ¹
right Alt + 2 : ²
right Alt + 3 : ³

[dakanga]

To show your embedded Code

Code-Block Text:
This is useful, to show what coding you might have used in formatting your post.
It means your code is not translated into an action. Instead it shows the code.

nb, this is using the grave accent key. When used in programming it is often referred to this as the back tick key. On many keyboards it shares its key with ~ , known as a tilde accent diacritic by many of us and is often located in the top left corner of a keyboard.


The alt code for ` is 96.

[dakanga]

How do you find a page URL ? : Generally

1. Locate the page you want to find.
2. In your browser’s address bar at the top of the page, click once to select the entire URL.
   Copy the URL by right-clicking it and then selecting Copy.
   Paste the URL by right-clicking it and then selecting Paste. ( or "Ctrl + C" )

---

How do you get a published image URL ?

1. Locate the image you want.
2. Right-click the image.
   Depending on what system you’re using, select the image URL by clicking one of these:
3. Chrome: Copy image address
4. Safari: Copy image address
5. Internet Explorer: Properties and then Copy the URL address shown
6. Firefox: Copy image location

Alternate reference (AltRef): https://support.google.com/webmasters/a ... 3758?hl=en

(hold on to your horses ... more to come ;P )
![](https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Animhorse.gif/300px-Animhorse.gif)

ref: https://en.wikipedia.org/wiki/Traditional_animation

[dakanga]

Inspiration and Challenge to Improve learning.

With this knowledge, you can set about creating fantastic resources to expand and share language learning opportunities.

If you have the skills, and want to see more stories in your target language ( the language you are learning ), with supporting documentation in your source language ( the language you know/are fluent in ). Also this would be useful for creating grammar resources.

then the formatting information here can assist with that.

check out other free resources, and provide links to them. Such as:

• Clozemaster
• Memrise
• Anki

So in effect, using Duolingo forums as a way to publish your resources and make them available to others.
And also to have the chance for your resources to be reviewed by others, and also have the chance to empower others, and also find out about other resources that may be of interest to you.

[eI000yo]

Hi [mention]daKanga[/mention]

Escape with a slash doesn't work here.
In Duolingo forums I also wrote the XML value of the character, but this don't work here at the moment. It is theoretically possible, but an admin must add the option.

There is a trick that works sometimes: set a size of 100 to some characters of the code.

Code: Select all

[size=100][[/size]b]a[/b]

[size=100]##[/size] a

[size=100]3[/size]. a

[b]a[/b]

## a

3. a

And you must to add a space after the #^s if you want a title.
As in Duolingo an = in next line creates a Huge Title, a - creates a Large Title

Code: Select all

Huge Title 
=

Huge Title

Code: Select all

Large Title
-

Large Title

[eI000yo]

Hi [mention]dakanga[/mention]!
Hi everyone!

Today, see viewtopic.php?p=8381#p8381, the issue has been fixed and now MarkDown tables (created with pipes) alignment works the same way as it worked in Duolingo forums.
Alignment in BBCode tables now is ignored, and display the code. We must use the general tag [center][/center],[justify][/justify], [left][/left] or [right][/right] before and after the text in each cell.
Is it the final solution? I don't now.

Left|Center|Right
:-|:-:|-:
x|x|x

Left	Center	Right
x	x	x

[luo-ning]

@mentions

Start typing @ followed by a username in the post. A dropdown menu will appear, and when you select a user, the text will be transformed into the appropriate BBCode:

Code: Select all

[mention]luo-ning[/mention] 

⇒

[mention]luo-ning[/mention]

---

Checklists

Code: Select all

* [ ] Not done
* [x] Done!

⇒

• Not done
• Done!

---

Emojis

Insert an emoji using your operating system or software keyboard's emoji picker:

• Windows 10 or 11
• Mac
• Android — depends on the keyboard app you use or your phone's manufacturer if you use default keyboard. For example, Gboard
• iPhone
• Linux — depends on distro. For example, Ubuntu

When you submit your post, emojis will be transformed into images (as long as you don't check "Disable emoticons" in the post options).

Code: Select all

🏴‍☠️💖🤯

⇒

---

Superscript/subscript

Code: Select all

^superscript normal ~subscript

⇒

^superscript normal _subscript

If you want to use the ^ or ~ symbols directly before a word without them being interpreted as formatting, simply insert an empty BBCode tag, such as [b][/b]:

Code: Select all

^[b][/b]caret ~[b][/b]tilde

⇒

^caret ~tilde

---

Source code

Code block

Code: Select all

```
your.code.here();
```

⇒

Code: Select all

your.code.here();

Inline code

`your.code.here()`

⇒

your.code.here()

---

Keyboard keys

Code: Select all

[kbd]Ctrl[/kbd] + [kbd]Alt[/kbd] + [kbd]Delete[/kbd]

Ctrl + Alt + Delete

---

Hidden details

Default title

Code: Select all

[details]
Here are some details!
[/details]

⇒

Details

Here are some details!

...Or...

Code: Select all

>! Here are
> some details!

⇒

Here are
some details!

Custom title

Code: Select all

[details=Spoiler]
He was dead the whole time
[/details]

⇒

Spoiler

He was dead the whole time

Inline spoiler

Code: Select all

At the end, you find out >! he was dead the whole time !<

⇒

At the end, you find out he was dead the whole time

[Meli578588]

[mention]dakanga[/mention] Thank you . I bookmarked for later reference.

[pawndemic]

Code: Select all

At the end, you find out >! he was dead the whole time !<

A quick question: How can we add space characters?
Sometimes it looks nicer when there is more space, especially when you use it in a text.

For example

To gain a lot of money is     a      big advantage.

Code: Select all

To gain a lot of money is >!         a        !< big advantage.

[DmGabin]

Use          non-breaking          spaces.

[pawndemic]

Use          non-breaking          spaces.

And how do we do this? I am asking for , eh, a friend.

[DmGabin]

In Linux, it is the sequence of compose space space. In Windows, try Alt+160.

[pawndemic]

Thanks, compose + space space works for me.

On windows, beside the ALT-Code 160, you also can maybe try this:

Answers Microsoft: Non Breaking Space

[luo-ning]

Adding these here as they've been discussed in other threads

Special characters with HTML entities

Syntax: &...;, where ... is any named/numbered HTML character reference. You can find a list here: https://dev.w3.org/html5/html-author/charref

For example,

Code: Select all

• Σ   λ   Ω…

⇒

• Σ   λ   Ω…

---

Diffs/corrections

Code: Select all

[diff]
original text goes above
+++
edited text goes below{ with optional comments!}
[/diff]

⇒

: original text goes above
+++
edited text goes below{ with optional comments!}

---

Images with size specified

Height in pixels, or hight and width separated by a comma:

Code: Select all

[image=100]https://i.postimg.cc/1RnznV6m/screenshot-161.png[/image]

[image=200,50]https://i.postimg.cc/1RnznV6m/screenshot-161.png[/image]

⇒

Note that you need to use [image], not [img], if you want to specify the size.

[LICA98]

btw does anyone know how to quickly insert the flags emojis (on Windows)? because they aren't included in the list if you do Win+.

[luo-ning]

btw does anyone know how to quickly insert the flags emojis (on Windows)? because they aren't included in the list if you do Win+.

Windows doesn't support country flag emojis, and Microsoft probably isn't planning on adding support in future:

There aren't flag emojis and there problably won't be. The reason is pretty simple and can't be worked around in any satysfying way:

Country flags aren't actually a single unicode character, but a combination of unicode characters that are interpreted as a flag. When you receive the country flag equivalent of "US", it is interpreted as the United States flag. It means that it's up to each emoji implementation to interpret flag codes, which means that there is a potential PR nightmare to deal with in case a country isn't recognized internationaly.

Should microsoft decide to recognize the Israelian flag ? The Palestinian flag ? Taiwan flag ? How is Microsoft supposed to decide what flag to display or not if part of a country decides to declare independance ? Some companies have decided to represent all flags, some have decided to display different flags depending on where the user is located, an Microsoft decided to display none.

Anyway, I just added a [flag] BBCode for flags to get around this (with the caveat that, as ever... flags still aren't languages!)

Usage:

Code: Select all

[flag]XX[/flag]

Where "XX" is replaced with the relevant 2-letter country/region code from this list.

And yes, it does support and flags

[LICA98]

btw does anyone know how to quickly insert the flags emojis (on Windows)? because they aren't included in the list if you do Win+.

Windows doesn't support country flag emojis, and Microsoft probably isn't planning on adding support in future:

There aren't flag emojis and there problably won't be. The reason is pretty simple and can't be worked around in any satysfying way:

Country flags aren't actually a single unicode character, but a combination of unicode characters that are interpreted as a flag. When you receive the country flag equivalent of "US", it is interpreted as the United States flag. It means that it's up to each emoji implementation to interpret flag codes, which means that there is a potential PR nightmare to deal with in case a country isn't recognized internationaly.

Should microsoft decide to recognize the Israelian flag ? The Palestinian flag ? Taiwan flag ? How is Microsoft supposed to decide what flag to display or not if part of a country decides to declare independance ? Some companies have decided to represent all flags, some have decided to display different flags depending on where the user is located, an Microsoft decided to display none.

Anyway, I just added a [flag] BBCode for flags to get around this (with the caveat that, as ever... flags still aren't languages!)

Usage:

Code: Select all

[flag]XX[/flag]

Where "XX" is replaced with the relevant 2-letter country/region code from this list.

And yes, it does support and flags

can this be added to the message editor so that you can just click the code instead of having to type it? (same thing for the [kbd])

and Microsoft's excuse is total bs as usual

[luo-ning]

can this be added to the message editor so that you can just click the code instead of having to type it? (same thing for the )

I'm conscious of making the editor UI too crowded with rarely-used BBCodes, which will just make the most useful stuff difficult to find. [flag] is only useful for people who 1) are Windows users, 2) use a lot of emojis, and 3) want to visually represent countries/regions. Plus having a drop-down list would take additional dev work rather than just the BBCode itself.

Meanwhile [kbd] is one I personally use a lot and wouldn't require additional dev work, but I don't think it's all that useful for most users most of the time.

[LICA98]

can this be added to the message editor so that you can just click the code instead of having to type it? (same thing for the )

I'm conscious of making the editor UI too crowded with rarely-used BBCodes, which will just make the most useful stuff difficult to find. [flag] is only useful for people who 1) are Windows users, 2) use a lot of emojis, and 3) want to visually represent countries/regions. Plus having a drop-down list would take additional dev work rather than just the BBCode itself.

Meanwhile [kbd] is one I personally use a lot and wouldn't require additional dev work, but I don't think it's all that useful for most users most of the time.

imo the codes already listed there are much less frequently used, like BR or justify

and you don't need to list all the flags just having the code is enough (and user types the country code himself)

[Siobhan688078]

[quote=dakanga post_id=6252 time=1646967653 user_id=175]
This post gives you access to resources and "tricks"that may assist people with their learning and including explaining things in their posts, and having fun talking with others.

i.e.
EditingDuome.jpg

Hello lovely helpful people on this forum. Would like to thank everyone and dakanga especially for this really useful post - all the questions I ever had concerning formatting and tricks in one go!

[Seiryuu]

Anyone know if there's any code that prevents code from being parsed into text formatting? I've usually seen [noparse] and [plain] used, but neither of them seem to work on this forum.

[luo-ning]

Anyone know if there's any code that prevents code from being parsed into text formatting? I've usually seen [noparse] and [plain] used, but neither of them seem to work on this forum.

Yes, you can do that with backticks. Multiline:

Code: Select all

```
your code here
```

Inline: `your code here`

[Seiryuu]

Thanks, [mention]luo-ning[/mention]. I was hoping there'd be one that didn't render the text as monospace font, but I suppose that'll have to do.