Vous cherchez un moyen de produire directement une jolie section de code en HTML avec VIM

Je voudrais générer, avec VIM, du joli code HTML d'extrait de code (C, python ou autres).

Pour l'instant, je ne connais que la commande sous VIM " :TOhtml" mais le résultat me semble trop basique.

Voici un exemple de ce que j'aimerais obtenir (avec le nombre de lignes et les coins arrondis) :

Est-ce que quelqu'un connait un moyen de produire rapidement ce genre de présentation?. Même si VIM ne peut pas le faire, existe-t-il un outil qui permette de prendre la section de code brut et de générer directement du code HTML avec le CSS personnalisable nécessaire?

MISE À JOUR 1:

J'ai trouvé partiellement une solution en montrant d'abord les numéros de lignes avec ":%set nu" et en faisant ":TOhtml".

J'obtiens donc par exemple l'extrait de code suivant:

<pre id='vimCodeElement'>
<span id="L1" class="LineNr"> 1 </span><span class="PreProc">#include </span><span class="Constant">&quot;clFFT.h&quot;</span>
<span id="L2" class="LineNr"> 2 </span><span class="PreProc">#include </span><span class="Constant">&lt;stdio.h&gt;</span>
<span id="L3" class="LineNr"> 3 </span><span class="PreProc">#include </span><span class="Constant">&lt;stdlib.h&gt;</span>
<span id="L4" class="LineNr"> 4 </span><span class="PreProc">#include </span><span class="Constant">&lt;string.h&gt;</span>
<span id="L5" class="LineNr"> 5 </span><span class="PreProc">#include </span><span class="Constant">&lt;math.h&gt;</span>

Ensuite, j'ai mis en style CSS:

.LineNr { color: #007399;
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;
}

Mon problème se produit lorsque je suis sur Firefox ou Chrome:

1) Dans le premier cas (FF), si je copie depuis la page html le code, alors quand je colle dans nedit par exemple, chaque ligne est séparée d'une ligne vierge des autres.

2) Dans le second cas (Chrome), la sélection de code est collée correctement mais les numéros de lignes apparaissent également, je pensais que " user-select: none;" pourrait empêcher ce comportement.

Quelqu'un pourrait-il m'aider à le débugger?

Merci

MISE À JOUR 2:

J'ai essayé la solution suggérée par zeppelinmais le code HTML généré par la :TOhtmlcommande " " into vimest de la forme:

<span class="Comment">/*</span><span class="Comment"> Allocation of 2D arrays </span><span class="Comment">*/</span>
 x = malloc((size_tot_y)*<span class="Statement">sizeof</span>(<span class="Type">double</span>*));
 x0 = malloc((size_tot_y)*<span class="Statement">sizeof</span>(<span class="Type">double</span>*));
 <span class="Statement">for</span>(i=<span class="Constant">0</span>;i&lt;=size_tot_y-<span class="Constant">1</span>;i++)
 {
 x[i] = malloc((size_tot_x)*<span class="Statement">sizeof</span>(<span class="Type">double</span>));
 x0[i] = malloc((size_tot_x)*<span class="Statement">sizeof</span>(<span class="Type">double</span>));
 }

ou une autre partie du formulaire:

printf(<span class="Constant">&quot;Time step</span><span class="Special">\n</span><span class="Constant">&quot;</span>);
 scanf(<span class="Constant">&quot;</span><span class="Special">%lf</span><span class="Constant">&quot;</span>,&amp;dt1);
 printf(<span class="Constant">&quot;Convergence </span><span class="Special">\n</span><span class="Constant">&quot;</span>);
 scanf(<span class="Constant">&quot;</span><span class="Special">%lf</span><span class="Constant">&quot;</span>,&amp;epsilon);

Les deux codes HTML ci-dessus n'ont pas nécessairement de <span>balise devant chaque ligne de code d'entrée.

Ne pensez-vous pas que ma première méthode n'est pas bonne (il y a une ligne blanche lors d'un copier/coller dans un éditeur comme nedit) à cause de la présence de balises différentes sur chaque ligne, je veux dire après la première qui est toujours <span id="L1" class="LineNr"> "n-th line" </span>?

Prenons par exemple cette ligne:

<span id="L1" class="LineNr"> 1 </span><span class="PreProc">#include </span><span class="Constant">&quot;clFFT.h&quot;</span>

Le problème vient-il des autres <span>balises ( <span class="PreProc">#include </span>et <span class="Constant">&quot;clFFT.h&quot;</span>)??

Il semble que ces 2 autres balises produisent un retour chariot lorsque je copie une partie de code, cela expliquerait la ligne vide lorsque je la colle dans un éditeur de texte, n'est-ce pas?

Salutations

MISE À JOUR 3: Je n'ai rien trouvé de nouveau sur ma tentative de supprimer les lignes vides lorsque je copie/colle un code initialement généré par VIMcommand :TOhtml, avec un numéro de ligne pour chaque début de ligne de code. Par exemple, je vous montre à nouveau le code HTML généré:

<pre id='vimCodeElement'>
<span id="L1" class="LineNr"> 1 </span><span class="PreProc">#include </span><span class="Constant">&quot;clFFT.h&quot;</span>
<span id="L2" class="LineNr"> 2 </span><span class="PreProc">#include </span><span class="Constant">&lt;stdio.h&gt;</span>
<span id="L3" class="LineNr"> 3 </span><span class="PreProc">#include </span><span class="Constant">&lt;stdlib.h&gt;</span>
<span id="L4" class="LineNr"> 4 </span><span class="PreProc">#include </span><span class="Constant">&lt;string.h&gt;</span>
<span id="L5" class="LineNr"> 5 </span><span class="PreProc">#include </span><span class="Constant">&lt;math.h&gt;</span>

Je ne veux pas que les numéros de lignes soient sélectionnés lorsque je copie/colle du code de la page. C'est pourquoi j'ai utilisé user-select: none;dans mon CSS pour la <spanbalise.

Peut-être que la solution consiste à supprimer le retour chariot (qui semble être double une fois que je colle le code dans un éditeur de texte car il y a des lignes vides entre chaque ligne copiée du code).

Mais je ne sais pas comment supprimer le deuxième retour chariot lorsque je sélectionne du code et que je le copie dans le tampon de texte Copier/Coller.

J'ai trouvé une discussion intéressante sur le lien suivant mais je n'ai pas compris toutes les subtilités: https://bugzilla.mozilla.org/show_bug.cgi?id=1273836

Si quelqu'un avait une idée ou des indices, ce serait bien de me le dire.

Merci

Solution du problème

Une option consiste à utiliser highlight, et à y diriger votre tampon :

%!highlight --style andes -I --style-infile=/tmp/custom.css -S c -l -F gnu 

• --style andes (thème "andes")


• --style-infile=/tmp/custom.css (ajouter des styles CSS depuis /tmp/custom.css)


• I - est pour le style d'inclusion (CSS en ligne)


• S - est pour la syntaxe (langue = c)


• l - est pour les numéros de ligne


• F - est pour le formatage ( gnuconventions)

/tmp/custom.css (ajoute des coins arrondis)

pre {
 padding: 10px 20px 20px;
 border: 1px solid #777;
 border-radius: 1em;
}

Exemple de sortie