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

Question

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

我现在只知道VIM下的命令“:TOhtml”，结果好像太基础了。

这是我想要得到的示例(带有行号和圆 Angular ):

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

更新 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) 中，代码选择粘贴正确但行号也出现，我认为“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">&quot;clFFT.h&quot;</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>

我不希望在从页面复制/粘贴某些代码时选择行号。这就是我使用 user-select: none; 的原因进入我的 CSS <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(添加圆 Angular )

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

示例输出