Comment crée un espèce de cadre ou on met le code html ou etc...

Bonjour, j'aimerer savoir comment je peut crée un espèce de cadre comme ceci avec le code dedans :

Es-que vous connaissez un code pour faire pareil que l'image ?
Merci d'avance
Gendy0

6 réponses

Résumé de la discussion

Un cadre visuel pour afficher du code, avec mise en forme syntaxique, représente une demande courante pour améliorer la présentation du code dans les messages. Des solutions existent sous forme de syntax highlighters ou plugins prêts à l’emploi, et plusieurs ressources listent des options permettant d’améliorer la présentation du code. Comme option pratique, il peut exister une icône ou un bouton 'code' dans l’éditeur pour insérer du contenu formaté, ou des conseils pointent vers des balises et fiches d’exemple. En complément, des tests pratiques et des démonstrations peuvent être utiles pour choisir la solution la plus adaptée au contexte et au rendu visuel souhaité.

Bobot (l’IA à votre service)
  1. Modérateur
    Salut

    Si tu parles pour le forum de CCM, c'est l'icône code, la 4eme en partant de la gauche en haut de ton message.
    0
    1. Vous pouvez me donnez le code car mois j'ai essayer et ça ne marche pas
      0
    2. Modérateur
      C'est bien pour poster un message sur ce forum ? Celui ou ont est train de parler ?

      Pour faire ça :

       <div class="ccmcss_rwd_search">
              <div class="ccmcss_rwd_search__form ccmcss_form ccmcss_form--inline">
                  <form action="/search/index" method="get" id="content_search_form">
                      <fieldset>
                          <legend>Rechercher</legend>
                          <div style="position: relative;" class="ccmcss_form__line grid_row grid--norwd">
                              <div class="grid_col w100">
                                  <input placeholder="Recherche" name="q" value="" type="search">
                              </div>
                              <div class="grid_col">
                                  <button type="submit">
                                      <span class="ccmcss_btn ccmcss_btn--primary" aria-hidden="true" data-icomoon=""></span>
                                  </button>
                              </div>
                          </div>
                      </fieldset>
                  </form>
              </div>
          </div>
      
      0
    3. Merci , mais je met ou le code ?
      0
    4. Modérateur
      @Gendy0Par étape.

      1 - Dans le message que tu écris, tu clique sur la petite flèche vers le bas à coté de la balise code (4eme à partie de la gauche, celle avec <> devant un carré blanc).
      2 - Dans e menu qui s'ouvre, tu séléctionne HTML.
      3 - Ca te ferra apparaitre 2 balises de type : < code html></code> dans ton message.
      4 - Tu colles ton code entre ces deux balise, comme ça :

      < code html>
      <div class="ccmcss_rwd_search">
      <div class="ccmcss_rwd_search__form ccmcss_form ccmcss_form--inline">
      <form action="/search/index" method="get" id="content_search_form">
      <fieldset>
      <legend>Rechercher</legend>
      <div style="position: relative;" class="ccmcss_form__line grid_row grid--norwd">
      <div class="grid_col w100">
      <input placeholder="Recherche" name="q" value="" type="search">
      </div>
      <div class="grid_col">
      <button type="submit">
      <span class="ccmcss_btn ccmcss_btn--primary" aria-hidden="true" data-icomoon="?"></span>
      </button>
      </div>
      </div>
      </fieldset>
      </form>
      </div>
      </div>
      </code>
      0
    5. J'ai oublier de préciser quelque chose , enfaite je met des code sur mon site pour les gens , et j'aimerer que les code se présente comme sur se site dans un cadre avec écrit a chaque ligne 1 2 3 4 5 6 7 8 9 etc...........
      0
  2. Bonjour, ou vous poster une nouvelle question, en haut il y a un bouton écrit "code" ou vous pouvez mettre vos HTML,... dessus.
    0
    1. Vous pouvez me donnez le code car mois j'ai essayer et ça ne marche pas.
      0
    2. < code>ici tu ecrit ton code</code> (et au debut j'ai mis un espace sinon sa va faire un code donc tu retire l'espace que j'ai fait avant le c et < au début.)
      0
    3. Ok merci , mais j'ai essayer sa na pas marcher sa ma mit se que j'ai crée avec le code
      0
    4. Peut tu envoyer une photo pour t'aider ?
      0
    5. Si tu parle dans un site autre que CCM.
      <table width="0%" border="0" align="center">
      <tr>
      <td>Ton texte</td>
      </tr>
      </table>
      0
  3. Bonjour, voir la procédure en détail ici.

    0
    1. J'ai trouver sa comme code esque c'est bon ?
      <pre class="codeSnippeted lang-basic sh_sourceCode line-numbers skin_msvcpp">Question<span class="sh_symbol">:</span> Je dois faire ceci avec la librairie truc<span class="sh_symbol">.</span> Voici ce que j<span class="sh_comment">'ai fait: [...]</span>
      Commentaire<span class="sh_symbol">:</span> Tu sais que tu peux utiliser la librairie machin<span class="sh_symbol">?</span> Elle semble mieux adapter à ton besoin
      Commentaire de commentaire<span class="sh_symbol">:</span> Oui<span class="sh_symbol">,</span> je sais<span class="sh_symbol">,</span> merci<span class="sh_symbol">.</span> Mais <span class="sh_keyword">on</span> m<span class="sh_comment">'impose la librairie truc</span>
      Commentaire<span class="sh_symbol">:</span> Sont vraiment relous les chefs de projets à imposer des <span class="sh_keyword">lib</span><span class="sh_symbol">...</span>
      Commentaire de commentaire<span class="sh_symbol">:</span> C<span class="sh_comment">'est clair, mais je n'ai pas le choix</span>
      Réponse<span class="sh_symbol">:</span> Alors<span class="sh_symbol">,</span> avec la librairie truc<span class="sh_symbol">,</span> il faut faire ceci <span class="sh_symbol">[...]</span>
      Réponse<span class="sh_symbol">:</span> Super<span class="sh_symbol">,</span> merci<span class="sh_symbol">!</span><span class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre>
      0
    2. Enfaite je met des code sur mon site pour les gens , et j'aimerer que les code se présente comme sur se site dans un cadre avec écrit a chaque ligne 1 2 3 4 5 6 7 8 9 etc...........
      0
    3. Modérateur
      @Gendy0Heureusement que j'ai poser la question pour savoir si c'était pour comment ça marche (le forum ou on discute la maintenant) ou pour autre chose.

      ;-/
      0
    4. Du coup comment je fait ?
      0
  4. Modérateur
    Du coup comment je fait ?


    Premièrement, tu nous donne le plus de détailles possible, histoire qu'on évite de gallérer une seconde fois à te répondre du hors sujet car tu n'a pas donner assez de précisions.

    Comment est crée ton site ? Comment et ou est il hébergé ? Comment le développe tu ?
    0
    1. Je le développe avec wix editeur nhtml5 en ligne visuel
      0
    2. Modérateur
      Je ne connais pas le fonctionnement de wix, je ne peut pas t'aider la dessus.
      0
    3. Moi j'y suis inscrit pour tester. Attend...
      0
    4. Ok j'attend
      0
  5. C'est avec l'ancien que sa a marcher ?
    0
    1. De quoi ?
      0
    2. L'ancien code que je t'ai donnée dans le message précédent.
      0
    3. Ah d'accord désolée je n'avais pas vue.
      0
    4. Sa marche mais ce n'est pas sa que je veut
      0
    5. Merci, mais sa fait une ligne continue et sa dépasse de la page
      0
  6. Modérateur
    Bonjour,

    ce dont tu parles se nomme : syntax highlighters...
    des plugin près à l'emploi existent sur le net;
    Par exemple :
    http://www.webresourcesdepot.com/11-syntax-highlighters-to-beautify-code-presentation/

    0