Affichage en couleurs d'un code sur un site Web

Bonsoir à tous !

Voilà, je suis en train de créer un site. Et sur ce site, j'aimerais poster des codes. Seulement voilà, lorsque je copie et que je colle mes codes, il n'y a pas de couleurs comme sur Notepad par ex. J'aimerais savoir s'il existe un moyen pour que je puisse retrouver ce système de couleurs qui est pratique lorsque le code est assez long.

Si oui, j'aimerai savoir, comment le greffer sur mon site.

En attente de vos réponses et merci de votre aide !

PSPMan33

Bonjour,

Tu peux installer notepad++, il y a déjà un jeu de couleur que tu pourras modifier à ton aise!

Sinon, la plupart des éditeurs texte en ont (Pspad, eclipse...) mais notepad++ reste mon préféré pour sa simplicité

Merci de m'avoir répondu. Mais en réalité, ce que je cherche, c'est avoir une sorte de Notepad en ligne. Est-ce que c'est possible. Autrement dit, est-ce que je peux coder en ligne avec les couleurs de Notepad??

Personne ??!! -_-'

Je ne suis pas sûr d'avoir compris :

- tu veux poster ton code sur un site (genre pour faire des tutoriaux) et tu veux mettre en couleur pour que ça soit mieux compris ?

ou

- tu as un outil pour coder en ligne et tu aimerais profiter de la colorisation du code ?

ou autre chose ?

En fait, je voudrais copier un code de Notepad et le coller sur une page de mon site pour en faire des tutoriaux. Le problème, c'est que quand je le colle sur le site, tout est noir, et rien n'est en couleurs.

Je voudrais en réalité pouvoir bénéficier de la coloration syntaxique sur mon site...

Alors déjà, si tu ne trouve rien de mieux, tu peux le faire à la main, c'est chiant je te l'accorde (mais au pire tu demandes à tes visiteurs de c/c ton code dans notepad)

tu peux sois changer la couleur de la police : http://www.commentcamarche.net/forum/affic...tml-de-couleurs

Soit surligner le texte : http://www.commentcamarche.net/forum/affic...n-texte-en-html

Peut être qu'il existe des balises spécifique pour colorer, j'ai vu que le siteduzero.com en avait mais j'ai peur que ce soit un travail maison

Je te remercie ElNix ! Mais de toute façon, je m'attendais à faire un travail à la main vu que mon langage est en réalité que très peu connu.

Après, je me demandais si je ne pouvais pas m'aider du fichier XML que j'ai créé pour Notepad... Est-ce que tu crois que je pourrais le mettre sur le site?

Là comme ça je ne sais pas trop ! Il ressemble à quoi ton fichier XML ? (un extrait serait le bienvenu)

Je viens de penser, si tu ne connais pas le css ça pourrait grandement t'aider si tu veux le faire à la main, voici le début d'une série de tutos à ce sujet

Voici le fichier XML : Je me demandais si je ne pouvais pas copier ce code sur mon site pour avoir les couleurs sur NotePad.... Et merci pour le tuto !

<NotepadPlus>

<UserLang name="Net Logo" ext="nlogo">

<Settings>

<Global caseIgnored="yes" />

<TreatAsSymbol comment="no" commentLine="yes" />

<Prefix words1="no" words2="no" words3="no" words4="no" />

</Settings>

<KeywordLists>

<Keywords name="Delimiters">000000</Keywords>

<Keywords name="Folder+">[</Keywords>

<Keywords name="Folder-">]</Keywords>

<Keywords name="Operators">? =</Keywords>

<Keywords name="Comment">1 2 0;</Keywords>

<Keywords name="Words1">breed color heading hidden? label label-color pen-mode pen-size shape size who xcor ycor pcolor plabel plabel-color pxcor pycor color end1 end2 hidden? label label-color shape thickness tie-modedirected-link-breed end extensions globals __includes patches-own to to-report turtles-own undirected-link-breed true false</Keywords>

