Looking for a way to produce directly pretty code section in HTML with VIM

Question

I would like to generate, with VIM, pretty HTML code of code snippet (C, python or others).

Right now, I know only the command under VIM ":TOhtml" but the result seems to be too basic.

Here's an example of what I would like to get (with lines number and round corners) :

Does anyone know a way to produce quickly this kind of presentation ?. Even if VIM can't do it, is there a tool which allows to take the raw code section and generate directly HTML code with necessary customisable CSS ?

UPDATE 1 :

I found partially a solution by firstly showing the lines numbers with ":%set nu" and doing ":TOhtml".

So I get for example the following code snippet :

<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>

Then, I set in CSS style :

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

My issue happens when I am on Firefox or Chrome :

1) In the first case (FF), if I copy from html page the code, then when I paste into nedit for example, each line is separated of 1 blank line from the other ones.

2) In the second case (Chrome), the code selection is pasted correctly but the lines numbers also appears, I thought that "user-select: none;" could prevent this behavior.

Anyone could help me to debug it ?

Thanks

UPDATE 2 :

I tried the solution suggested by zeppelin but the HTML code generated by ":TOhtml" command into vim is of form :

<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>));
  }

or another part of form :

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);

Both above HTML code have not necessary a <span> tag in front of each line of input code.

Don't you think that my first method is not good (there is a blank line when copy/paste in an editor like nedit) because of the presence of different tag on each line, I mean after the first one which is always <span id="L1" class="LineNr"> "n-th line" </span> ?

For example, let's take this line :

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

Does problem come from the others <span> tags (<span class="PreProc">#include </span> and <span class="Constant">&quot;clFFT.h&quot;</span>) ??

It seems these 2 another tags produce carriage return when I copy a part of code, that would explain the blank line when I paste it in a text editor, doens't it ?

Regards

UPDATE 3 : I didn't find anything new about my attempt to remove blank lines when I copy/paste a code initially generated by VIM command :TOhtml, with line number for each starting of code line. For example, I show you again the generated HTML code :

<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>

I don't want lines numbers to be selected when I copy/paste some code from the page. That's why I used user-select: none; into my CSS for <span tag.

Maybe, the solution is to remove the carriage return (which seems to be double once I paste the code in a text editor because there are blank lines between each copied lines of the code).

But I don't know how to remove the second carriage return when I select some code and copy it into Copy/Paste text buffer.

I found an interesting discussion on the following link but I didn't understand all the subtilities : https://bugzilla.mozilla.org/show_bug.cgi?id=1273836

If someone had some idea or clues, this would be nice to tell it to me.

Thanks

Answer 1

One option is to use highlight, and pipe your buffer through it:

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

• --style andes ("andes" theme)
• --style-infile=/tmp/custom.css (add CSS styles from /tmp/custom.css)
• I - is for include style (inline CSS)
• S - is for syntax (language = c)
• l - is for line numbers
• F - is for formatting (gnu conventions)

/tmp/custom.css (adds round corners)

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

Sample output

Answer 2

It looks like at least in recent versions of Vim (8.1, in 2018) there is g:html_prevent_copy and you can do let g:html_prevent_copy = "n" to make line numbers uncopyable when generating HTML with :TOhtml.