Codage & Syntaxe

Page écrite et mise en page par Dr Lekter.

Ici sont listées quelques petites aides afin d'améliorer votre niveau en ce qui concerne la mise en page et le codage de vos pages.

Liens utiles :

• Ressources stylistiques : ici.
• Manuel de formatage avancé : ici.
• Code couleur CSS : ici ou ici.
• Guide de syntaxe (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 également être affiché en haut et en bas (pour les paragraphes plus longs) :

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

Collapsible imbriqué :

[[include component:coltop show=+ Ouvrir 1|hide=- Ouvrir 1]]
Texte 1
[[include component:coltop show=+ Montrer 2|hide=- Cacher 2]]
Texte 2
[[include component:coltop show=+ Montrer 3|hide=- Cacher 3]]
Texte 3
[[include component:colend]]
[[include component:colend]]
[[include component:colend]]

Pour chaque collapsible supplémentaire, ajoutez le bloc suivant :

[[include component:coltop show=+ Montrer X|hide=- Cacher X]]
Texte X
[[include component:colend]]

Note : ce code nécessite la création de deux pages, coltop et colend, au contenu similaire, sur le site où vous désirez l'utiliser. Il a été créé par des membres du site de la Fondation SCP.

Autres

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 paragraphe 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

Click me to edit !Follow link Click me to edit !Follow link Click me to edit !Follow 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 de bas de page

1. Format utilisé dans les rapports SCP officiels.

2. Couleur à indiquer en anglais.

3. Couleur à indiquer en anglais.