Convert lines into list in web-mode

Question

How can I convert a number of lines with text into a list?

Input:

line one
line two

Then I want to mark the lines and after executing a function it should be:

<ul>
  <li>line one</li>
  </li>line two</li>
</ul>

I know I can use web-mode-element-wrap to wrap the lines with the <ul> tags, but I'm not sure, how to iterate over the lines in a region.

Or is there already some built-in way to do this in web-mode?

post a feature request on github. I ll work on this – fxbois May 28 '16 at 12:36 — fxbois, May 28 '16 at 12:36

score 1 · Answer 1 · answered May 27 '16 at 18:11

Depending on how much of it you want automated you can use a macro or write your own function. I think a macro is easiest.

macro:

To set up this macro you can go to the beginning of the first line and hit f3 you can then type <li> hit C-e and then type </li> and finally hit C-n C-a . To end the macro hit f4 .

Now you can hit f4 and it will wrap each line. You can hit it many times, give a prefix arg, or you can highlight every line and press M-x apply-macro-to-region-lines (also bound to C-x C-k r ) this will apply your macro to every line. TADA!

The function is harder to write and will only be useful for this one use so pick your poison!

If you use multiple-cursors then a whole different world of possibilities opens ;)

Let me know if this wasn't very clear

Hello Jules, thanks for your answer. This would solve the problem but I'm thinking of a more generic aproach. So, I'll post a feature request on github. — Tom, May 29 '16 at 11:15

Konstantin Morenko · Answer 2 · 2016-07-28T05:40:21.097

Lets start with conversion one line with this function

(defun wrap-line (before after)
  "Convert line at the point adding BEFORE and AFTER."
  (save-excursion
    (progn
      (goto-char (line-beginning-position))
      (insert before)
      (goto-char (line-end-position))
      (insert after))))

You could wrap line into <li> and </li> with function

(defun wrap-into-li ()
  (interactive)
  (wrap-line "<li>" "</li>"))

This function do the same that @Jules macros in another answer. And you could set key for this with, for example

(global-set-key (kbd "C-c w l") 'wrap-into-li)

You could convert block from start till end with markers of block and each line with function:

(defun wrap-block (start end before-block after-block before-line after-line)
  "Wrap each line and whole block.
   Wrap block from START till END with BEFORE-BLOCK and AFTER-BLOCK
   and wrap each line inside with BEFORE-LINE and AFTER-LINE."
  (save-excursion
    (goto-char start)
    (goto-char (line-beginning-position))
    (insert before-block) (newline)
    (while (<= (point) end)
      (wrap-line before-line after-line)
      (forward-line 1))
    (insert after-block) (newline)))

And you could use this function on region and make block <ul> (marked) with:

(defun make-region-ul (start end)
  (interactive "r")
  (wrap-block start end "<ul>" "</ul>" "<li>" "</li>"))

or make block <ol> (numbered) with:

(defun make-region-ol (start end)
  (interactive "r")
  (wrap-block start end "<ol>" "</ol>" "<li>" "</li>"))

and bound this functions to keys:

(global-set-key (kbd "C-c w u") 'make-region-ul)
(global-set-key (kbd "C-c w o") 'make-region-ol)

Convert lines into list in web-mode

2 Answers2