Le monde de la syntaxe et du codage peut paraître complexe et difficile d'accès au premier regard, mais les codes dont vous pourrez avoir besoin sur le wiki sont en réalité plus simples qu'il n'y paraît !

Dans ce guide, certains codes liés au choix d'une couleur pour un texte ou un cadre emploieront le format #E6F5FF, un # suivi de six caractères. C'est un code hexadécimal, utilisé pour définir une couleur à l'aide d'une combinaison de chiffres et de lettres. Suivez le lien disponible dans le cadre pointillé au-dessus afin d'obtenir le code hexadécimal de la couleur désirée.

Il est aussi intéressant de noter que certains des codes montrés ici peuvent être générés automatiquement à l'aide de l'assistant de l'éditeur Wikidot : essayez de jouer avec ces options et utilisez le bouton "Aperçu" pour constater le résultat sur votre page. Les résultats pourront parfois être étranges, parfois ratés, parfois satisfaisants. C'est en forgeant que l'on devient forgeron et c'est en trafiquant des codes que vous finirez par comprendre leur fonctionnement, alors n'hésitez pas !

//Italique// = Italique

**Gras** = Gras

__Souligné__ = Souligné

--Barré-- = Barré

Lien externe (menant à une page hors du wiki de la Fondation) :

[lien-entier-de-la-page Texte du lien]

Lien interne (menant à une autre page du wiki de la Fondation) :

[[[nom-de-la-page|Texte du lien]]]

Le nom de la page est ce qui suit "http://fondationscp.wikidot.com/" dans le lien complet. Pour créer un lien vers le Guide principal par exemple, à l'adresse "http://fondationscp.wikidot.com/guide-for-newbies", le code sera :

[[[guide-for-newbies|Guide principal]]]

Astuce : En utilisant ce même code, vous pouvez faire en sorte que le "Texte du lien" corresponde automatiquement au titre de la page vers laquelle vous renvoyez. Il suffit de laisser le deuxième champ vide comme ceci :

[[[guide-for-newbies|]]]

Pour des raisons pratiques, seul le second format (celui à trois crochets) doit être utilisé pour les liens internes. À chaque fois que vous utilisez un lien à une seule paire de crochets pour rediriger vers une page du wiki ou que vous mettez une URL entière dans un lien à trois crochets, un chaton meurt.

En lettres :
Couleur à indiquer en anglais.

##red|Texte## = Texte

En code couleur HTML :
Voir lien en haut de la page pour trouver le code de la couleur que vous voulez.

##FF0000|Texte## = Texte

Astuce : Un autre formatage est utilisé pour les pastilles de couleur des Niveaux de Menace dans les rapports SCP.

●くろまる = [[span class="pastille blanc"]]●くろまる[[/span]]
●くろまる = [[span class="pastille bleu"]]●くろまる[[/span]]
●くろまる = [[span class="pastille vert"]]●くろまる[[/span]]
●くろまる = [[span class="pastille jaune"]]●くろまる[[/span]]
●くろまる = [[span class="pastille orange"]]●くろまる[[/span]]
●くろまる = [[span class="pastille rouge"]]●くろまる[[/span]]
●くろまる = [[span class="pastille noir"]]●くろまる[[/span]]

Rendez-vous sur un site de recensement de polices d'écriture tel que Google Fonts, puis choisissez celle qui correspond le mieux à ce que vous désirez. Attention cependant, certaines peuvent ne pas être compatibles par défaut et devront être importées sur la page à l'aide du code disponible plus bas.

[[div style="font-family:Nom De La Police;"]]
Texte affiché dans la police sélectionnée
[[/div]]

Selon la police choisie, sa taille d'affichage par défaut pourrait être trop grande ou trop petite. Vous pouvez alors ajuster cette valeur avec ce code, en y remplaçant le "100%" par la taille de votre choix :

[[div style="font-family:Monotype Corsiva; font-size: 100%;"]]
Texte affiché dans la police et la taille sélectionnées
[[/div]]

Pour importer une police, incluez ce code avec le lien approprié n'importe où (de préférence tout en haut) dans le code de votre page :

[[module CSS]]
@import url('https://fonts.googleapis.com/css?family=Nom+De+La+Police');
[[/module]]

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 côté d'une série d'espaces les affiche. Ce code est utile dès que vous voulez afficher quelque chose qui devrait être transformé automatiquement, comme ce qui a été fait pour les codes à copier de cette page.

