Mise en forme du forum et des fiches pratiques CCM

Les messages sur le forum et les fiches pratiques utilisent une mise en forme de type Wiki, dont voici la plupart des fonctionnalités :

Gras, Italique et Souligné

Exemple :

<gras>Texte en gras</gras>
<ital>Texte en italique</ital>
<souligne>Texte souligné</souligne>

Résultat :

Texte en Gras
Texte en italique
Texte souligné

Remarques :

• Pour ces mises en formes, il suffit de sélectionner le texte voulu et cliquer sur les boutons B I ou S de la zone d'édition :

Les codes sources

Avec cette balise, les lignes sont numérotées, l'indentation du code est préservée et les éléments du langage sont colorés.


Exemple :

<code java>public static void main(String[] args) {
    System.out.println("Hello World!");
}</code>

Résultat :

public static void main(String[] args) {
    System.out.println("Hello World!");
}

Remarques :

• Dans la zone d'édition, pensez à bien choisir le langage qui correspond à votre code :

Les images

Syntaxe :

[Image:url de l'image]

Remarques :

• Dans la zone d'édition, utiliser le dernier bouton pour ajouter une image depuis vos fichiers.
• Il est possible d'ajouter un ou plusieurs attributs supplémentaires à l'image :
  • Positionnement de l'image à gauche :

    [url de l'image|left]

  • Positionnement de l'image à droite :

    [url de l'image|right]

  • Positionnement de l'image centré) :

    [url de l'image|center]

  • Redimensionnement de l'image (en pixels) :

    [url de l'image|123px]

Les liens

Exemple :

[https://www.commentcamarche.net/contents/130 Charte d'utilisation de CommentCaMarche.net]

Résultat : Charte d'utilisation de CommentCaMarche.net

Remarques :

• Si aucun texte n'est indiqué, l'URL sera utilisée comme texte.
• Il est possible d'utiliser une image comme texte de description afin d'avoir une image cliquable.

Les ancres

Une ancre est une partie de l'URL qui permet d'aller directement à une section de la page.

Par exemple sur CCM chaque réponse sur le forum, ou chaque section d'un article, a sa propre ancre.

Exemple :

[https://www.commentcamarche.net/contents/130#redaction-de-message Rédaction de message]

Résultat : Rédaction de message

Les listes à puces

Exemple :

*Test 1
*Test 2
**Test 2.1
**Test 2.2
***Test2.2.1
***Test2.2.2

Résultat :

• Test 1
• Test 2
  • Test 2.1
  • Test 2.2
    • Test 2.2.1
    • Test 2.2.2

Remarques :

• Sauter des niveaux dans la liste entraîne l'apparition de puces en trop.

Exemple :

** Test2
**** Test4

Résultat :

• • Test 2
    • • Test 4

Les citations

Exemple :

<block>Je pense donc je suis</block>

Résultat :

Je pense donc je suis

Les messages cachés

Exemple :

<spoiler>Combien font 6 fois 7 ?</spoiler>

Résultat (cliquer sur "Spoiler" pour afficher le contenu)

SpoilerLa réponse est 42

Les titres

Syntaxe :

==Titre de niveau1==
===Titre de niveau2===
====Titre de niveau3====
=====Titre de niveau4=====

Remarques :

• La numérotation est gérée nativement par la table des matières, inutile de la mettre dans les titres.
• Ne pas donner les mêmes noms aux titres et sous-titres, cela permet d'avoir des ancres uniques.
• N'inclure aucun lien dans les titres ni les sous-titres.

La table des matières

Syntaxe :

__TOC__

Remarques :

• Placer la table des matières au début de l'article, avant les premiers titres.
• Eviter les retours à la ligne entre la table des matières et le texte ainsi qu'entre les différents niveaux de titres pour éviter un mauvais affichage de la table des matières.

Les tableaux

Syntaxe :
Il s'agit de la même syntaxe que les Wiki : https://www.mediawiki.org/wiki/Help:Tables/fr
Sauf pour les lignes commençant par

!

sur un wiki qui doivent commencer par

|!

sur CCM.

Exemple :

{| class="wikitable" 
|-
|! style="text-decoration:underline; color:#0000ff;" | En bleu et souligné
|! style="font-weight:bold; background-color:#ff0000;" | En gras sur fond rouge
|! style="font-style:italic; font-size:x-large;" | En italique plus gros
|-
| rowspan="2" style="font-family:serif !important;" | Sur deux lignes
| style="text-align:center;" | Centré
| style="text-align:right;" | Aligné à droite
|-
| colspan="2" style="font-size:100%; font-family:'Comic Sans MS', cursive, sans-serif !important;" | En Comic Sans MS sur deux colonnes
|}

Résultat :

En bleu et souligné	En gras sur fond rouge	En italique plus gros
Sur deux lignes	Centré	Aligné à droite
	En Comic Sans MS sur deux colonnes

Remarques :

• Vous pouvez faire vos tableaux sur un éditeur en ligne comme https://www.tablesgenerator.com/mediawiki_tables

Les échappements

Pour empêcher qu'une balise soit interprétée, on peut y intercaler une autre balise pour annuler son effet.


Exemple :

<gras<ital>>Un exemple</gras>

Remarques :

• Ceci va bien afficher

  <gras>Un exemple</gras>

  et non pas Un exemple