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

Question

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

目前我只知道vim下的命令“:TOhtml”，但是结果好像太基础了。

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

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

更新 1：

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

所以我得到例如以下代码 sn-p ：

<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 中时，例如，每一行都由 1 个空白行与其他空白行分隔。

2）在第二种情况下（Chrome），代码选择被正确粘贴但行号也出现了，我认为“user-select: none;”可以防止这种行为。

谁能帮我调试一下？

谢谢

更新 2：

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

<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 代码都不需要在每行输入代码前面加上 <span> 标签。

你不认为我的第一种方法不好（在像 nedit 这样的编辑器中复制/粘贴时有一个空白行），因为每行存在不同的标签，我的意思是在第一个之后总是<span id="L1" class="LineNr"> "n-th line" </span> ?

例如，让我们采取这一行：

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

问题是否来自其他 <span> 标签（<span class="PreProc">#include </span> 和 <span class="Constant">"clFFT.h"</span>）？

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

问候

更新 3：当我复制/粘贴最初由 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>

当我从页面复制/粘贴一些代码时，我不希望选择行号。这就是为什么我在我的 CSS 中使用 user-select: none; 作为<span 标签的原因。

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

但是当我选择一些代码并将其复制到复制/粘贴文本缓冲区时，我不知道如何删除第二个回车。

我在以下链接上发现了一个有趣的讨论，但我不明白所有的细节：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 

• --style andes（“andes”主题）
• --style-infile=/tmp/custom.css（从 /tmp/custom.css 添加 CSS 样式）
• I - 用于包含样式（内联 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" 使行号在使用 :TOhtml 生成 HTML 时不可复制。