Dear anyone,
Your duolingo forum registration isn't automaticaly transferred to duome forum so in order to join duome forums you need to register with your existing or any other username and email; in any case it's advised that you choose a new password for the forum.
~ Duome Team

Basic editing in the message box

These Duome Forum guides have step-by-step instructions and screenshots on how to achieve the desired results. So read the relevant ones before you ask again.


eI000yo

Basic editing in the message box

Post by eI000yo »

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



Index

  • Links to other post

    • UNDER CONSTRUCTION



      header 1



      Basic editing


      There are several buttons above the edit box that create the BBCode you need for basic editing.


      Box_hint.png
      Box_hint.png (1.93 KiB) Viewed 789 times


      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.


      Back to index


      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


      Back to index


      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


      Back to index


      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


      Back to index


      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.

      Back to index


      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


      Back to index


      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


      Back to index


      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]
      1. text

      Code: Select all

      1. text
      1. text


      Back to index


      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]
      1. text a

      2. text b


      Remark: Lists can be nested.
      I'll write a new post about nested codes as soon as possible.


      Back to index


      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]


      Image


      ![](https://www.phpbb.com/theme/images/logos/blue/160x52.png)


      Image


      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.


      Back to index


      header 11




      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]

      https://duome.eu/

      Code: Select all

      [url=https://duome.eu/]duome[/url]

      duome

      Code: Select all

      [duome](https://duome.eu/)

      duome


      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 write

      Code: Select all

      https://duome[i].[/i]eu/  

      you'll see https://duome.eu


      Back to index


      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



      Back to index


      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.


      font_colors.png
      font_colors.png (11.5 KiB) Viewed 789 times


      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.


      Back to index


      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
      Huge

      Code: Select all

      [small]small text[/small]

      small text


      Back to index


      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]



      Back to index


      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


      Back to index


      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 2


      Back to index


      header 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.

      Back to index


      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 texto


      Back to index

      header 20



      Links to other post


      🚧 UNDER CONSTRUCTION 🚧


      Back to index


      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

User avatar
pawndemic
Germany

Re: Basic editing in the message box

Post by pawndemic »

eI000yo wrote: Thu Mar 10, 2022 9:40 pm

I think this option is not possible in Duolingo forums.

Examples:

Code: Select all

תודה

Great work and it help me understand for what is the RTL-Tag. I guess it works pretty well here:

لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين
لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانية ومنطقية فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر بأنه لا يوجد من يرغب في الحب ونيل المنال ويتلذذ بالآلام، الألم هو الألم ولكن نتيجة لظروف ما قد تكمن السعاده فيما نتحمله من كد وأسي.

I have no idea what the text says, hopefully nothing evil or insulting. if so I will change it. The page said it is the arabic version of Lorem Ipsum.

native: 🇩🇪, B2 - C1: 🇬🇧 🇪🇸, A1: 🇫🇷 🇮🇹

User avatar
Corinnebelle

Re: Basic editing in the message box

Post by Corinnebelle »

I made this topic but it has code select all in it. The original text didn't have all those different colors. How do I remove code select all? Is it the [ pre ] text mode that fixes that? How do you get code select all when you do want it?

🇺🇸 L1 🇮🇱 Advanced beginner Duolingo levels

Languages without borders, languages bridging gaps, the Red Cross are my heroes.

eI000yo

Re: Basic editing in the message box

Post by eI000yo »

Corinnebelle wrote: Tue Sep 12, 2023 6:43 pm

I made this topic but it has code select all in it. The original text didn't have all those different colors. How do I remove code select all? Is it the [ pre ] text mode that fixes that? How do you get code select all when you do want it?

The problem is the spaces before the text. Four spaces create code-formatted text.

You can replace the first space by using   or eliminating it.

Your example:

The Anki Manual says:

Installing

To install Anki:

  Download Anki from https://apps.ankiweb.net. See the next section for how to choose between -qt5 and -qt6.
  Save the installer to your desktop or downloads folder.
  Double-click on the installer to run it. If you see an error message, please see the links on the left.
  Once Anki is installed, double-click on the new star icon on your desktop to start Anki.

[…]

Qt5 vs. Qt6

[…]

User avatar
gmads
Mexico

Re: Basic editing in the message box

Post by gmads »

Regarding the use of the backticks: `

With either, one, two or three surrounding (beginning and end) backticks, the "code" box is not displayed.

With an opening line with three backticks, another line with the text, and a closing line with three backticks, the "code" box is displayed.

on the same line, one backtick, before and after the text
text
on the same line, two backticks, before and after the text
text
on the same line, three backticks, before and after the text
text

Code: Select all

line with three backticks, line with the text, line with three backticks

text

🦎  Imagination is the only weapon in the war with reality.  🦎
Antinomy - Imagination

🇲🇽 :us:  ·  :it: 🇧🇷  ·  :ru: 🇦🇪

User avatar
gmads
Mexico

Re: Basic editing in the message box

Post by gmads »

Regarding the use of the tilde: ~

a tilde surrounded by a space ~ more text

on the same line, one tilde before the text: subscript
on the same line, two tildes, before and after the text; strike-through

Code: Select all

"Code" box: three separate lines with three tildes, text, three tildes

🦎  Imagination is the only weapon in the war with reality.  🦎
Antinomy - Imagination

🇲🇽 :us:  ·  :it: 🇧🇷  ·  :ru: 🇦🇪

eI000yo

Re: Basic editing in the message box

Post by eI000yo »

@Corinnebelle Maybe my explanation was not enough, I see that you have not edited your post.

The issue is the four spaces, in blue, at the start of a line. See the image:

tab.png
tab.png (7.39 KiB) Viewed 526 times


In Code display in this tutorial you can read:

Here you can also use groups of four spaces at the start of the line.


Your past copy added these groups of four spaces, unwanted, of course, because the copied text was indented.
And now the encoded text is colored according to php, the default on these forums. The system colors the links and keywords..

Edit your pasted text by removing the initial groups of 4 spaces. If you want the indentation, you can replace it with the space xml code, as I posted in my previous post. Otherwise, the spaces should not exceed 3 to avoid the undesired effect.

@gmads Thanks for your explanations.
My tutorial was published a year and a half ago. And it was just a basic one.
Duolingo forums use MarkDown, as well as 3 bbcodes: color, br, and small.
But these forums prefer BBCode. It's interesting that almost all DL codes work fine here, but now you have a lot of buttons, you don't need to memorize codes.


User avatar
gmads
Mexico

Re: Basic editing in the message box

Post by gmads »

eI000yo wrote: Wed Sep 13, 2023 11:11 am

@gmads Thanks for your explanations.
My tutorial was published a year and a half ago. And it was just a basic one.
Duolingo forums use MarkDown, as well as 3 bbcodes: color, br, and small.
But these forums prefer BBCode. It's interesting that almost all DL codes work fine here, but now you have a lot of buttons, you don't need to memorize codes.

Oh. I didn't check the posting date!

True, but coming from the DOS era, I favor working with the keyboard: it is faster.

🦎  Imagination is the only weapon in the war with reality.  🦎
Antinomy - Imagination

🇲🇽 :us:  ·  :it: 🇧🇷  ·  :ru: 🇦🇪

User avatar
Corinnebelle

Re: Basic editing in the message box

Post by Corinnebelle »

@eI000yo Thanks Emilio, just had a lot going on. I've edited my posts. I never new how people did that or how to stop it when it happened to me! Thank you for the additional information also. How does it know which words are keywords?

🇺🇸 L1 🇮🇱 Advanced beginner Duolingo levels

Languages without borders, languages bridging gaps, the Red Cross are my heroes.

eI000yo

Re: Basic editing in the message box

Post by eI000yo »

Corinnebelle wrote: Thu Sep 14, 2023 5:43 pm

How does it know which words are keywords?

They are not exactly keywords, but according to the role of the different texts, they have a color.
I ignore this language at all. Sometimes, many years ago, I edited JavaScript to customize my website, even wrote the html using a plain text editor or experimented translating some small applications, personal use of course.
I think this forum uses it a lot.
A while ago the text was not colored, btw.

I copy and paste here a small example.
Source: https://en.wikipedia.org/wiki/PHP#Example
License: Creative Commons Attribution-ShareAlike License 4.0

Code: Select all

<?php

abstract class User
{
    protected string $name;

public function __construct(string $name)
{
    // make first letter uppercase and the rest lowercase
    $this->name = ucfirst(strtolower($name));
}

public function greet(): string
{
    return "Hello, my name is " . $this->name;
}

abstract public function job(): string;
}

class Student extends User
{
    public function __construct(string $name, private string $course)
    {
        parent::__construct($name);
    }

public function job(): string
{
    return "I learn " . $this->course;
}
}

class Teacher extends User
{
    public function __construct(string $name, private array $teachingCourses)
    {
        parent::__construct($name);
    }

public function job(): string
{
    return "I teach " . implode(", ", $this->teachingCourses);
}
}

$students = [
    new Student("Alice", "Computer Science"),
    new Student("Bob", "Computer Science"),
    new Student("Charlie", "Business Studies"),
];

$teachers = [
    new Teacher("Dan", ["Computer Science", "Information Security"]),
    new Teacher("Erin", ["Computer Science", "3D Graphics Programming"]),
    new Teacher("Frankie", ["Online Marketing", "Business Studies", "E-commerce"]),
];

foreach ([$students, $teachers] as $users) {
    echo $users[0]::class . "s:\n";

array_walk($users, function (User $user) {
    echo "{$user->greet()}, {$user->job()}\n";
});
}

Post Reply

Return to “Duome's How-to Guides”