Donner de la beauté à votre texte avec Markdown et HTML

Discussion Générale
24

Oui je sais, mais y’a quelques trucs qui n’altère en rien la page il me semble

25

bah on sera quoi faire ce matin xd

26

Après rien ne t’empêche de faire un petit .html et de tout mettre pour voir x’D

27

Pas besoin, je fais confiance à https://developer.mozilla.org/

28
Héros d'Overwatch
Héros Rôle Difficulté
Ana Soutien ★★★
Ange Soutien ★☆☆
Bastion Défense ★☆☆
Brigitte Soutien ★☆☆
Chacal Défense ★★☆
Chopper Tank ★☆☆
D.VA Tank ★★☆
Doomfist Attaque ★★★
Fatale Défense ★★☆
Faucheur Attaque ★☆☆
Genji Attaque ★★★
Hanzo Défense ★★★
Lucio Soutien ★★☆
McCree Attaque ★★☆
Mei Défense ★★★
Moira Soutien ★★☆
Orisa Tank ★★☆
Pharah Attaque ★☆☆
Reinhardt Tank ★☆☆
Soldat : 76 Attaque ★☆☆
Sombra Attaque ★★★
Symmetra Soutien ★★☆
Torbjörn Défense ★★☆
Tracer Attaque ★★☆
Winston Tank ★★☆
Zarya Tank ★★★
Zenyatta Soutien ★★★

On peut faire des jolis tableaux avec les balises table,th,tr,td,caption,etc.. xD

2 mentions « J’aime »
29

je viens de re éditer le poste en placent ces balises, mais même moi quand je ne ferai pas ce genre de mise en page, merci les ORM de générer mes tableau en sans avoir à coder lmao.

30

Alors j’ai testé toutes les balises html que je connais. Voici celles qui fonctionnent :

:arrow_right: <a href="http://google.fr">Texte du lien</a>

