Il y a quelques mois, j'ai publié
mon premier post sur Habré. Certains d'entre vous remarqueront peut-être que le code de l'article est peint d'une manière inhabituelle et, surtout, correctement coloré, malgré le fait que l'éditeur de texte intégré sur le site ne prend pas en charge le balisage d'origine du code et surligne souvent ses éléments de manière incorrecte. En même temps, le code n'est pas inséré par l'image, comme le font certains écrivains complètement désespérés.
Dans mon cas, la préservation du balisage était particulièrement importante car l'article décrivait comment travailler sur le code. Pour résoudre le problème, j'ai créé un
outil qui vous permet de transférer la mise en évidence du code dans le schéma sélectionné d'IDEA vers un article sur Habré. Je vais parler du processus de création d'un outil et des fonctionnalités de son utilisation.
Pourquoi tout ça
À première vue, il peut sembler que cela soit fait par méfait, simplement parce que l'éclairage standard implémenté via la
<source> ne convient pas.
D'une certaine manière, c'est bien sûr vrai, mais pas tout à fait.
Premièrement, la mise en évidence à l'intérieur de la
<source> ne peut pas fonctionner avec des morceaux de code, car il n'y aura pas suffisamment d'informations pour la coloration. Tous les éléments déclarés hors du cadre de la pièce seront peints au hasard. Ce problème n'a pas de solution, car, à ma connaissance, aucun des services de coloration en ligne ne vous permet d'effectuer l'une des opérations suivantes:
- Collez le code de projet complet dans l'article sans l'afficher dans son intégralité, ou collez le lien vers la validation sur GitHub. Dans des endroits spécifiques de l'article, utilisez des coupures de lignes du code complet (avec une indication de la plage). Dans ce cas, le rétro-éclairage doit être déterminé en fonction du code complet, bien sûr.
- Indiquez des méta-informations explicites pour les éléments non définis. Une manière assez difficile pour l'utilisateur, mais je suis d'accord avec une telle chose.
Deuxièmement, la mise en évidence à l'intérieur de la
<source> n'est jamais égale au nombre de différents types d'éléments avec un IDE normal. Et en raison du problème décrit ci-dessus, effectuer une coloration avancée n'a aucun sens: personne n'insère le code de projet complet dans l'article, donc cette fonctionnalité ne fonctionnera pas.
Dans le même temps, la réalité est que des morceaux de code doivent être insérés dans les articles, et plus ils sont petits, mieux c'est.
Vous pouvez lire le code sans surligner, mais pourquoi.
Caractéristiques de Habr
IntelliJ IDEA a une prise en charge intégrée pour l'exportation de code vers HTML. La copie régulière du code place dans le presse-papiers, y compris le code en couleur, qui peut être lu en HTML.
Malheureusement, Habr n'autorise pas directement l'utilisation du balisage HTML dans les articles. Les raisons en sont un mystère recouvert d'obscurité, mais peut-être est-ce dû à l'unification de l'apparence des articles. Si vous autorisez l'utilisation de HTML dans les articles, il sera possible de rattraper son retard de telle sorte qu'il y aura des problèmes de visualisation.
Je soutiens généralement l'idée d'interdire le HTML dans les articles, mais il y a une mise en garde. Une ressource pour les professionnels de l'informatique, où le code est souvent discuté et il n'y a aucun moyen de l'insérer correctement dans un article, est en quelque sorte étrange.
Nous avons donc à notre disposition des balises
<b> ,
<i> ,
<font> . De plus, tout cela fonctionne à l'intérieur de la
<code> , qui est nécessaire pour le formatage. Eh bien,
; Ils nous ont également sauvés, ce qui est utile pour les longues lignes de code et l'indentation.
Inutile de dire que toutes les façons standard d'obtenir du code HTML d'IDEA ne donnent pas du tout ce code HTML, donc le travail de conversion va être assez important.
L'approche
Pour commencer, il convient de remercier l'auteur
capslocky pour son
matériel sur ce sujet. Je n'ai pas utilisé directement l'outil proposé dans l'article, et cela n'aurait pas pu arriver, mais grâce à ce matériel j'ai compris toute la profondeur du problème et en même temps j'ai ressenti un vent d'espoir.
Le seul inconvénient de cette publication est la grande quantité de code combinée à une très faible explication de ce qu'elle fait et pourquoi.
J'essaierai de corriger la situation et de décrire ce que vous aurez à faire avec votre balisage HTML si vous souhaitez l'amener dans un formulaire prêt à être inséré dans Habr.
- Avant d'exporter, vous devez définir le jeu de couleurs souhaité dans IDEA, par exemple, à partir du site Web Color Themes . Le code sera exporté avec le schéma sélectionné. Il est préférable de choisir un schéma avec un fond blanc (car le fond ne peut pas être défini sur le Habré) et sans soulignement. Je ne pensais pas à quel point il était facile de les faire glisser, parce que je ne voulais pas vraiment.
- Nous travaillons uniquement avec les éléments internes de la
<pre> . Même si vous n'utilisez pas l'exportation depuis IDEA, mais une autre, il y aura probablement cette balise dans le balisage HTML, car sans elle, il est difficile de formater correctement le code. La balise elle-même est supprimée et remplacée par <code> . - Le texte sera très probablement présenté comme un
<span> avec différents styles. Ils doivent tous se débarrasser. De nombreux services de coloration apportent des styles dans une feuille de style, ce qui est logique et utilisent des liens vers des noms de style. Plus précisément, IDEA ne le fait pas encore, ce qui rend la tâche un peu plus facile (les paramètres de style se trouvent directement dans <span> ). - Définissez la couleur de la police via la
<font> . Malheureusement, la couleur d'arrière-plan ne peut pas être définie. - Nous transformons la propriété
font-style:italic en une paire de balises <i> </i> , et font-weight:bold en <b> </b> . - Remplacez tous les espaces par
; . - Les sauts de ligne sous la forme de
<br> remplacés par \n . - Le balisage HTML dans IDEA produit des lignes vides avec des styles et des espaces à partir d'espaces avec des styles. Il est préférable de supprimer ces styles: cela réduira considérablement la longueur et augmentera la compréhensibilité du code.
- Assurez-vous que les sauts de ligne n'ont aucun style. Sinon, il y aura des problèmes avec les lignes vides.
Le dernier paragraphe est illustré par un exemple:
<code>1 <font color="000000"></font> 2</code>Le code donné sera transformé par "Habr" en
12 . La même chose s'applique aux balises
<b> et
<i> , ainsi qu'à toute combinaison de celles-ci. Les sauts de ligne ne doivent pas avoir de style, puis tout ira bien.
Implémentation
Au début, la tâche d'écrire un convertisseur pour du code HTML arbitraire me semblait plutôt compliquée. Cependant, si vous décidez pour une version spécifique de HTML, tout n'est pas si mal. J'ai réussi à tout faire sur RegExp pur, c'est-à-dire même sans analyse HTML. Le problème principal s'est avéré identifier les caractéristiques du balisage "Habr".
Pour que les sauts de ligne n'aient pas de styles, j'ai dû faire des remplacements assez délicats, qui sont probablement les plus incompréhensibles (voir la fonction popupBr). L'idée est que les balises
<br> après chaque remplacement "surgissent" de la profondeur des balises de mise en forme vers l'extérieur. Ainsi, après tous les remplacements, la balise
<br> est hors formatage.
De plus, il s'est avéré que IDEA place non seulement du texte enrichi dans le presse-papiers, mais aussi des objets plutôt délicats comme
application/x-java-jvm-local-objectref . Le problème est que la présence de tels objets dans le presse-papiers entraîne des erreurs persistantes dans ma console sur le sujet de la construction de DataFlavor. Malheureusement, vous ne pouvez rien faire: JDK fonctionne uniquement avec le presse-papiers. Pour moi, la découverte d'
un tel code était une découverte. Apparemment, les oncles intelligents qui ont écrit cela croient que cela fera l'affaire. En général, n'ayez pas peur des erreurs qui peuvent survenir lors de l'utilisation de l'outil.
Le projet est écrit en Kotlin et vit sur
GitHub .
Les suggestions d'amélioration sont les bienvenues! Par exemple, il serait bien de concevoir cet outil comme un plugin pour IDEA. Je n'ai pas encore trouvé de moyen simple de le faire: les sources du plugin Copy as HTML sont malheureusement fermées et il faut trop de temps pour comprendre comment écrire un tel plugin à partir de zéro.