Hi everyone!
In this forum, the edit box for writing and editing messages is much more complex than the one in the Duolingo forums.
It is enough to write a text, but a nice appearance if it is not absolutely necessary, it may help to improve the understanding of messages.
header 0
-
header 1
Basic editing
There are several buttons above the edit box that create the BBCode you need for basic editing.
If you hold your mouse over an icon for a couple of seconds, you'll usually get a hint like the one shown in the image, e.g. for bold text.
Bold text: [b]text[/b]
Important: There are exceptions, but you usually have to place the cursor, tap the icon and type between the two tags. You can type the text first and then tap the button.
After that, put the cursor outside.Let's see the codes, from left to right.
header 2
Bold text
You'll get
Code: Select all
[b][/b]
Another option: You can use two asterisks or two low lines as in Duolingo and other platforms.
Examples:
Code: Select all
[b]a[/b] **b** __c__
a b c
header 3
Italic text
You'll get
Code: Select all
[i][/i]
Another option: type an asterisk or a low line on both sides of the text you want to display in italic.
Examples:
Code: Select all
[i]a[/i] *b* _c_
a b c
header 4
Underline text
You'll get
Code: Select all
[u][/u]
Another option: There is not a simple way to create it using MarkDown. It is possible, but it is not an easy way, you have to underline each character.
Example:
Code: Select all
[u]a[/u]
a
header 5
Quote text
You'll get
Code: Select all
[quote][/quote]
Another option: Type a greater-than sign at the start of the line. You'll need an extra SPACE as well.
Examples:
Code: Select all
[quote]This is a quote[/quote]
Code: Select all
> This is a quote[/quote]
This is a quote
Note: There is the possibility of nesting quotes, here in Duome also the possibility of mentioning the author. I'll explain these advanced options in another document.
header 6
Code display
You'll get
[code][/code]
Another option: In Duolingo, and here as well, you can create a quote block using three backticks or tildes before and after the quoted text.
If you only use one or two backsticks, before and after the text, the code box is not displayed. If the text is a formatting code this will not work, it only be showed.
Here you can also use groups of four spaces at the start of the line. I think in Duolingo this option displays it but with a weird html code.Remark: Syntax highlighting doesn't work here, nor in Duolingo.
Examples:
Code: Select all
a b c d e
Code: Select all
`text`
text
header 7
List
You'll get
Code: Select all
[list][/list]
Another option: Type a hyphen or minus sign, asterisk or plus sign and a SPACE.
Examples:
Code: Select all
[list]a[/list]
a
Code: Select all
- text
- text
header 8
Ordered list
You'll get
Code: Select all
[list=][/list]
You have to write the option at the end of the first tag, after the equal sign.
There are several options: Arabic numbers, Roman numbers, letters of the alphabet, also in uppercase.Another option: Type a number (or other option), a period and a SPACE at the start of the line.
No matter what number or letter you type, the list will start with 1…, a…, etc.Examples:
Code: Select all
[list=1]text[/list]
text
Code: Select all
1. text
- text
header 9
Lista ítem
You'll get
Code: Select all
[l*]
It is the simple way to create a new item in a list.
Example:
Code: Select all
[list=a]text a[*]text b[/list]
text a
text b
Remark: Lists can be nested.
I'll write a new post about nested codes as soon as possible.header 10
Insert image
You'll get
Code: Select all
[img][/img]
Another option: The MarkDown formatting works as well.
Code: Select all
![](http…URLimagen)
Examples:
[img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/img]
![](https://www.phpbb.com/theme/images/logos/blue/160x52.png)
Important: You have to link an image posted online.
The link must end in a accepted image extension, e.g. .png, .svg, .jpg, etc.
You have to be aware of copyright. You can link to any image, but you can only display those with rights that match the rules of this forums: your own, public domain, creative commons and similar works.
You can display images from your device here, but you have to use another code.header 11
Insert URL
You'll get
Code: Select all
[url][/url]
or
Code: Select all
[url=http…URL]texto[/url]
The first one will show the URL, the second one shows the text between the tags.
Another option: Use MarkDown tags.
The text between the square brackets will be displayed.Examples:
Code: Select all
[url]https://duome.eu/[/url]
Code: Select all
[url=https://duome.eu/]duome[/url]
Code: Select all
[duome](https://duome.eu/)
Automatic links: Both the Duolingo and Duome forums detect if a text is a possible link, e.g. https://duome.eu
Sometimes you can see false links, because there is no SPACE after a period.
You can turn them off by formatting the period as italics, for example.
If you writeCode: Select all
https://duome[i].[/i]eu/
you'll see https://duome.eu
header 12
Flash
You'll get
Code: Select all
[flash=][url][/url][/flash]
It is mandatory to write a dimension after the equal sign.
You can tray 200,150, e.g.It is width and height in pixels separated with a comma. Don't use any SPACE, as usual.Importante: I had to add an extension to read swf files in Firefox and Chrome.
I don't find a solution to display them on my phone.It only shows a blank space if a viewer is not available.
Maybe this option is not very useful nowadays.Examples:
[flash=200,150]http://www.iesmariazambrano.org/Departamentos/flash-educativos/historia_palabra.swf[/flash]
You'll get
header 13
Font color
You'll get
Code: Select all
[color=#FF0000][/color]
You have to choose a color from the color table above the edit box. It is just visible after tapping the icon.
Another option: Yo can replace the hexadecimal color code with the English color name after the equal sign.
Don't type the #, just the name of de color.Examples:
Code: Select all
[color=#FF0000]red text[/color]
red text
Code: Select all
[color=red]red text[/color]
red text
There are online code generators for rainbow or gradient texts.
header 14
Font size
You'll get
Code: Select all
[size=85][/size]
Another option: There is a code to small texts in Duolingo forums. Also added here.
In Duolingo text size is otherwise only possible if you apply it to a line as a title.Examples:
Code: Select all
[size=50]Tiny[/size]
Code: Select all
[size=85]Small[/size]
Code: Select all
[size=150]Large[/size]
Code: Select all
[size=200]Huge[/size]
Tiny
Small
Large
HugeCode: Select all
[small]small text[/small]
small text
header 15
Media Embed
You'll get
Code: Select all
[media][/media]
You can embed audiovisual media.
A large list of supported media is at app.php/help/bbcode#f6r0
Its URL have to be very simple, no tags.Another option: YouTube videos don't need a tag. The simple URL will display them.
Examples:
[code]https://youtu.be/exHrdIJRVYk[/code]
You'll get
Code: Select all
https://youtu.be/exHrdIJRVYk
https://youtu.be/exHrdIJRVYk
You'll get
Code: Select all
[media]https://youtu.be/exHrdIJRVYk [/media]
header 16
Align text
Now we have four icons and also different codes.
Alignment is not possible on the Duolingo forums.
Important: old codes no longer work, they always align to the left.
Edit your previous post if necessary.
creates
[center][/center]
creates[justify][/justify]
creates[left][left][center][/center][/left][/left]
creates[right][center][/center][/right]
Examples:
Code: Select all
[center]Center text[/center]
Code: Select all
[justify]Justify text xx xxxxxx xxxx xxxxxxxxxx xxxxxx xxxxxxxxx xxxxxxx xxx[/justify]
Code: Select all
[left]Align text to left[/left]
Code: Select all
[right]Align text to right[/right]
Center text
Justify text xx xxxxxx xxxx xxxxxxxxxx xxxxxx xxxxxxxxx xxxxxxx xxx
Remark: A justified text could be displayed very odd. It depends on the width of the window.
Align text to left
Align text to right
header 17
Line break BR
You'll get
Code: Select all
[BR][/BR]
Another option: You only need the first tag.
This is the way it should be used it in Duolingo forums.
Two spaces at the end of a line will create a new line.
Two ENTERS or two[BR]
will create a new paragraph.Important: No text is displayed between the two tags.
It is a good way to write a invisible comment, e.g.
Other tags can be displayed, however.Examples:
Code: Select all
Text 1[BR][/BR]Text 2
Text 1
Text 2header 18
Right to left text RTL
You'll get
Code: Select all
[RTL][/RTL]
I think this option is not possible in Duolingo forums.
Examples:
Code: Select all
[RTL][ALIGN=right]תודה[/ALIGN][/RTL]
תודה
Remark: You have to combine it with align text to right if you want to start the line on the right.
header 19
Strikethrough text
You'll get
Code: Select all
[S][/S]
Another option: Type two tildes before and after your text.
In Duolingo you can only strikethough words , not individual characters. You need to use a char map to do this.Examples:
Code: Select all
[code][S]Strikethrough text[/S]
[/code]
Strikethrough text
Code: Select all
~~Strikethrough text~~
Strikethrough textoheader 20
Links to other post
UNDER CONSTRUCTION
Copyright Acknowledgement:
BBCode is a development of the authors of these forums under a GPLv2 license.
MarkDown is an idea of John Gruber and others under BSD license.
You can use them with very few restrictions.
Please add a link to this post in your work:
https://forum.duome.eu/viewtopic.php?p=6215#p6215
Important: The admin has added some tags to allow easy importing of original messages posted in Duolingo forums.
Copying and pasting them from Duolingo forums as MarkDown works fine. Sometimes you have to fix minor errors.
Recently added Strikethrough text and Flash.Best regards!
Emilio
-