Cette balise permet de faire un lien mais attention elle ne fonctionnera que si vous êtes niveau 2 sur le forum.
Syntaxe markdown : [Texte du lien](http://google.fr).

:arrow_right: <b>Texte en gras</b>

Texte en gras.
Syntaxe markdown : **Texte en gras**

:arrow_right: <big>Texte en gros</big>

Texte en gros

:arrow_right: <blockquote>Texte en citation</blockquote>

Texte en citation
Syntaxe markdown : `> Texte en citation`

:arrow_right: <br/>

Utilisé pour forcer un saute de ligne. Mais vous pouvez aussi tout simplement faire un saut de la ligne.

:arrow_right: <dl><dt>Titre</dt><dd>Description</dd></dl>

Ces balises sont utilisés pour faire des listes de description. Le rendu est assez pauvre sur ce forum :

Titre 1
Description 1
Titre 2
Description 2

:arrow_right: <del>Texte barré et rouge</del>

Texte barré et rouge

:arrow_right: <details>Texte caché par défaut</details>

Permet de faire un texte caché par défaut. Ce qui peut faire office de balise « spoiler » :

Texte caché par défaut

Vous pouvez utiliser <details><summary>Résumé</summary>Texte caché par défaut</details> pour définir le résumé :

RésuméTexte caché par défaut

:arrow_right: <div>Texte dans un bloc</div>

Balise pas très utile pour faire de la mise en page pure mais elle fonctionne.

:arrow_right: <em>Texte en italique</em>

Texte en italique

:arrow_right: <h1>Titre principal</h1>

Titre principal

Syntaxe markdown : `# Titre principal`

:arrow_right: <h2>Titre secondaire</h2>

Titre secondaire

Syntaxe markdown : `## Titre secondaire`

Vous pouvez faire la même chose avec h3, h4, h5 … mais la forme sera la même que pour h2

:arrow_right: <hr/>

Crée une ligne de séparation :

:arrow_right: <i>Texte en italique</i>

Texte en italique

:arrow_right: <ins>Texte souligné en vert</ins>

Texte souligné en vert

:arrow_right: <kbd>Texte représentant un raccourci clavier ou une commande</kbd>

Texte représentant un raccourci clavier ou une commande

:arrow_right: <ul><li>Item 1</li><li>Item 2</li></ul>

Permet de faire des listes.

  • Item 1
  • Item 2

Syntaxe markdown:
* Item 1
* Item 2

:arrow_right: <ol><li>Item 1</li><li>Item 2</li></ol>

Permet de faire des listes ordonnées

  1. Item 1
  2. Item 2

Syntaxe markdown:
1. Item 1
2. Item 2

:arrow_right: <p>Paragraphe</p>

Paragraphe

Mais vous pouvez aussi simplement sauter 2 lignes.

:arrow_right: <pre>Texte non formatté</pre>

Texte non formatté

:arrow_right: <s>Texte barré</s>

Texte barré
Syntaxe markdown : ~~Texte barré~~

:arrow_right: <small>Petit texte</small>

Petit texte

:arrow_right: <strike>Texte barré</strike>

Texte barré
Syntaxe markdown : ~~Texte barré~~

:arrow_right: <strong>Texte en gras</strong>

Texte en gras
Syntaxe markdown : **Texte en gras**

:arrow_right: <sup>Texte en petit et en hauteur</sup>

Texte normal Texte en petit et en hauteur

:arrow_right: <sub>Texte en petit et en bas</sub>

Texte normal Texte en petit et en bas

:arrow_right: <table>

Permet de faire des tableaux. La syntaxe est plus compliqué que le reste.

Colonne 1 Colonne 2
Valeur 1 Valeur 2
Valeur 3 Valeur 4

Pour reproduire le tableau ce dessus, voici le code :

<table>
    <thead>
        <tr>
            <th>Colonne 1</th>
            <th>Colonne 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Valeur 1</td>
            <td>Valeur 2</td>
        </tr>
        <tr>
            <td>Valeur 3</td>
            <td>Valeur 4</td>
        </tr>
    </tbody>
</table>

:arrow_right: <code>Texte en code</code>

Texte en code
Syntaxe markdown:

`Texte en code`

:arrow_right: Faire un bloc de code

Ce n’est peut être pas très utile sur un forum de jeux videos mais sur les forums de développelement c’est très utile. Pour faire un bloc de code il suffit de précéder toutes vos lignes par 4 espaces.

Bonjour je suis un bloc de code
Et <b>tout</b> ce que je met dedans ne sera pas formatté
C'est super pratique pour du code comme par exemple :

if (user == Magus) {
    win();
}

Par contre l’avantage c’est que si votre bloc de code est très très gros, il ne prendra pas toute la hauteur. Il finira par avoir une barre de scroll (comme pour mon code des tableaux).

:arrow_right: Les balises []

Blizzard a tout de même repris des balises . Je ne crois qu’elles soient par défaut dans Discourse. Par exemple la balise [quote] est toujours présent. Il y aussi la balise [details] qui fait la même chose que <details>. Je ne sais pas s’il y en a d’autres.

3 mentions « J’aime »
31

Test balises…

#GPACONFIANCE Ceci est un lien << Lien cliquable <a href="lien"> :white_check_mark::star:
Mme << Abréviation <abbr> :white_check_mark:
WWW << Acronyme <acronym> :x:
Gras << Écrire en gras <b> ou <strong> :white_check_mark:
Ce texte est inversé << Écrire à l’envers <bdo> :x:
Plus gros << Taille augmenté de 1 <big> :white_check_mark:
Code source << Écrire en code source <code> :white_check_mark:
Ceci est faux << Écrire en barré surligné rouge <del> :white_check_mark:
Phrase en italique << Écrire en italique <em> ou <i> :white_check_mark:
#GPACONFIANCE << Insérer une image <img src="lien"> :white_check_mark::star:
Ceci est vrai << Écrire en barré surligné vert <ins> :white_check_mark:
Typo différente << Style machine à écrire <kbd> :white_check_mark:
Texte barré << Écrire un texte barré <s> :white_check_mark:
Exemple en italique << Sensé être un exemple en italique <samp> :x:
Plus petit << Écrire plus petit de 1 <small> :white_check_mark:
Ceci est un indice << Écrire en indice <sub> :white_check_mark:
Ceci est un exposant << Écrire en exposant <sup> :white_check_mark:
Texte sous forme de variable << Écrire en variable (?) <var> :x:

:star: Niveau de confiance supérieur requis.

J’faisais juste un test, mru à déjà tout fait au dessus et c’est bien plus complet ! ^^

2 mentions « J’aime »
32

Ah oui j’ai oublié de tester abbr et acronym. C’est sympa que abbr fonctionne tiens, ça peut servir.

33

C’est écrit tout en haut en plus ! :open_mouth:

34

<accronym> est devenue obsolète et remplacé par <abbr>

35

Ah bah heureusement que t’es là tu vois !

36

Ça va faire de super “guide” plus clair dès qu’il y en aura youhou \o/ (non mais c’est vrai en plus… )

37

Par contre les <ul> et <li> j’en avais utilisé à foison sur mon post sur les leavers, j’avais dû tous les remplacer par les - car sinon on les voyait écrit et y avait 0 mise en page.

Bizarre puisque ça a l’air de marcher quand même.

38

comment on fait une balise cacher dans un tableau?

39

C’est à dire ? Quelque chose de ce genre la ?

Valeur 1 Valeur 2 Valeur 3
Valeur cachée Rickrolled

Voila le code :

<table>
    <tr>
        <td>Valeur 1</td>
        <td>Valeur 2</td>
        <td>Valeur 3</td>
        <td><details><summary>Valeur cachée</summary> Rickrolled</details></td>
    </tr>
</table>
40

c’est exactement sa merci

1 mention « J’aime »
41

Les balises <code></code> ne fonctionnent plus comme avant ?

Car j’aimerais reposter un truc où j’avais utilisé une syntaxe de code, sauf que

  • Soit j’utilise <code></code> et j’ai pas la possibilité de faire des tab
  • Soit j’utilise ``, j’ai les tab mais je peux pas mettre de texte en gras ou autre style
1 mention « J’aime »
42

Utilise ```. Exemple:

(faut enlever les . qui sont avant les ```. J’ai été obligé de les mettre sinon l’exemple ne peut pas marcher :smiley: )

.```
    Coucou je suis un bloc de code
.```
43

Nop, y a toujours mon problème de mettre un if en gras, ou un truc particulier souligné.

```**je suis censé être en gras**```
->
**je suis censé en gras**

1 mention « J’aime »