2017-01-24 11 views
0

Я хотел бы сгенерировать с VIM довольно HTML-код фрагмента кода (C, python или другие).Ищете способ создать очень красивую секцию кода в HTML с VIM

Прямо сейчас, я знаю только команду под VIM «:TOhtml», но результат кажется слишком простым.

Вот пример того, что я хотел бы получить (с числом линий и закругленными углами):

example

Кто-нибудь знает способ быстро производить такого рода презентации?. Даже если VIM не может этого сделать, есть ли инструмент, который позволяет взять раздел необработанного кода и сгенерировать непосредственно HTML-код с необходимым настраиваемым CSS?

ОБНОВЛЕНИЕ 1:

Я нашел решение частично путем, во-первых, показывающий число линий с «:% множества пи» и делать «: 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;» может помешать этому поведению.

Любой может помочь мне отладить его?

Благодаря

UPDATE 2:

Я попробовал решение, предложенное zeppelin но HTML код, сгенерированный ":TOhtml" команда в 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>) ??

Кажется, что эти 2 других метки производят возврат каретки, когда я копирую часть кода, что объясняет пустую строку, когда я вставляю ее в текстовый редактор, не так ли?

С уважением

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

Возможно, решение состоит в том, чтобы удалить возврат каретки (который, кажется, двойной, если я вставляю код в текстовый редактор, потому что между каждой скопированной строкой кода есть пустые строки).

Но я не знаю, как удалить второй возврат каретки, когда я выберу код и скопирую его в буфер копирования Copy/Paste.

я нашел интересную дискуссию по следующей ссылке, но я не понял, все subtilities: https://bugzilla.mozilla.org/show_bug.cgi?id=1273836

Если кто-то имел некоторое представление о том или улики, это было бы хорошо, чтобы сказать мне.

Благодаря

+0

решения частично сделан для закругленных углов с помощью CSS. и как насчет генерации неизбираемых номеров строк? – youpilat13

+0

Я могу вставить номер строки с «: set nu» перед командой «: TOhtml», но эти номера строк можно выбрать с помощью мыши, когда я хочу скопировать/вставить фрагмент кода. – youpilat13

ответ

0

Одним из вариантов является использование highlight и труб вашего буфера через него:

%!highlight --style andes -I --style-infile=/tmp/custom.css -S c -l -F gnu 
  • --Тип Анда ("Анды" тема)
  • --Тип-входной_файл =/tmp/custom.css (добавить стили CSS из /tmp/custom.css)
  • I - для включает стиль (inline CSS)
  • S - для синтаксиса (язык = c)
  • л - для номеров строк
  • F - для форматирования (gnu конвенции)

/TMP/пользовательские ,CSS (добавляет скругленные углы)

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

Пример вывод

enter image description here

+0

Я только что протестировал ваше решение, но номера строк по-прежнему можно выбрать, когда я хочу скопировать/вставить код, я посмотрю, есть ли возможность предотвратить этот выбор. – youpilat13

+0

Я нашел решение с помощью «-moz-user-select: none;», спасибо – youpilat13

+0

все еще проблема с поведением фрагмента кода копирования и вставка его в текстовый редактор (например, nedit), см. Мой ** ОБНОВЛЕНИЕ 1 ** выше – youpilat13

 Смежные вопросы

  • Нет связанных вопросов^_^