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 administrateur de ce site (et pas de la Fondation SCP) ou Dr Lekter 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:magenta"³]]Texte[[/span]] = Texte

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ériede 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 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.