Formatting your topic to look nicer

:pushpin: A nicely formatted topic goes a long way in helping the community digest your writings.

This guide is part of the Transition Tutorials.

Summary

In the new composer, we can format text using the menu at the top, but there are more options available to make your text look nicer. Learn how in this tutorial.

In this screenshot, you can see the available formatting options in the Composer menu.

In the following table, you can see text styles and what shortcuts you can use.

Style In Composer menu Short cut
Bold Yes Type **Bold**
Italic Yes Type *Italic*
Bullet list Yes Type * or - and start typing
Ordered list Yes Type 1, followed by item 1
Emoji Yes Type : then type/search

Link

To get this:
Google Maps
Mark the text and use the chain-icon in the Composer menu. Or Crtl+k on desktops.
Learn more about links and featured links in Adding photos, videos and links

Blockquotes

To get this:

Some text

Type this:
> Some text

Under the 3-dot icon in the Composer menu, you have the following 4 options:

Insert a table

This is explained in Adding tables to your topic.

Hide details

Use this to hide extra text that not all readers need to see. Try click/tap on the next line.

Click here to see the hidden text

This is the hidden text

Use the Composer menu or the following code to create hidden details:

[details="Click here to see the hidden text"]
This is the hidden text
[/details]

Build poll

This is explained in Create interaction with polls.

Blur spoiler

Use this to make the solution unreadable.

You cannot read this password: Peter%&123%& unless you click/tap it.

Use the Composer menu or the following code to create blurred text.

You cannot read this password: [spoiler]Peter%&123%&[/spoiler] unless you click/tap it.

So far, all the formatting styles available in the Composer menu have been presented. The selection is not impressive, so below are a bunch more only available if you know the short cuts.

Mention another user

To get this
@PrasadVR

Type
“@” then select from the dropdown or start typing the username you want to tag.

Add extra tags or categories

To get this:
Google Maps tips & tricks or this connect-forum

Type
“#” and start typing, then select from the dropdown.

Headings

To get these headings:

Top heading

Sub heading

Sub-subheadning

Lower heading

Lowest heading
Tiny heading

Type this:
# Top heading
## Sub heading
### Sub-subheadning
#### Lower heading
##### Lowest heading
###### Tiny heading

Add a horizontal line

Use this to break up your text into sections.

This is a horizontal line:


To insert a horizontal line, just type <hr>.

Task list

To create this type:

  • Write the press release
  • Update the website
  • Contact the media

Type this:
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Highlight

To get this:
This password Peter%&123%& is not a secret.

Type this:
This password <mark>Peter%&123%&</mark> is not a secret.

Strikethrough

To get this:
The world is flat. We now know that the world is round.

Type this:
~~The world is flat.~~ We now know that the world is round.

Superscript

To get this:
X2

Type this:
X<sup>2</sup>

Subscript

To get this
H2O

Type this:
H<sub>2</sub>O

Keybord text

To get this:
CTRL + C

Type:
<kbd>CTRL</kbd> + <kbd>C</kbd>

Small text

To get this:
small text

Type:
<small>small text</small>

Combine styles

To get this:
small link

Type:
<small>[small link](https://www.google.com/maps)</small>

You do not need to use all of them when creating a topic, but knowing about them may help you in writing a topic that is structured and easy to read. Fun fact: all our tutorials use these same text formats!

You may also be interested in:

This is the end of this tutorial.

Credit: The oil painting shown at the top is Beach at Trouville by Eugène Boudin. Painted in 1864/5. Courtesy National Gallery of Art, Washington.


Return to the Transition Tutorial Index

21 Likes

Thank you for the one more interesting update. Could you please explain when this ‘ hide text’ is required.

Interesting and comprehensive, Morten!
Seems you have a typo under Bullet list. Should be “Type * or - …” …?

2 Likes

It is never required, but if you create a quiz, you can hide the answers in one of these. Or if you write a tutorial, you can hide all the screenshots, etc. related to desktop users, as most users are using a mobile and do not need to see content only relevant to desktop users.

2 Likes

I’m still working on this. I hope it is better now. Thanks.

2 Likes

Reminds me: I believe, I also saw something like “Save as draft” …?

Trust me, I have been working on this for hours in Google Docs. Typing codes that are visible and not used by the editor takes some serious escape notations that can not be tested in Google Docs and there is no Save Draft. The preview on complicated formatting is not sufficient. You risk losing your work.

I wish there was some where to publish secretly first.

Cheers

2 Likes

When you click Close, you get:


But I agree, I would not risk it for such a long text.

1 Like

Thanks, I never noticed that option. But I have lost an entire topic before because we can only have ONE topic draft. But we can have more reply drafts.

Thanks again.

1 Like

Prasad, I think is best, not to see ‘hide’ as in ‘hiding a secret’. It rather means ‘hide until revealed by the reader by clicking’.

Click here to see an example

For very long descriptions it would be a good way to shorten the text in the beginning and the user clicks certain sections only when more details are needed.

2 Likes

Thanks for guiding and explaning nicely @MortenCopenhagen :clap:

1 Like

@MortenCopenhagen have you tried this markdown viewer/editor?

The implementation is not great as it makes a copy of the file you’re working on and loads it up on its web viewer/editor. You can edit your document but when you save, I don’t think it saves back into Google Drive, but to local storage. Might be okay on Chromebooks that depends on web apps.

3 Likes

Great post @MortenCopenhagen . Found out a couple new things.

I was initially disappointed that the <strike> code wasn’t working but learned from this post that I need to use a different code instead.

Also, here’s one to add to the list. It’s my personal favourite.

<kbd>Local Guides</kbd>
Local Guides

And you can wrap a link code around it to turn it into a nice looking link button.

[<kbd>Local Guides</kbd>](https://www.localguidesconnect.com/)
Local Guides

And I also like to use <small>text</small> for my signature so that it’s not too distracting. Hoping more would do the same :sweat_smile:

<small>small text</small> normal text
small text normal text

2 Likes

Thanks, Adrian.

If you don’t mind I will add the extras you shared.

What is the kbd short for?

I have to be honest that I’m a little disappointed about the Connect composer not having fully implemented Markdown and BBcode as we often has to resort to Html codes to make it work.

I’m contemplating removing my signature because even one line is too distracting in my opinion. Signatures over several lines are not helpful in my opinion.

Thanks for your explanation with an example.

1 Like

@MortenCopenhagen sure, feel free to add them.

kbd should be short for keyboard. I believe that code is usually used to indicate which keys to press e.g. CTRL + C.

2 Likes

Such a wonderful topic for connect beautification. Hope it will help me as well as Others. Thanks @MortenCopenhagen for this

1 Like

I wish I could bookmark this twice so it would appear at the top and bottom of my list, Morten. Thank you very much for the breakdown!

2 Likes