HELP: Topoguide - Text Formatting And Layouting

Titles, subtitles and summary

Subtitles

It is possible to use 5 levels of subtitles in the text fields of documents of any type (article, route, outing...); the style of each subtitle level is different.

## Level 1
### Level 2
#### Level 3
##### Level 4

Title emphasis

It is possible to add text after the subtitle, shown in italics. It must be separated from the subtitle by #:

##### Approach # 1200 m, 2 to 3 h

Links to subtitles

Each subtitle has an "anchor", that is to say that we can define an internal link pointing directly to the subtitle. The name of this anchor comes from the name of the subtitle. To obtain the direct link to a subtitle, simply copy the link located on the subtitle in the summary (right click on the subtitle, then "copy the address of the link").

It is also possible to force the anchor, in order to keep fixed URLs if the title changes. In order to do this, use the following syntax:

 ##### Approach # 1200 m, 2 to 3 h {#approach}

Summary

It is possible to insert a summary anywhere in the text with a tag, the [toc] tag. This tag must be alone on its line, preceded and followed by an empty line.

Introduction, followed by an empty line

[toc]

Continuation of the text, preceded by an empty line

By default, the summary is displayed on the left, and the text which follows is placed below.

Links

External links

Here are the two syntaxes for inserting a link:

• [Text of the link](http://www.example.com): Text of the link
• <http://forum.camptocamp.org/latest>: http://forum.camptocamp.org/latest

Note that the forum is considered as an external link.

Internal links to the guidebook and to articles

A syntax similar to wikilinks on mediawiki (double brackets) allows to easily create internal links.

[[document type/document number|title of the link]]

The document number is visible in the url bar. For example:

• [[routes/53775/en|a link to a topo]]: a link to a topo
• [[articles/151910/en|or to an article]]: or to an article
• [[waypoints/37355/en|or to a waypoint]]: or to a waypoint

Email address

<name@servor.blah>: name@servor.blah

Character formatting

In all guidebook documents and articles, the text can be formatted with tags similar to the Markdown tags in the forum.
Buttons allow you to easily insert certain tags around the selected text. Tags work on all multi-line fields, even those without buttons.
Warning: to format a subtitle, do not use the tags below but the subtitle tags.

• **text in bold**: text in bold
• *text in italics*: texte in italics
• ***text in bold and italics***: text in bold and italics
• `non-proportional font`: non-proportional font
• text <sup>in superscript</sup>: text ^{in superscript}
• text <sub>in subscript</sub>: text _{in subscript}
• <abbr title="tooltip">texte with tooltip</abbr>: text with tooltip
  • The tooltip of an object is displayed when you place the mouse on the object without moving it for about 1 s.

Bulleted and numbered lists

Bulleted list

In a bulleted list, each line starts with a black dot.

* an item starts with a star
* followed by a space, and then text.
A break (new line) **without** skipping a line gives a new line in the item.
* item

• an item starts with a star
• followed by a space, and then text.
  A break (new line) without skipping a line gives a new line in the item.
• item

Numbered list

1. first item
2. second
1. no need to number correctly

1. first item
2. second
3. no need to number correctly

It may be necessary to disable the numbered list. In this case, add a backslash \ before the dot:

1986\. What a great season.

1986. What a great season.

Lists and sublists

A list can also be ranked in several levels:

* first level
    * 4 spaces before the star: 2nd level
        * 8 spaces: 3rd level
    * again 4 spaces
* last item

• first level
  • 4 spaces before the star: 2nd level
    • 8 spaces: 3rd level
  • again 4 spaces
• last item

List containing paragraphs

1. This is a list item with two paragraphs. Lorem ipsum dolor
   sit amet, consectetuer adipiscing elit. Aliquam hendrerit
   mi posuere lectus.

   Vestibulum enim wisi, viverra nec, fringilla in, laoreet
   vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
   sit amet velit.

2. Suspendisse id sem consectetuer libero luctus adipiscing.

1. This is a list item with two paragraphs. Lorem ipsum dolor
   sit amet, consectetuer adipiscing elit. Aliquam hendrerit
   mi posuere lectus.

   Vestibulum enim wisi, viverra nec, fringilla in, laoreet
   vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
   sit amet velit.

2. Suspendisse id sem consectetuer libero luctus adipiscing.

Insert an image

It is possible to insert an image in the text. The image must meet the following conditions:

• The image must be registered on Camptocamp.org. To do this, an Add Images link is available at the bottom of the page of each document.
• For a collaborative document, the image must be collaborative as well (see the image-specific help).

To insert new images in the text of a new document, proceed in 3 steps:

1. create the document without the images,
2. save the images on the document,
3. edit the document to insert the images into the text.

The code to insert an image is the following, and it must be at the beginning of the line:

 [img=identifier position size]custom caption[/ img]

• identifier is the numeric identifier of the image (available in the image URL)
• position is optional. It can take the following values:
  • right : image positioned on the right
  • left : image positioned on the left
  • center : centered image, without text left or right
  • inline : image in the text line
• size is optional. It can take the following values:
  • big
  • small
  • orig

With the following code, it is possible not to put a caption:

[img=identifier position size /]

Attention, if an image is placed to the left or to the right, it can develop vertically until the following paragraph, and even beyond. In order to start a new paragraph under the previous images, place the [p] tag at the end of the previous paragraph.

Here is a tip to insert 2 images on the same line. On a cell phone, the image on the left is displayed first, and the image on the right below.

[img=142101 left /]
[img=309522 right /]
[p]

Without the [p] tag, the text following the images would fit between the two images, which is rarely good, especially on small screens. See for example this route.

Inserting a video

In personal documents (outings and personal articles), it is possible to insert a video hosted on a third-party site such as YouTube, Vimeo, Dailymotion, etc. Simply enclose the URL of the video page between "video" tags:

[video]URL of the video[/video]

This tag must be at the beginning of the line.

Description of pitches

In order to describe the pitches of a multi pitch route or of an ice line, or the single pitch routes of a climbing site (or bouldering problems of a bouldering site), the L# tag comes in handy. Among other things, this tag allows :

• The automatic numbering of pitches.
• A table layout aligning the information (grades, length in meters, nb. of points, comments, ...).

See the full description of the L# tag.

Formatting paragraphs

Quotes

Start the line with >. Don't forget to add an empty line at the end of the quote.

> Lorem ipsum dolor si amet

Lorem ipsum dolor si amet

It is possible to mix different tags :

> * This is a list
> * In a quote
>
> But also,
> > a quote in a quote.

• This is a list
• In a quote

But also,

a quote in a quote.

Centering the paragraph

<center>centered text, with one or several paragraphs</center>

centered text, with one or several paragraphs

Warning banners

!! Information

!!! Warning tag, mainly temporary

!!!! Important information
!!!! tag

Thank you for being careful when using these last tags which emphasize important information or even information of utmost importance.

Pictograms/emojis/smileys

Activities

• :rock_climbing: :
• :skitouring: :
• :ice_climbing:
• :snowshoeing:
• :hiking:
• :slacklining:
• :via_ferrata:
• :mountain_biking:
• :paragliding:
• :snow_ice_mixed:
• :mountain_climbing:

Waypoints

• :pit: :
• :waterfall: :
• :locality: :
• :pass: :
• :base_camp: :
• :virtual: :
• :waterpoint: :
• :waypoints: :
• :summit: :
• :bisse: :
• :gite: :
• :paragliding_takeoff: :
• :lake: :
• :slackline_spot: :
• :canyon: :
• :misc: :
• :bergschrund: :
• :shelter: :
• :cliff: :
• :local_product: :
• :climbing_indoor: :
• :webcam: :
• :access: :
• :confluence: :
• :paragliding_landing: :
• :camp_site: :
• :weather_station: :
• :climbing_outdoor: :
• :cave: :
• :bivouac: :
• :glacier: :
• :hut: :

Miscellaneous

Many others, here is the list : https://www.emojione.com/emoji/v3

Miscellaneous

Horizontal line

Insert the following code to get a horizontal line :

----

---

Additional information

• Extension used https://pythonhosted.org/Markdown
• Markdown Home Page
• Markdown Syntax