タグ

emacsとhtmlに関するaki77のブックマーク (11)

  • emacsでviewファイルをいじるならweb-modeを使うべき - UNIX的なアレ

    htmlPHPが混在するファイルをいじるときが問題だ emacsで何らかのMVCフレームワークを使っているとき、viewファイルをどのmodeで開くのかが問題です。 純粋なHTMLならhtml-modeを使えばよいですし、純粋なPHPならphp-modeを使うと思います。 しかし、以下の様なコードが出てきた時どちらのモードで開発してもしっくりきません。 <div class="foo"> <?php if ($flg): ?> FLG is ON <?php else:?> FLG is OFF <?php endif ?> </div> この対処方法をいくつか試してみたので紹介します。 mmm-mode https://github.com/purcell/mmm-mode emacs古来からの方法だと、mmm-modeを使うのが主流っぽい。これは、1つのファイルの中で複数のメジャーモ

    emacsでviewファイルをいじるならweb-modeを使うべき - UNIX的なアレ
  • Emacsで「<」「>」を手打ちしないHTML編集 - Qiita

    Emacsのはなしです。 さいきんEmacs Rocksというのを見つけて興奮しております。 その中で見た、HTMLに関わるEmacsコマンド等を勉強したのでメモ。 Emacs Rocks! Episode 12: Working with HTML zen-coding このあいだ入れたzen-codingです。やっぱり便利ですね。 こまかい説明は省きますが、zen-codingを使うと 手打ちするのがダルい、ネスト深めなHTMLとかも一瞬で出せます。 例えば、zen-codingのmodeで開いたファイルで、

    Emacsで「<」「>」を手打ちしないHTML編集 - Qiita
  • Emacsでhtml書いてる人、必見 web-mode.el - Web学び

    2012年 10月 9日 出ましたよ!新しくhtmlに特化したEmacsのメジャーモード。 web-mode.el htmlにごちゃごちゃ書き過ぎるのはあれですが、html中のCSS,PHP,JavaScript,Java/JSP,ASPXを色分け出来きて、インデントを統一できるのは便利です。 PHPフレームワークのテンプレートなどに有用ですね。 良いなと思った機能 web-mode-toggle-folding "C-c C-f" HTMLタグを折り畳む機能です。カーソルの位置のタグ内が省略されアンダーラインでマークされます。戻すときも"C-c C-f"です。 web-mode-rename-element "C-c C-r" タグの開始タグと終了タグの名前を変えてくれます。 web-mode-match-tag "C-c C-n" タグの開始タグと終了タグにカーソルを持っていってくれま

    Emacsでhtml書いてる人、必見 web-mode.el - Web学び
  • Haml で emacs のリージョン内の HTML を整形する - わからん

    HTML のインデントを綺麗にそろえる Ham Cutlet というWeb サービスを試してみたのですが、整形対象をテキストエリアにコピペして送信ボタンを押して結果をクリップボードに入れてという過程が面倒だったので、似たようなことを emacs 内でリージョン選択して実行できるようにしました。Ham Cutlet にならい、HTML -> Haml -> HTML という変換で整形+α のことするという仕組みです。 まず、gem で haml をインストールします。次に ~/bin などのパスの通ったところに 以下の内容を hamcutlet.rb という名前で保存し、実行権限を与えます。 #!/usr/bin/env ruby require 'rubygems' require 'haml/html' haml = Haml::HTML.new(ARGV[0]).render puts

    Haml で emacs のリージョン内の HTML を整形する - わからん
  • リージョンの "&" を "&amp;" にしたり、その逆をしたりする拡張 htmlutils.el の紹介 - わからん

    https://gist.github.com/436913 で公開されている htmlutils.el は、"&"、"<"、">"、シングルクオート、ダブルクオートを "&amp;"、"&lt;"、"&gt;"、"&39;"、"&quot;" におきかえたり、その逆をしたりする拡張。 M-x で呼びだせるコマンドは次の8つ。 html-escape-str : Escape (quote) a character for HTML html-unescape-str : Un-escape an HTML entity string url-quote-str : Quote special characters in a URL string url-unquote-str : Unquote special characters in a URL string html-escape

  • zencoding-mode.el は既に、yasnippet との協調を実装している - すばらしい新世界

    スニペット補完後のカーソルの位置が、あまり使いやすくない。 zencoding-mode.el を眺めていて気づいたんだけど、zencoding-mode はすでにyasnippetとの協調を実装していて、これによって上の要望を解決している模様 (zencoding-mode:version 0.5(2009-11-20)版)。 zencoding-expand-yas という関数が、それ。 比較例 次の文字列を入力して、展開する。 div>p*2 zencoding-expand-line (yasnippetと協調しない) の場合 次のように展開される。[] は、展開直後のポイントの位置。まぁこれは確かにポイントをp要素に移動させるのが面倒くさい。 <div> <p> </p> <p> </p> </div>[] zencoding-expand-yas (yasnippet協調) の

    zencoding-mode.el は既に、yasnippet との協調を実装している - すばらしい新世界
    aki77
    aki77 2010/12/03
    『yasnippet を利用している環境でzencoding-modeを使う人は、zencoding-expand-line の代わりに zencoding-expand-yas を利用すべし』
  • 簡単な入力するだけでHTMLタグを生成してくれるZenCoding | Happy My Life

    EmacsWiki: Zen Codingより。 ZenCoding-modeというHTMLを簡単に入力できるモードがある。 これを活用する事で、Emacs上でタグを簡単な記法で書いた後、C-とする事でHTMLに展開する事が可能になる。 このメリットとして、文字入力が少なくなる上に、タグの閉じ忘れもなくなるので早くて正確にHTMLが生成できる。 このHTML化できるというのが重要。Hamlのような独自記法だと、プログラマーに取っては楽に記述、編集ができるという便利なフォーマットなのだが、デザイナーにとっては、使いなれたデザインソフトが使えないという、非常に不便なフォーマット、という事になる。 しかし、ZenCodingだと最終的にはHTMLに変換されるので、プログラマは簡単に記述できる。デザイナーはあとで楽に編集できるという、何方にもメリットとなる。 サンプル どのような入力で、どのように

  • EmacsWiki: Zen Coding

    Zen Coding refers to a neat way to write markup quickly. The following blogs provide summary and examples: http://www.456bereastreet.com/archive/200909/write_html_and_css_quicker_with_with_zen_coding/http://mondaybynoon.com/2009/08/17/the-art-of-zen-coding-bringing-snippets-to-a-new-level/ (skip the cruft about snippets)EmmetZen Coding has been renamed to Emmet and includes an expanded feature set

    aki77
    aki77 2009/11/09
    div#name.one.two → <div id="name" class="one two"></div>
  • Using flymake in emacs to validate html as you type

    Using flymake in emacs to validate html as you type February 23, 2009 at 11:46 pm 3 comments Flymake is a general emacs plugin which allows you to run an external validator against a buffer’s content and visually report errors. The effects are quite similar to the red underlining you will see in some IDEs (e.g visual studio) – but can, with some work, be used for any file format with a validator.

    Using flymake in emacs to validate html as you type
    aki77
    aki77 2009/02/25
    flymake
  • emacsでHTMLを編集するモードを比較してみた。 - shortcut

    webのいろんなデザインを生業にしている人間のちょっとしたTipsだったりメモだったり。 webのフロント技術について書く事が多いです。 もう5年以上使っているにも関わらず前々使い方を知らなかったりするemacsですが、ようやくきちんと勉強しようと言う気になったので調べてみました。 いままでも、HTMLとかCSSを書くときにもっとemacs使おうと思いつつ、テキストエディタのHTML編集モードやDreamWeaverといった分かりやすいエディタにフラフラ逃げていた訳ですが、今年はモヒカン度合いを高めようと思い、積極的に使って行こうと思います。 なぜviでないかというのはおいておいて。 という訳で、まずはHTMLemacsでHTMLを書くためのモードはいくつかあり、 html-mode html-helper-mode psgml-mode(xml-mode or sgml-mod

  • 閑古鳥 -> 呟き -> emacs で PHP-mode と mmm-mode を使う

    まえがき PHP のスクリプトを書く時にあると便利な emacs 用の PHP-mode のインストール方法と、ついでに html-mode 等との同一バッファ内での同居をさせるための mmm-mode のインストール方法。覚え書き。 emacs や php を使用していない方などには無益な情報。そうでない人にも簡単なことしか書いてないのでそう役にも立たないでしょうが、日語の解説ページがひとつもなかったので、まぁ、ないよりはいいかと。 インストール方法 PHP-modeのインストールは簡単。まず、Project: PHP mode for Emacs: Summaryから最新の php-mode-*.el をダウンロードします。 * の部分はバージョン。 次にダウンロードしたファイルを site-lisp ディレクトリにコピーします。例えば /usr/local/share/em

  • 1