寻找一种在 HTML 和 VIM 中直接生成漂亮代码部分的方法

Question

我想用 VIM 生成漂亮的 HTML 代码段代码（C、python 或其他代码）。

目前我只知道VIM“:TOhtml”下的命令，但结果似乎太基础了。

这是我想要得到的示例（带有行号和圆角）：

有谁知道快速制作这种演示文稿的方法吗？。即使 VIM 做不到，是否有一个工具允许获取原始代码部分并直接生成 HTML 代码，并具有必要的可定制 CSS ？

更新 1：

我通过首先用“:%set nu”显示行号并执行“:TOhtml”找到了部分解决方案。

所以我得到例如以下代码片段：

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

然后，我设置 CSS 样式：

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

我的问题发生在我使用 Firefox 或 Chrome 时：

1) 在第一种情况 (FF) 中，如果我从 html 页面复制代码，然后当我粘贴到 nedit 中时，每行与其他行分开一个空行。

2) 在第二种情况 (Chrome) 中，代码 selection 粘贴正确但行号也出现，我认为“user-select: none;”可以防止这种情况行为。

谁能帮我调试一下？

谢谢

更新 2：

我尝试了 zeppelin 建议的解决方案，但是“:TOhtml”命令生成的 vim 代码的 HTML 格式为：

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

或表格的另一部分：

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

以上HTML代码都不需要在每行输入代码前加一个标签。

你不觉得我的第一个方法不好吗（在nedit这样的编辑器中copy/paste时有一个空行）因为每一行都有不同的标签，我的意思是在第一个总是  "n-th line"  ?

例如，让我们以这一行为例：

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

问题是否来自其他  标签（#include  和 "clFFT.h"）？

当我复制一部分代码时，这两个另一个标签似乎产生回车符return，这将解释当我将它粘贴到文本编辑器时的空行，不是吗？

此致

更新 3 : 当我 copy/paste 最初由 VIM 命令生成的代码时，我没有发现任何关于我尝试删除空行的新内容:TOhtml，每个代码行的开头都有行号。例如，我再次向您展示生成的 HTML 代码：

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

我不希望在我 copy/paste 页面中的某些代码时 select 编辑行号。这就是为什么我在 CSS 中使用 user-select: none; 作为 <span 标签。

也许，解决方案是删除回车 return（一旦我将代码粘贴到文本编辑器中，这似乎是双重的，因为每行复制的代码行之间都有空行）。

但是当我select一些代码并将其复制到Copy/Paste文本缓冲区时，我不知道如何删除第二个马车return。

我发现了关于以下内容的有趣讨论 link 但我不理解所有的细节：https://bugzilla.mozilla.org/show_bug.cgi?id=1273836

如果有人有什么想法或线索，告诉我就好了。

谢谢

Answer 1

一种选择是使用 highlight，并通过它来传输缓冲区：

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

--安第斯风格（"andes"主题）
--style-infile=/tmp/custom.css（从/tmp/custom.css添加CSS样式）
I - 用于 include 样式（内联 CSS）
S - 用于语法（语言=c）
l - 用于行号
F - 用于格式化（gnu 约定）

/tmp/custom.css（添加圆角）

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

示例输出

Answer 2

看起来至少在 Vim（8.1，2018 年）的最新版本中有 g:html_prevent_copy 并且您可以执行 let g:html_prevent_copy = "n" 以在生成 [= 时使行号不可复制15=] 与 :TOhtml.

寻找一种在 HTML 和 VIM 中直接生成漂亮代码部分的方法

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

html

css

vim

copy-paste