<Keywords name="Words2">back bk -at -here -on can-move? clear-turtles ct create- create-ordered- create-ordered-turtles cro create-turtles crt die distance distancexy downhill downhill4 dx dy face facexy forward fd hatch hatch- hide-turtle ht home inspect is- ? is-turtle? jump left lt move-to myself nobody no-turtles of other patch-ahead patch-at patch-at-heading-and-distance patch-here patch-left-and-ahead patch-right-and-ahead pen-down pd pen-erase pe pen-up pu random-xcor random-ycor right rt self set-default-shape __set-line-thickness setxy shapes show-turtle st sprout sprout- stamp stamp-erase subject subtract-headings tie towards towardsxy turtle turtle-set turtles turtles-at turtles-here turtles-on turtles-own untie uphill uphill4 clear-patches cp diffuse diffuse4 distance distancexy import-pcolors import-pcolors-rgb inspect is-patch? myself neighbors neighbors4 nobody no-patches of other patch patch-at patch-ahead patch-at-heading-and-distance patch-here patch-left-and-ahead patch-right-and-ahead patch-set patches patches-own random-pxcor random-pycor self sprout sprout- subject all? any? ask ask-concurrent at-points -at -here -on count in-cone in-radius is-agent? is-agentset? is-patch-set? is-turtle-set? link-heading link-length link-set link-shapes max-n-of max-one-of min-n-of min-one-of n-of neighbors neighbors4 no-patches no-turtles of one-of other patch-set patches sort sort-by turtle-set turtles turtles-at turtles-here turtles-on with with-max with-min approximate-hsb approximate-rgb base-colors color extract-hsb extract-rgb hsb import-pcolors import-pcolors-rgb pcolor rgb scale-color shade-of? wrap-color and ask ask-concurrent carefully end error-message every foreach if ifelse ifelse-value let loop map not or repeat report run runresult ; semicolon set stop startup to to-report wait while with-local-randomness without-interruption xor clear-all ca clear-drawing cd clear-patches cp clear-turtles ct display import-drawing import-pcolors import-pcolors-rgb no-display max-pxcor max-pycor min-pxcor min-pycor reset-ticks tick tick-advance ticks world-width world-height follow follow-me reset-perspective rp ride ride-me subject watch watch-me hubnet-broadcast hubnet-broadcast-view hubnet-enter-message? hubnet-exit-message? hubnet-fetch-message hubnet-message hubnet-message-source hubnet-message-tag hubnet-message-waiting? hubnet-reset hubnet-send hubnet-send-view hubnet-set-client-interface beep clear-output date-and-time export-view export-interface export-output export-plot export-all-plots export-world import-drawing import-pcolors import-pcolors-rgb import-world mouse-down? mouse-inside? mouse-patch mouse-xcor mouse-ycor output-print output-show output-type output-write print read-from-string reset-timer set-current-directory show timer type user-directory user-file user-new-file user-input user-message user-one-of user-yes-or-no? write file-at-end? file-close file-close-all file-delete file-exists? file-flush file-open file-print file-read file-read-characters file-read-line file-show file-type file-write user-directory user-file user-new-file but-first but-last empty? filter first foreach fput histogram is-list? item last length list lput map member? modes n-of n-values of position one-of reduce remove remove-duplicates remove-item replace-item reverse sentence shuffle sort sort-by sublist but-first but-last empty? first is-string? item last length member? position remove remove-item read-from-string replace-item reverse substring word abs acos asin atan ceiling cos e exp floor int is-number? ln log max mean median min mod modes new-seed pi precision random random-exponential random-float random-gamma random-normal random-poisson random-seed remainder round sin sqrt standard-deviation subtract-headings sum tan variance autoplot? auto-plot-off auto-plot-on clear-all-plots clear-plot create-temporary-plot-pen export-plot export-all-plots histogram plot plot-name plot-pen-exists? plot-pen-down plot-pen-reset plot-pen-up plot-x-max plot-x-min plot-y-max plot-y-min plotxy set-current-plot set-current-plot-pen set-histogram-num-bars set-plot-pen-color set-plot-pen-interval set-plot-pen-mode set-plot-x-range set-plot-y-range both-ends clear-links create- -from create--from create- -to create--to create- -with create--with create-link-from create-links-from create-link-to create-links-to create-link-with create-links-with die hide-link in- -neighbor? in- -neighbors in- -from in-link-neighbor? in-link-neighbors in-link-from is-directed-link? is-link? is-link-set? is-undirected-link? layout-circle __layout-magspring layout-radial layout-spring layout-tutte -neighbor? -neighbors -with link-heading link-length link-neighbor? link "#links">links links-own <link-breeds>-own link-neighbors link-with my- my-in- my-in-links my-links my-out- my-out-links no-links other-end out- -neighbor? out- -neighbors out- -to out-link-neighbor? out-link-neighbors out-link-to show-link tie untie movie-cancel movie-close movie-grab-view movie-grab-interface movie-set-frame-rate movie-start movie-status netlogo-applet? netlogo-version</Keywords>

<Keywords name="Words3"></Keywords>

<Keywords name="Words4"></Keywords>

</KeywordLists>

<Styles>

<WordsStyle name="DEFAULT" styleID="11" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="FOLDEROPEN" styleID="12" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" />

<WordsStyle name="FOLDERCLOSE" styleID="13" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" />

<WordsStyle name="KEYWORD1" styleID="5" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="KEYWORD2" styleID="6" fgColor="0000FF" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="KEYWORD3" styleID="7" fgColor="FF8000" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="KEYWORD4" styleID="8" fgColor="FFFF00" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="COMMENT" styleID="1" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="COMMENT LINE" styleID="2" fgColor="00FF80" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="NUMBER" styleID="4" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="OPERATOR" styleID="10" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="1" />

<WordsStyle name="DELIMINER1" styleID="14" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="DELIMINER2" styleID="15" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" />

<WordsStyle name="DELIMINER3" styleID="16" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" />

</Styles>

</UserLang>

</NotepadPlus>

Je l'avoue humblement, ça dépasse mes compétences actuelles

Mais je te conseille de chercher dans cette voie sur un site plus spécialisé (siteduzero, commentçamarche voir la partie prog de hardware.fr), un fichier XML aussi complet ça serait dommage de ne pas réussir à le réutiliser

Je te remercie tout de même pour ton aide ElNix ! Je vais continuer à chercher...

Perso je pense que ça va être compliqué de récupérer ton fichier XML.

On peut afficher des pages web avec le XML mais le fichier XML doit contenir les données et on l'affiche avec un fichier XSL qui contient les styles. Dans ton cas, les styles sont dans le XML...

Il faudrait parser le XML en PHP, récupérer les codes couleurs (ce qui va être long... et chiant) et ensuite, dans tous les cas, il faudra que tu mettes des classes CSS à tes portions de code pour que tu puisses faire la correspondance (pour dire : ça c'est du commentaire, tu me l'affiches avec le code couleur que tu as trouvé pour les commentaires)

Bref, je pense pas que ça soit une bonne idée

Sinon, pourquoi tu n'utiliserai pas un éditeur HTML qui permet de faire la mise en forme à la Word et ensuite de récupérer le code HTML à copier/coller dans tes pages? J'en ai jamais utilisé mais il me semble que NVU est pas mal (et surtout gratuit)