Aide - Codage et syntaxe

Ici sont listés quelques petits conseils de mise en page en codage à l'intention des nouveaux sur Wikidot. Si vous pensez que cette liste omet un élément important, n'hésitez pas à contacter un membre du staff de ce site (voir liste sur la page d'accueil — ne pas contacter DrMarcus ou Neremsa) par MP.
Liens utiles :
Code couleur CSS : Ici ou ici.
Syntaxe et formatage (la version complexe de ceci) : Ici.

---

Syntaxe basique

Starter kit

//Italique// = Italique
**Gras** = Gras
__Souligné__ = Souligné
--Barré-- = Barré

Pour neutraliser un code, mettre deux @ de chaque côté :

//Code affiché//

Insertion d'images

Classique :

[[image URL IMAGE]]

Avec légende :¹

[[include component:image-block name=URL-IMAGE|caption=LÉGENDE|width=NBRE-PIXELSpx]]

L'image peut également être alignée à gauche :

[[include component:image-block-left name=URL-IMAGE|caption=LÉGENDE|width=NBRE-PIXELSpx]]

Il est à noter que ce code ne fonctionne pas toujours sur Sandbox, étant conçu pour la fondation SCP.

Couleur de texte

En lettres :

##red²|Texte## = Texte

En code CSS :

##3ADF00|Texte## = Texte

En span :

[[span style="color:red"³]]Texte[[/span]] = Texte

Note : C'est ce formatage qui est utilisé pour les pastilles de couleur des Niveaux de Menace (Le blanc est un "o") :

● = [[span style="color:blue"]]●[[/span]]
● = [[span style="color:green"]]●[[/span]]
● = [[span style="color:yellow"]]●[[/span]]
● = [[span style="color:orange"]]●[[/span]]
● = [[span style="color:red"]]●[[/span]]
● = [[span style="color:black"]]●[[/span]]

Mise en page

Espacement

Retour à la ligne :

Paragraphe n°1
@@@@
Paragraphe n°2

Remarque : Un retour à la ligne simple ne nécessite pas ce code, mais il est intéressant pour laisser de grands espaces, comme sur cette page.

Espaces multiples :
Disposer deux @ de chaque coté comme dit plus haut pour que les espaces soient considérés comme du texte.

Texte Coucou

Titres

+ Titre Niveau 1

Titre Niveau 1

++ Titre Niveau 2

Titre Niveau 2

+++ Titre Niveau 3

Titre Niveau 3

++++ Titre Niveau 4

Titre Niveau 4

+++++ Titre Niveau 5

Titre Niveau 5

++++++ Titre Niveau 6

Titre Niveau 6

Table des matières :

[[toc]]

Ce code fera apparaître une table qui renverra en un clic à chaque titre de la page défini selon le formatage ci-dessus.

Retour à la table des matières :

[#toc TEXTE BOUTON]

Positionnement texte

[[=]]
Centré
[[/=]]

Centré

[[>]]
Droite
[[/>]]

Droite

[[==]]
Justifié
[[/==]]

Justifié

Cadres et formes

Tableau

||~ En-tête colonne n°1 ||~ En-tête colonne n°2 ||~ En-tête colonne n°3 ||
|| Case 1/1 || Case 1/2 || Case 1/3 ||
|| Case 2/1 || Case 2/2 || Case 2/3 ||

En-tête colonne n°1	En-tête colonne n°2	En-tête colonne n°3
Case 1/1	Case 1/2	Case 1/3
Case 2/1	Case 2/2	Case 2/3

Citation

> C'est ce que j'utilise depuis le début, en fait. Ce cadre en pointillés.

Ça donne ça.

> > Mais vous pouvez aussi faire des citations imbriquées.

Ce qui donne…

Quelque chose comme ça.

Attention au mal de tête.

Cadre div

Classique :

[[div class="content-panel standalone series"]]
Texte
[[/div]]

Texte

Dégradé :

[[div class="content-panel standalone series" style="background: linear-gradient(to right,CODE-CSS-1,CODE-CSS-2,CODE-CSS-3, ETC.)"]]
Texte
[[/div]]

Texte

Affichage de texte

Onglets

[[tabview]]
[[tab Titre 1]]
Texte 1
[[/tab]]
[[tab Titre 2]]
Texte 2
[[/tab]]
[[tab Titre 3]]
Texte 3
[[/tab]]
[[/tabview]]

Titre 1

Texte 1

Titre 2

Texte 2

Titre 3

Texte 3

Pour chaque onglet supplémentaire, ajoutez le bloc suivant après le "[[/tab]]" de votre choix :

[[tab Titre +]]
Texte +
[[/tab]]

Collapsibles

C'est ce sur quoi vous venez de cliquer.

[[collapsible show="Montrer" hide="Cacher"]]
Texte
[[/collapsible]]

Note : Le texte en gras peut être modifié pour afficher autre chose :

[[collapsible show="Les chats…" hide="C'est mignon."]]
Texte
[[/collapsible]]

Double bouton :
Le bouton pour cacher le texte peut églement être affiché en haut et en bas (pour les paragraphes plus longs) :

[[collapsible show="Montrer" hide="Cacher" hideLocation="both"]]
Texte
[[/collapsible]]

Collapsible imbriqué :

[[html]]
<style type="text/css">
@import url(http://d3g0gp89917ko0.cloudfront.net/v--50456838fc8c/common--theme/base/css/style.css);
@import url(http://d3g0gp89917ko0.cloudfront.net/v--50456838fc8c/common--theme/shiny/css/style.css);
@import url(http://05command.wdfiles.com/local--theme/scp-custom-2/style.css);
</style>
<script type="text/javascript">
function showHide(e)
{
   var el = document.getElementById(e);
   if (el.style.display == "block") {
    el.style.display = "none";
   } else {
    el.style.display = "block";
   }
}
</script>
<div id="firstCollapsible"><a href="#" onClick="showHide('firstText');"> TEXTE-BOUTON-1</a></div>
<div id="firstText" style="display: none;">
<br>
<br>
Texte
<br>
<br>
<div id="secondCollapsible"><a href="#" onClick="showHide('secondText');"> TEXTE-BOUTON-2</a></div>
   <div id="secondText" style="display: none;">
<br>
<br>
Texte
<br>
<br>
<div id="thirdCollapsible"><a href="#" onClick="showHide('secondText');"> TEXTE-BOUTON-3</a></div>
   <div id="secondText" style="display: none;">
<br>
<br>
Texte
[Etc.]
[[/html]]

Vachement complexe, je vous l'accorde. Un pitit exemple ?

Obscur codage hénokéen

Image de fond

Vous pouvez modifier le fond de votre page sandbox (comme ici) en insérant le code suivant tout en haut de celle-ci :

[[module css]]
div#container-wrap {
    background: url(URL-IMAGE);
}
[[/module]]

Modules adaptatifs

Nom d'utilisateur :

[[module ListUsers users="."]]
Salut, %%title%%.
[[/module]]

Le nom de la personne lisant le texte s'affichera à la place du code en gras. Tout le reste peut être modifié, mais les deux lignes "[[module]]" doivent être sur deux lignes à part — et donc le paraghraphe concerné entre deux.

Pages :
Selon le même format, l'on peut centrer le module sur certaines pages, triées selon des critères spéciaux :

%%title_linked%% = lien de la page sélectionnée
%%rating%% = upvotes/downvotes de la page
%%comments%% = nombre de commentaires
%%created_at%% = date de création
%%commented_at%% = dernier commentaire
%%tags%% = tags appliqués à la page
[Etc.]

On peut utiliser ces éléments pour, par exemple, coder ce genre de tableau (qui indiquera ici toutes les pages créées par quelqu'un) qui a l'avantage de se mettre à jour automatiquement :

[[module ListPages created_by="Nom Utilisateur" separate="no" order="created_at" prependLine="||~ Titre ||~ Évaluation ||~ Commentaires ||~ Créé ||~ Dernier Commentaire ||~ Tags ||"]]
[[/module]]

Tableau des tâches

Ce code créera un tableau interactif que vous pourrez modifier sans éditer la page pour y stocker des liens ou faire une liste de tâches à accomplir. Le seul inconvénient en est que ledit tableau peut être modifié par n'importe qui de façon anonyme.
Remarque : Si vous utilisez ce module, remplacez le mot 'exemple' par n'importe quelle série de caractères aléatoires. Les tableaux ayant le même identifiant seront liés et un changement sur l'un s'appliquera à l'autre.

[[module SimpleToDo id="exemple"]]

Titre

Texte au pifFollow link Un lien ?Follow link SalutFollow link Click me to edit !Follow link Click me to edit !Follow link

exemple

Here is a place for your title Click me to edit ! false

Notes en bas de page

1. Format utilisé dans les rapports SCP officiels.

2. Couleur à indiquer en anglais.

3. Couleur à indiquer en anglais.