Texte@@ @@Bonjour !

Texte Bonjour !

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

Centré

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

Droite

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

Cette ligne est en justifié, juste un peu plus longue et composée de plusieurs mots pour que l'effet soit visible.

+ Titre taille 1

Titre taille 1

++ Titre taille 2

Titre taille 2

+++ Titre taille 3

Titre taille 3

++++ Titre taille 4

Titre taille 4

+++++ Titre taille 5

Titre taille 5

++++++ Titre taille 6

Titre taille 6

Table des matières :

[[toc]]

Ce code fait apparaître une table des matières qui renvoie en un clic à chaque titre de la page défini avec des +.

Bouton de retour à la table des matières :

[#toc Texte du bouton]

Classique :

[[image Nom-de-votre-image]]

Avec légende :

[[include component:image-block name=Nom-de-votre-image|caption=Légende|width=NombreDePixelspx]]

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

[[include component:image-block-left name=Nom-de-votre-image|caption=Légende|width=NombreDePixelspx]]

Le "Nom-de-votre-image" est le nom que vous donnez au fichier en le téléversant en bas de votre page. Pour cela, cliquez sur "Fichiers", ajoutez toutes les images que vous utilisez sur la page et attribuez-leur le nom désiré ("Options" puis "Renommer" à côté du fichier téléversé). Votre image pourra par exemple s'appeler "dragon.png", voire "dragon" tout court. C'est ce nom que vous devrez copier à l'identique dans les codes ci-dessus.

Pour un post forum ou un contexte informel, vous pouvez mettre un lien à la place du nom de l'image. Cet usage est cependant proscrit pour les pages et articles du site, surtout si l'endroit où est hébergé le lien est extérieur au wiki, car dans les deux cas cela peut mener à la perte de l'image dans certaines circonstances.

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

Vous pouvez élargir ou agrandir ce tableau autant que nécessaire en répliquant le code. L'assistant pour tables de l'éditeur Wikidot peut aussi vous aider.

> C'est ce qui est utilisé depuis le début ici. Ce cadre en pointillés. Il suffit de commencer la ligne par un chevron.

Ça donne ça.

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

Ce qui donne…

Quelque chose comme ça.

Attention au mal de tête.

Attention : Si vous utilisez ce code sur plusieurs lignes, vous devez ajouter un chevron suivi d'une espace après chaque retour à la ligne — même si celle-ci est vide !

Un dépliant, plus couramment appelé "collapsible" sur le forum, sert en général à cacher une image ou un texte trop long qui pourrait encombrer le fil où il est posté, ou à ajouter du contenu supplémentaire dans un rapport SCP.

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

Texte

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

[[collapsible show="Bonjour !" hide="Au revoir."]]
Texte
[[/collapsible]]

Texte

Double texte de fermeture :
Le texte servant à fermer le dépliant peut également être affiché en haut et en bas (pour les textes vraiment longs) :

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

Texte

Ce code crée un tableau à onglets comme celui de cette page.

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

Pour ajouter un onglet, faites un retour à la ligne après le "[[/tab]]" où vous voulez le placer et collez le bloc suivant :

[[tab Autre titre]]
Autre texte
[[/tab]]

Vérifiez que vous les avez bien téléversées sur votre page sous le bon nom, suivant les indications de l'onglet "Cadres et images". Si le fichier s'appelle "dragon.png" et que votre code est "[[image dragon]]", l'image ne s'affichera pas. Si l'extension (.png, .jpg, .gif…) est présente dans le nom de votre fichier, il faut la donner dans le code pour qu'il fonctionne, et inversement si elle n'y est pas.

N'oubliez pas que vous pouvez aussi renommer vos fichiers téléversés pour rendre leurs noms plus clairs et vous faciliter la vie pour vous retrouver dans le code de votre page.

Mon encadré fait avec des chevrons > ne saute pas les lignes correctement !

Chaque chevron (le symbole ">") doit systématiquement être suivi d'un espace, même pour les doubles retours à la ligne sans texte. S'il manque un espace, la ligne ne sera pas prise en compte et n'apparaîtra pas dans le rendu final. Vérifiez de ne pas en avoir oublié !

Vous avez une question dont la réponse ne figure pas ici ? N'hésitez pas à contacter un membre du Staff pour recevoir de l'aide et possiblement la voir ajoutée à cette FAQ !