CodeMirror for Pastebin

Oula, ça fait longtemps que j’ai pas écrit ici…

J’écris cet article en relation directe avec ce tweet, dans lequel j’ai émis l’idée qu’il pourrait y avoir une extension pour Chrome permettant de remplacer la pauvre zone de texte d’édition de Pastebin.com par CodeMirror, afin de l’enrichir et d’améliorer son confort d’édition.

Contexte¶

En ce moment je m’amuse beaucoup avec ComputerCraft, un mod pour Minecraft qui ajoute - je vais faire très court - des ordinateurs. Les programmes qui tournent sur ces ordinateurs sont codés en Lua (c’est une interface avec Java, le langage avec lequel est codé le jeu). Je suis donc en train de coder un gros programme permettant de gérer un réseau ferroviaire dans le jeu.

Or, vous ne pouvez pas éditer les fichiers de votre programme directement dans le jeu (c’est absolument inconfortable). Les développeurs du mod ont donc créé un programme système permettant d’importer directement depuis Pastebin le code de votre programme, puis de l’enregistrer dans l’ordinateur, dans le jeu (vous me suivez ?).

– Fin du contexte

J’ai donc cherché pour voir si une telle extension existait, mais en fait non. Les applis que propose Pastebin sont complètement useless : j’ai pas besoin d’installer une appli sur mon smartphone / une extension à mon navigateur web / un logiciel sur mon ordinateur pour pouvoir faire exactement la même chose que sur le site (l’extension pour Chrome n’apporte absolument rien). De plus, je ne suis apparemment pas le seul intéressé (merci à @cGuille d’avoir passé le mot).

Sachant qu’il n’y a ni numéro de ligne, ni coloration syntaxique, ni indentation automatique, bref : rien qui puisse rendre agréable l’édition de snippet, on se perd, et on pète vite des câbles.

Alors je me suis dit : est-ce qu’il existe un WYSIWYG pour éditer du code source ? Et là, je me suis souvenu de JS Bin : il utilise un éditeur de code source parfait qui s’intègre au navigateur. J’ai donc fouillé Google pour savoir quelle était la magie qui fait fonctionner cette chose. Et je suis tombé sur CodeMirror. AMAZING.

Sauf que : je ne sais pas développer une extension Chrome, et je n’ai pas l’envie (j’ai vu le bordel que c’était sur Firefox, j’ai vite abandonné).

Et nous y voilà.

CodeMirror for Pastebin : utilisation¶

En attendant que cette extension sorte un jour (je l’espère), j’ai donc mit les mains à la pâte en codant - à l’arrache - un bookmarklet (vous ne savez pas ce que c’est ?) qui remplit ce travail.

Pour l’utiliser, c’est très simple :

1. Glissez et déposez ce lien dans votre barre de favoris : CodeMirror for Pastebin
2. Pour le tester, allez sur Pastebin, sur la page de création d’un nouveau paste (ou d’édition)
3. Sélectionnez une syntaxe, selon le code que vous voulez insérer
4. Insérez votre code dans le champ de texte tout moche
5. Cliquez sur le bookmarklet que vous venez de glisser, dans votre barre de favoris

Pastebin ne vois que du feu, et le texte qui est envoyé est exempt de tout caractères mal encodés ou ajoutés à la volée.

Bien évidemment, il est possible de changer le thème de CodeMirror, ainsi que de modifier pas mal d’autres options mais uniquement dans le cas où une extension serait publiée (car il faudrait pouvoir enregistrer ce choix, non ?).

Attention !¶

Oui, il y a quand même des trucs qu’il faut que vous sachiez :

• A chaque fois que vous cliquerez sur ce bookmarklet, il importera un fichier Javascript distant dans le DOM, qui lui-même importeras 4 autres fichiers depuis ici : il ne faut donc pas s’inquiéter, je ne suis pas un vautour.
• Si vous cliquez plusieurs fois sur ce bookmarklet alors que CodeMirror est déjà en place, attendez-vous à une destruction de la couche d’ozone.
• Vous devrez cliquer sur ce bookmarklet à chaque fois que vous arriverez sur la page de création ou de modification d’un snippet de Pastebin (et oui, il ne se charge pas automatiquement, une extension pourrait faire ceci).
• Je l’ai déjà sans doute dit, mais les curieux qui jetterons un coup d’œil au code source (je ne cache rien, tout est dans le lien ci-dessus) remarqueront qu’il est vraiment dégueulasse : c’est normal, j’ai codé ça à l’arrache pour résoudre un de mes problèmes.
• Bien entendu, des comportements non désirés ou des bugs ne sont pas à exclure pour la raison ci-dessus.
• Il y a encore des choses à faire pour l’améliorer
• CodeMirror ne supporte que les langages suivants, si vous choisissez dans Pastebin un langage non-supporté, il refuseras de se lancer :
  • Clojure
  • Cobol
  • CoffeeScript
  • CSS
  • D
  • Diff
  • Erlang
  • Go
  • Groovy
  • Haskell
  • Haxe
  • HTML
  • Javascript
  • Lua
  • OCalm
  • Pascal
  • Perl
  • PHP
  • Properties
  • Python
  • R
  • RPM
  • Ruby
  • Scheme
  • SmallTalk
  • Smarty
  • SQL
  • TCL
  • VisualBasic
  • Verilog
  • XML
  • YAML
  • Z80 (qui utilise ça ?)

Changements¶

Je ne sais pas si ça sert à grand chose, mais je vais lister ici les changements effectués :

• 02 septembre 2013
  • Amélioration et corrections au niveau de la prise en compte des langages de Pastebin par CodeMirror (le bookmarklet seras plus à même de détecter le bon langage à utiliser)
  • Mise à jour du bookmarklet : ajout du fichier Javascript principal dans le plutôt que dans le

Si les changements ne prennent pas effet, videz le cache de votre navigateur.