Pour aller plus loin je conseille l’article : Sur quelles bases construire un framework HTML qui donne des idées intéressantes pour nommer ses div. (même si le projet mentionné n’a rien donné)

Avec un éditeur de texte :

TextMate :

De nombreux éditeurs de texte réalisent la coloration du code en cours de saisie. Certain d’entre eux (dont le mien TextMate) propose d’exporter le texte saisi au format HTML pour le réafficher dans un navigateur web comme il apparaît dans l’éditeur.

Dans TextMate il faut sélectionner le menu action dans la barre sous la fenêtre de l’éditeur, puis choisir TextMate et l’option « Create HTML From Document » (ou « Create HTML From Selection »). L’option « Create CSS from Current Theme » permet de récupérer la feuille de style associé.

avec TextMate

Avec des scripts en PHP :

(exécution côté serveur)

fshl :

Script qui colore rapidement et correctement les une dizaine de langage courants. Gère très bien le mélange de langages (CSS, JS, PHP) dans l’HTML.
Page du projet.
Test en ligne
Comment utiliser FSHL ? sur ce site.

avec FSHL

GeSHi – Generic Syntax Highlighter :

Projet assez ancien qui supporte de très nombreux langages de programmation (une centaine). Il a la réputation d’être une usine à gaz.
Page du projet
Test en ligne
Implémentation dans un plugin wordpress : WP-Syntax

avec GeSHi

PHPaintCode par derfum :

(anciennement Coloration Syntaxique)
Limité à la coloration du PHP. Support en Français.
Page du projet

avec PHPaintCode

Fonction PHP :

Il existe une fonction PHP qui colorie le code PHP d’un document. Il n’y a pas de feuille de style, on ne peux donc pas choisir les couleurs.

avec highlight-file()

Par des scripts en javascript :

(exécution côté client)

syntaxhighlighter

Page du projet
Implémentation dans un plugin wordpress : Google Syntax Highlighter for WordPress

avec syntaxhighlighter

A lire sur le web :

• Fshl : un bon colorateur syntaxique en PHP
• Écrire et publier du code sur WordPress
• Plugin de coloration syntaxique (Dotclear 2)
• Coloration syntaxique – Wikipédia
• Wordpress Plugin Directory [Tag: syntax] : Catalogue des plugins wordpress pour faire de la coloration syntaxique (en anglais)

On part du principe que les différents logiciels (en l’occurrence Cyberduck et Smultron) sont déjà complètement paramétrés. Il s’agit donc d’un pas à pas illustré, sur une configuration toute prête…

1) Se connecter au serveur FTP

La première étape consiste à se connecter au serveur qui héberge les pages internet. La majorité des hébergeurs proposent un accès FTP pour réaliser cette fonction. (ce n’est pas le cas des pages web stockée sur un compte .Mac) On utilise le logiciel Cyberduck qui a l’avantage de proposer une approche graphique proche du Finder de Mac OS X. De plus, le logiciel se charge tout seul du téléchargement (sens download et upload) et de l’édition.

Icone de Cyberduck

Ouvrir le logiciel Cyberduck dans le dossier application [A].

Ouverture d'un signet dans Cyberduck

Double-cliquer sur le serveur dans la liste des signets [B]. Normalement le contenu du premier répertoire doit s’afficher dans la fenêtre principale [C].

Si la liste des signets n’est pas visible, il suffit de cliquer sur l’icône « Signets » dans la barre d’outil [D]. Les signets sont également listés dans le menu du même nom [E].

Ouverture d'un signet par le menu

2) Localiser la page

Visualisation de la page dans un navigateur

Sur le site web, il faut repérer la page que l’on veut éditer [F]. Chaque slash « / » indique un dossier. Ainsi le fichier correspondant à l’URL : « http://www.________.fr/site/association/organisation.php » est le fichier « organisation.php » dans le dossier « association » lui même dans le dossier « site ».

Pour accéder au fichier dans Cyberduck, il suffit de double-cliquer sur chacun des dossiers.

Dans le pop-up menu [G], on peut vérifier le répertoire courant.

Manipulation dans Cyberduck

Ainsi, on est sûr que le fichier « organisation.php » [H] est le bon.

3) Éditer la page

On choisit d’utiliser le logiciel Smultron qui a l’avantage de faire de la coloration syntaxique : le code HTML apparaît de manière coloré.

Rien de plus simple pour éditer la page, il suffit de sélectionner le fichier dans la liste [I] cliquer sur l’icône « Édition » [J] (ou par la barre de menu : Fichier > Editer avec > Smultron)

Cyberduck se charge de télécharger le fichier et de l’ouvrir dans le logiciel Smultron.

Code de la page dans Smultron

Il suffit de faire les corrections voulues.

La syntaxe est en HTML ce qui implique que la structure de la page est décrite par des balises (qui apparaissent en bleu dans Smultron [K]). Il existe de très nombreux tutoriels pour apprendre les rudiments du HTML. J’attire également votre attention sur le fait qu’en toute rigueur, les caractères spéciaux sont codés par des entités [L] (« è » s’écrit en toute rigueur : « &egrave; »). Il existe également sur internet des tableaux de correspondance «caractère spécial» <-> «entité» (exemple : Liste des entités de caractères ISO 8859-1 (Latin-1)).

4) Télécharger les modifications sur le site

Manipulation dans Smultron

Pour retransférer la page sur le serveur, rien de plus simple : il suffit d’enregistrer le document en cliquant sur l’icône « Enregistrer » [M] (ou par la barre de menu : Fichier > Enregistrer, ou tout simplement Pomme-S). Cyberduck se charge de tout : il remplace l’ancien fichier par le nouveau que vous venez d’éditer.

On peut voir si des modifications ont été effectuées depuis le dernier enregistrement. Si c’est le cas, l’icône du fichier dans la liste de gauche prend une couleur orangée [N].

Dans l’exemple, on ajoute un nouveau paragraphe contenant le texte : «Nouvelle équipe en cours d’élaboration» [O].

5) Vérifier les modifications

Observation du résultat

Pour voir les modifications, il faut bien sûr retourner dans le navigateur… N’oubliez pas de recharger la page en cliquant sur l’icône en forme de flèche ronde [P]. (ou par le menu : Présentation > Recharger la page ou Pomme-R)