タグ別アーカイブ: HTML

[HTML]リージョン内の各行をリストタグで囲む

べた書きテキストの各行をHTMLのリストタグ<li></li>で囲みたい、というシチュエーションがよくあるんですがいまいちこれといった方法がわからず、
結局いつも改行を「</li><li>」に置換するという泥臭い手法をとっていたのですが
いい加減面倒になってきたので関数作ってみました。

html-modeかweb-modeあたりを探せば似たような機能がありそうな気はするんだけど見つけられなかったので…

(defun li (beg end)
  "リージョン内の各行を<li></li>で囲む"
  (interactive "r")
  (save-excursion
    (goto-char beg)
    (let* ((num-lines (count-lines (point) end))
           (line-num 0))
      (while (< line-num num-lines)
        (back-to-indentation) ;; お好みで(beginning-of-line)でも
        (insert "<li>")
        (end-of-line)
        (insert "</li>")
        (setq line-num (1+ line-num))
        (next-line)
        ))))

タグ名を入力させるようにしたらより汎用的かも。でも今のところli以外で囲むことってあまりないからとりあえずこれでいいや。

 

HTMLタグをエスケープする

HTMLを書いているときに、<, >, & を &lt;, &gt;, &amp; に変換したくなるときってありますよね。
(というか今まさにこの文章を書きながらその必要に迫られてますね!)

以前はyahtml-modeを使っていたので yahtml-translate-region を使っていてたのですが、最近はweb-modeや素のhtml-modeを使うようになったので。
web-modeにも同じような機能があるはずだと思い探してみたのですが、見つからない…
web-mode-dom-xml-replace がそれっぽい感じはするのですが、いまいち思ったように動いてくれない…

で、結局、sgml-modeの

sgml-quote

を使えばいいらしい。
逆にエスケープ解除したいときは

C-u M-x sgml-quote

でいける。ふむ。

 

web-modeでハイライトがうまくいかない

web-modeでphpとhtmlの混合ファイルを開くと、global-font-lock がオンになっているにもかかわらずハイライトが消える。
ここで M-x font-lock-mode すると、font-lock が disable になったうえで、なぜかコードに色がつき、whitespace-modeで色付けしていた空白の色が消える。

調べてみると、どうも whitespace-mode と web-mode の相性が悪いらしい。
Syntax highlighting vanishing · Issue #119 · fxbois/web-mode · GitHub
Incorrect syntax highlighting · Issue #18 · fxbois/web-mode · GitHub

うーん。global-whitespace-mode は切りたくないんだよなあ。なんかうまい方法ないものか。

 ***

php,html.js なんかが入り混じったファイルの編集と言えば昔ながらのmmm-modeとかありますが、
今ではいろいろ選択肢が増えてるらしい。
EmacsWiki: Multiple Modes
mumamoっていうのもよく聞くけど使ったことないなあ。

web-mode だと html-mode の各種機能が使えないのが不便だったりするし、
やっぱり素直にmmm系使った方がいいのか。
暇なときにいろいろ使い比べてみたい。
どっかに比較記事落ちてないかなあ。

 

続・HTMLのtableタグを生成する

前に「HTMLのtableタグを生成する」というのを書いたものの、
どうもやっぱりいまいち使いづらくて他の方法をいろいろ試していたんですが、
結果としてorg-modeを使うのが一番簡単かなーと思ったのでメモしておきます。

org-modeの使い方についてはググればいくらでも出てくるので省略。

テーブル作成

org書式だとこんな感じ。

|              | 見出し1 | 見出し2 |
|--------------+---------+---------|
| テスト       | テスト  | テスト  |
| テストテスト | *test*  | test    |

パイプを入力したら、あとは適当にTab押してるといい感じに整形してくれます。便利。

CSVからテーブル作成

a,b,c
d,e,f
g,h,i

こんな状態の部分をリージョン選択して、「C-c |」(エルじゃなくてパイプ)すると…

| a | b | c |
| d | e | f |
| g | h | i |

わあ便利!

HTML出力

普通に「C-c C-e h」でファイルごと出力するのもありですが、
表の場所で「M-x org-table-export RET」→ファイル名入力→「orgtbl-to-html(自動で入力される)」とすれば、テーブル部分だけをエクスポートしてくれるようです。

<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
<colgroup><col class="left" /><col class="left" /><col class="left" />
</colgroup>
<thead>
<tr><th scope="col" class="left"></th><th scope="col" class="left">見出し1</th><th scope="col" class="left">見出し2</th></tr>
</thead>
<tbody>
<tr><td class="left">テスト</td><td class="left">テスト</td><td class="left">テスト</td></tr>
<tr><td class="left">テストテスト</td><td class="left"><b>test</b></td><td class="left">test</td></tr>
</tbody>
</table>

tableタグのオプションが邪魔な場合はある程度設定でカスタマイズできるようです。

  (setq org-export-html-table-tag "<table>")
(setq org-export-table-header-tags '("<th>" . "</th>"))
(setq org-export-table-data-tags '("<td>" . "</td>"))
(setq org-export-html-table-align-individual-fields nil)
<table>
<colgroup><col class="left" /><col class="left" /><col class="left" />
</colgroup>
<thead>
<tr><th></th><th>見出し1</th><th>見出し2</th></tr>
</thead>
<tbody>
<tr><td>テスト</td><td>テスト</td><td>テスト</td></tr>
<tr><td>テストテスト</td><td><b>test</b></td><td>test</td></tr>
</tbody>
</table>
 

HTMLのtableタグを生成する

※続き→続・HTMLのtableタグを生成する

rowspan, colspan の込み入ったテーブルを作りたい時があって、
オンラインで何かいいジェネレータないかなと思って探したけどrowspan, colspan対応しているものがなかなか見つからなかった。
そういえばemacsにテーブルモードみたいなのあったんじゃない?あれ使ったらどうにかなるんじゃない?

調べてみたら標準機能でできた。

M-x table-insert

行・列数を聞かれるので適当に設定。

あとはテキストベースで票を編集していく。便利コマンドがいくつか。

C-> (table-widen-cell)    カーソル位置のセルを横拡張
C-< (table-shorten-cell)    カーソル位置のセルを横収縮
C-: (table-justify)    セル中の文字列の位置を操作(Left/Center/Right)
C-- (table-split-cell-vertically)    セルの横分割
C-| (table-split-cell-horizontally)    セルの縦分割
C-* (table-span-cell)    セルの結合

で、いい感じに表ができたところで、

C-^ (table-generate-source)

とすればHTMLに吐いてくれます。余計な nbsp なんかを適宜削ってやって完成。便利。

 

HTMLファイルが意図しない文字コードで保存される問題とか、その他文字コード関連

METAタグで「charset=”Shift_JIS”」とかなっていると、ファイルの文字コードを手動で変更しても勝手にSJISで保存されてしまう。なんでやねん。

(setq auto-coding-functions nil)

で解決。

 ***

ついでに文字コードまわりの操作備忘録

・現在開いているファイルの文字コードを変更する
→ C-x RET f

・現在開いているファイルを、文字コード指定して開きなおす
→ C-x RET r

忘れがちなので関数化しとくと楽かも。

・現在開いているファイルをUTF8として保存

(defun save-as-utf8()
(interactive)
(set-buffer-file-coding-system 'utf-8-unix)
(save-buffer))

・現在開いているファイルをUTF8として開きなおす

(defun find-file-utf8 ()
(interactive)
(let ((coding-system-for-read 'utf-8-unix)
(coding-system-for-write 'utf-8-unix))
(call-interactively 'find-alternate-file)))