in-place replacement of code in HTML documents with TOhtml?

Question

I'm working on some old HTML documentation, where are multiple code snippets (several lines long). I need to replace this old HTML-ized code with new one using modern styling.

What I have now:

... ...
<pre>
<font color="ff0000">void</font> main() {
  <font color="00ff00">return</font> <font color="00ffff">0</font>;
}
</pre>
... ...

Now I can select this fragment between pre tags and remove all HTML using some keystrokes which I defined. The result is pure C code which looks like this:

... ...
void main() {
  return 0;
}
... ...

The final step, which is time consuming, is to select this clean code again, and run :TOhtml command, which generates the whole new HTML document (in new unsaved buffer) with proper highlighting of the code. I have to scroll thru this document, find pre tag and cut the styled code fragment. Then I have to close this new buffer, return to my old buffer, paste new code, and select and delete the old code AGAIN. This is awkard and very time consuming.

Question: how to select the old "bad" code and press one keystroke to have this work done? It has to be just cleaned from old HTML to pure cod and then colorized and the result should replace in-place the old code.

Desired result:

... ...
<pre class="code">
<span class="keyword">void</span> <span class="funcname">main</span>() {
  <span class="return">return</span> <span class="number">0</span>;
}
</pre>
... ...

CSS class names are irrelevant - I can style them in my external CSS file, they only have to be inserted. I prefer not to load any huge/junky/bloated/bundle plugin system.

Answer 1

OK, I need to think about something else than freaking Magento.

---

Pandoc would help with the first step but the rest can be done with pure Vim commands…

0. Tell :help :TOhtml to only generate fragments:

   :let g:html_no_doc = 1
   

1. Turn the legacy HTML into plain text:

   v<motion>
   :'<,'>!pandoc -f html -t plain
   

   See :help v, :help :range and :help :range!.

2. Indent the snippet properly:

   =']
   

   See :help = and :help '].

3. Execute :TOhtml on the relevant lines:

   :,']TOhtml
   

4. Yank the <pre> element:

   yat
   

   See :help at.

5. Get rid of the TOhtml buffer:

   :bw!
   

   See :help :bwipeout.

6. Replace the plain text block with the HTML:

   V']
   p
   

   See :help V.

…and automated relatively easily:

xnoremap <key> :!pandoc -f html -t plain<CR>=']:,']TOhtml<CR>yat:bwipeout!<CR>V']p

In action:

Answer 2

So far, I managed to solve this in two steps and one selection. Here is how it goes:

1. I select the fragment I wish to clean from HTML then I press my leader key and d. All HTML is cleaned, and the result is pure C code.

2. I select this code and press another key - in my case - shift+K. All code is changed in-place and now it contains coloring inserted as HTML spans with some classes I can then style.

Step one is done by defining a key which performs replacement on selection:

" d remove all HTML tags from  selection
vnoremap <leader>d :s/<\_.\{-1,\}>//g<CR>:'<,'>s/&quot;/"/g<CR>:'<,'>s/&lt;/</g<CR>:'<,'>s/&gt;/>/g<CR>

In this keystroke I defined few noticed html entities, like & lt; etc.

Step two was done by recording a macro and the by assign it to keystroke. First I carefully recorded a macro with qq, and then I copied it from :registers window to my config. After some tuning I get to this:

" this mapping IS converting any selected code to its HTML syntax highlighting
vmap K :TOhtml<CR>ggV/Code<CR>kd/<\/pre><CR>jdGVgg"*y:q!<CR>`>pkV`<d:.s/ id='vimCodeElement'/ class="code"/<CR>

This "solution" is not complete, because (CONS):

1. It requires to configure TOhtml first (for disabling line numbers, expanding tab, etc. - so I put global variables configuring that to my vimrc file, which is not needed. I think you should be done with augroup and autocmd maybe, because this context is valid only for HTML documents and conversion to HTML from C

2. To achieve in-place replacement, I have to select text twice - first for cleaning, then for conversion. It may be good when I would like to investigate how old code was cleaned up (maybe some entities remain, who knows), but in general, in proper and complete HTML removal, this would not be necessary. It should be converted at once.

3. Keystrokes and general solution I've found seems vulnerable. There are <CR>'s in the command and command like typing - somehow this is rather hacky and nasty way of doing job. And it is 'readonly' - it's hard to change anything inside those commands.

So, I think that there could be a nicer solution to that, and more universal. However, it has a huge PRO: it is done with just two selection actions and two keystrokes. For me it's a huge improvement.