My Emacs Web Development Environment Project

Tuesday, May 22, 2007

What Comes with Mewde?

New GNU Emacs CSS Mode

emacs_css_modeI was edit Karl Landstrom css-mode, mixed from Alex Shinn css-mode and Stefan Monnier css-mode from nxhtml-pack, at the end we have M-ENTER completion for property list; C-c C-c comment out region, C-c C-u url adding and imenu support. Additional, we have speedbar support for navigating css-source code, class, id's, html elements.

I'm using this mode with nxhtml-mode; hexcolour-display mode(for showing colors inside css files viewing hexcolors), tinypair-minor-mode(from tiny-tools-about ""(){} automatic insert process)... All of them give to complete powerful css processing for me...

These additional Modes inside package. For Details, please click to picture.

New GNU Emacs Javascript Mode

emacs_js_modeI was convert Xemacs last javascript mode; this mode support to new js libraries code navigation within speedbar, better than other GNU Emacs Javascript Modes. I added javascript-console support; I use [http://www.jsdb.org jsdb for win32] for working javascript shell inside win32 shell. You can see my dotemacs file how i configured. Now we have javascript-shell inside Emacs for testing basic javascript algorithims. Additional Mozill-Firefox Debugging support comes with minor js-mode; this modes give you connection to Mozilla-Firefox Environment for debugging. I just packaged and configured in my dot emacs...

For Details, please click to picture.

New GNU Emacs PHP Mode

php_mode_with_w3m This Mode not official Xemacs PHP Mode; it comes from Debotv and well documented. You can see in this address all specials.When I was discover; I said: Thanks God! This is what I was looking for PHP editing. Now we have VIM power inside Emacs to editing php code:) Even Zend Studio:)

I converted to GNU Emacs; I added from other GNU Emacs php mode; browse manual, check syntax and find documentation, speedbar and imenu support functions. All templates and indentations works great. Templates handle all php functions, class and loops like textmate style:) Automatic completion with just TAB keypressing. If you are install cygwin+w3m, you can look at the php functions from manual within Emacs Environment and w3m. If you are set to php path your win32 environment variables; you can check syntax just pressing f12. Besides, everything customizable. All Documentation in here: http://deboutv.free.fr/lisp/php/index.php Many powerful things in there. Discover it!

For Details, please click to picture.

New GNU Emacs Smarty Mode

This is the same place with php-mode. It was work with Xemacs, now work with GNU-Emacs:) All Smarty functions and templates handle with textmate style and tab completation. Details and Documentation in same place : http://deboutv.free.fr/lisp/smarty/index.php

MSF-ABBREV MODE

This mode not from me; but it looks like miracle:) Original Author and address here : http://www.bloomington.in.us/~brutt/msf-abbrev.html This mode gives to MACOSX Textmate Editor power for Emacs users. You can see all documentation and demo from author address. I added some html abbrevs for link-style-page-doctype-script-img-a and for page. Easy to adding abbrevs, just look at to documentation. I will add when I have newones..For installation and configuration look at Installation Wiki Page and My Dot Emacs.

Other Helpful Modes and My Dotemacs for Configuration

All other modes inside my site-lisp directory.

  • Apache-Mode : For editing all apache files
  • Ascii-Table : Easy insertation for Ascii characters
  • Color-Theme : Good Looking for Emacs Code Environment
  • CSV Mode : Editing comma-seperate files and looks like tabular-data viewing
  • Hexcolour Mode : For CSS files color property viewing.
  • Linkd Mode : Linking any files in your system within Emacs, very useful.
  • Pabbrev Mode: All buffer words can be complete with TAB press.
  • Textile Mode : Editing textile formating files. Useful when you are use Textpattern.
  • Tinypair Mode : Automatic Parenhesize, bracket,semicolon,etc insertation.
  • Wcy-swbuff.el : Just press Ctrl+TAB for buffer navigating.
  • Webblogger Mode: For Blogger-WP and other Blog softwares. You can edit entries within Emacs with xml-rpc interface.

My Dot Emacs

(custom-set-variables
;; custom-set-variables was added by Custom.
;; If you edit it by hand, you could mess it up, so be careful.
;; Your init file should contain only one such instance.
;; If there is more than one, they won't work right.
'(TeX-DVI-via-PDFTeX nil)
'(TeX-PDF-mode nil)
'(TeX-show-compilation t)
'(buffer-encoding (quote utf-8))
'(debug-on-error t)
'(htmlize-view-print-visible t t)
'(ispell-program-name "aspell")
'(javascript-shell-command "jsdb");;Javascript Shell from jsdb.org
'(javascript-shell-command-args (quote ("eval")))
'(menu-bar-mode nil)
'(nxhtml-default-encoding (quote utf-8))
'(nxhtml-load t);;Autoloading NXHTML Mode with css-js-php support
'(nxhtml-skip-welcome t)
'(nxml-slash-auto-complete-flag t)
'(pr-gs-command "c:\\gs\\gs8.56\\bin\\gswin32c.exe")
'(pr-gv-command "C:\\Program Files\\Ghostgum\\gsview\\gsview32.exe")
'(prefer-coding-system (quote utf-8))
'(recentf-mode t)
'(scroll-bar-mode nil)
'(selection-coding-system (quote utf-8-dos))
'(show-paren-mode t)
'(speedbar-show-unknown-files t);;All file can view inside speedbar
'(tidy-shell-command "c:/WINDOWS/tidy.exe");; For html tidy
'(tool-bar-mode nil)
'(transient-mark-mode t)
'(tumme-cmd-create-temp-image-program "c:/ImageMagick/convert.exe");;Picture vieving emacs inside (Emacs w32 Mode Addition
'(tumme-cmd-create-thumbnail-program "c:/ImageMagick/convert.exe")
'(tumme-cmd-rotate-thumbnail-program "c:/ImageMagick/mogrify.exe")
'(unibyte-display-via-language-environment t)
'(unify-8859-on-decoding-mode t)
'(utf-8-compose-scripts t)
'(utf-fragment-on-decoding t)
'(w32-print-menu-show-print nil)
'(w32-print-menu-show-ps-print nil)
'(w32shell-cygwin-bin "C:\\cygwin\\bin") ;;Emacs W32 Cygwin Shell Support
'(w32shell-msys-bin "C:\\msys\\1.0\\bin");;Emacs W32 MSYS Shell Support
'(w32shell-shell (quote cmd));;Emacs W32 Shell support
'(w3m-command "C:\\cygwin\\bin\\w3m.exe");;Emacs W32 W3M Support
'(w3m-use-tab t))

(custom-set-faces
;; custom-set-faces was added by Custom.
;; If you edit it by hand, you could mess it up, so be careful.
;; Your init file should contain only one such instance.
;; If there is more than one, they won't work right.
)
(set-default-font "-outline-Bitstream Vera Sans Mono-normal-r-normal-normal-13-97-96-96-c-*-utf-8")

(require 'color-theme)

;; Extra Color Themes from org mode author

(load "color-theme-cl-frame.el")
(load "color-theme-rlx.el")
(load "color-theme-colorful-obsolescence")

;(color-theme-charcoal-black)
;(color-theme-rlx)
;(color-theme-cl-frame)
(color-theme-colorful-obsolescence)
;(color-theme-blippblopp)
;(color-theme-charcoal-black)
;(color-theme-infodoc)
;(color-theme-jb-simple)
;(color-theme-digital-ofs1)
;(color-theme-goldenrod)
;(color-theme-comidia)

(setq query-replace-highlight t)
(setq search-highlight t)
(setq font-lock-maximum-decoration t)


;; My Global Key shorcuts

(global-set-key [f5]   'smarty-mode)
(global-set-key [(C f5)]   'surround-region-with-tag)

(global-set-key [f6]   'php-mode)
(global-set-key [(M f6)]   'list-colors-display)
(global-set-key [(shift f6)]   'tinypair-mode)
(global-set-key [(C f6)] 'cua-mode)


(global-set-key [f7]           'fold-dwim-toggle)
(global-set-key [(shift f7)]   'fold-dwim-show-all)
(global-set-key [(C f7)] 'fold-dwim-hide-all)
(global-set-key [(M f7)] 'setnu-mode)

(global-set-key [(shift f8)] 'color-theme-colorful-obsolescence)
(global-set-key [(C f8)]   'color-theme-rlx)
(global-set-key [(M f8)]   'color-theme-cl-frame)

(global-set-key [f9] 'nxhtml-mode)
(global-set-key [(shift f9)]   'html-mode)
(global-set-key [(C f9)] 'comment-region)
(global-set-key [(M f9)] 'uncomment-region)

(global-set-key [(f11)] 'pabbrev-mode)
(global-set-key [(shift f11)]   'hs-minor-mode)
(global-set-key [(C f11)]   'imenu-add-menubar-index)
(global-set-key [(M f11)] 'javascript-shell)

(global-set-key [(shift f12)] 'php-browse-manual)
(global-set-key [(M f12)] 'php-search-documentation)
(global-set-key [(f12)] 'php-check-syntax)
(global-set-key [(C f12)] 'speedbar)


;; Hexcolour Mode, showing colors inside css mode

(require 'palette);; This is palette.el

(autoload 'hexcolour-mode "hexcolour" nil t nil)
(defvar hexcolour-keywords
'(("#[abcdef[:digit:]]\\{6\\}"
 (0 (put-text-property (match-beginning 0)
                    (match-end 0)
                    'face (list :background
                             (match-string-no-properties 0)))))))

(defun hexcolour-add-to-font-lock ()
(font-lock-add-keywords nil hexcolour-keywords))


(add-hook 'css-mode-hook 'hexcolour-add-to-font-lock)
(add-hook 'css-mode-hook 'imenu-add-menubar-index)


;;rnc mode - nxml dosyalarini duzenleme icin

(autoload 'rnc-mode "rnc-mode")
(setq auto-mode-alist
    (cons '("\\.rnc\\'" . rnc-mode) auto-mode-alist))

;; DTD mode
(autoload 'dtd-mode "tdtd" "Major mode for SGML and XML DTDs." t)
(autoload 'dtd-etags "tdtd"
"Execute etags on FILESPEC and match on DTD-specific regular expressions."
t)
(autoload 'dtd-grep "tdtd" "Grep for PATTERN in files matching FILESPEC." t)
(setq auto-mode-alist (append (list
                            '("\\.dcl$" . dtd-mode)
                            '("\\.dec$" . dtd-mode)
                            '("\\.dtd$" . dtd-mode)
                            '("\\.ele$" . dtd-mode)
                            '("\\.ent$" . dtd-mode)
                            '("\\.mod$" . dtd-mode))
                           auto-mode-alist))

;;open office ve mozilla arsiv dosyalarını diredde acik gormek icin

(setq auto-mode-alist (cons '("\\.xpi$" . archive-mode) auto-mode-alist))

(setq auto-mode-alist (cons '("\\.sx$" . archive-mode) auto-mode-alist))

;; Ctrl+Tab for buffer switching

(require 'swbuff)

(require 'wcy-swbuff)
(global-set-key (kbd "") 'wcy-switch-buffer-forward)
(global-set-key (kbd "") 'wcy-switch-buffer-backward)


;; PHP Mode handling drupal module and other content-types

(setq auto-mode-alist
  (append '(("\\.\\(php\\|module\\|engine\\|inc\\|thtml\\)\\'" . php-mode)) auto-mode-alist))

(setq interpreter-mode-alist (append '(("php" . php-mode))
         interpreter-mode-alist))


;; Po files edit mode

(autoload 'po-mode "po-mode"
        "Major mode for translators to edit PO files" t)
(setq auto-mode-alist (cons '("\\.po\\'\\|\\.po\\." . po-mode)
   auto-mode-alist))

;; CSS, Javascript, php and txt mode use  tinypair mode for automatic insert brackets, " characters, this tinypair.el file comes with tinytools

(require 'tinypair)

;; Match Paren function

(global-set-key "%" 'match-paren)
(defun match-paren (arg)
"Go to the matching paren if on a paren; otherwise insert %."
(interactive "p")
(cond ((looking-at "\\s\(") (forward-list 1) (backward-char 1))
((looking-at "\\s\)") (forward-char 1) (backward-list 1))
(t (self-insert-command (or arg 1)))))

;; Cygwin w3m loading

(require 'w3m)
(setq browse-url-browser-function 'w3m-browse-url)

(require 'w3m-load)
(require 'pabbrev)
(require 'setnu)

;; show ascii table
;; optained from http://www.chrislott.org/geek/emacs/dotemacs.html
(defun ascii-table ()
"Print the ascii table. Based on a defun by Alex Schroeder "
(interactive)
(switch-to-buffer "*ASCII*")
(erase-buffer)
(insert (format "ASCII characters up to number %d.\n" 254))
(let ((i 0))
(while (<>")
   (goto-char (+ end 2 (length tag-name)))
   (insert "")))


;;Apache Mode-Handling Apache files

(autoload 'apache-mode "apache-mode" "autoloaded" t)
(add-to-list 'auto-mode-alist '("\\.htaccess$"   . apache-mode))
(add-to-list 'auto-mode-alist '("httpd\\.conf$"  . apache-mode))
(add-to-list 'auto-mode-alist '("srm\\.conf$"    . apache-mode))
(add-to-list 'auto-mode-alist '("access\\.conf$" . apache-mode))


;; Automatic imenu support for some modules

(setq javascript-load-hook (quote (imenu-add-menubar-index)))
(setq javascript-mode-hook (quote (imenu-add-menubar-index)))
(setq html-load-hook (quote (imenu-add-menubar-index)))
(setq html-mode-hook (quote (imenu-add-menubar-index)))
(setq emacs-lisp-load-hook (quote (imenu-add-menubar-index)))
(setq emacs-lisp-mode-hook (quote (imenu-add-menubar-index)))
(setq latex-load-hook (quote (imenu-add-menubar-index)))


;; Mozilla javascript console connection

(add-hook 'javascript-mode-hook 'js-mode)
(autoload 'js-mode "js-mode" nil t)


;; MSF-ABBREVS Mode- Textmate like snippets:)

;; ensure abbrev mode is always on

(setq-default abbrev-mode t)

;(msf-abbrev-load-tree "c:/Program Files/Emacs/site-lisp/mode-abbrevs")

(require 'msf-abbrev)
(setq msf-abbrev-verbose t) ;; optional
(setq msf-abbrev-root "c:/Program Files/Emacs/site-lisp/mode-abbrevs")
(global-set-key (kbd "C-c l") 'msf-abbrev-goto-root)
(global-set-key (kbd "C-c a") 'msf-abbrev-define-new-abbrev-this-mode)
(msf-abbrev-load)

;;Linkd Mode : Very useful for project managament-form org mode author

(require 'linkd)

(setq linkd-use-icons t)
(setq linkd-icons-directory "~/.linkd-icons")

(add-hook 'emacs-lisp-mode-hook 'linkd-mode)
(add-hook 'lisp-mode-hook 'linkd-mode)
(add-hook 'sh-mode-hook 'linkd-mode)
(add-hook 'text-mode-hook 'linkd-mode)

(global-set-key [(control \&)] 'linkd-follow-on-this-line)
(global-set-key [(control f3)] 'linkd-process-block)
(global-set-key (kbd "M-[") 'linkd-previous-link)
(global-set-key (kbd "M-]") 'linkd-next-link)
(global-set-key (kbd "M-RET") 'linkd-follow-at-point)

;; Paredit Mode for Lisp and Elisp

(require 'paredit)

(autoload 'paredit-mode "paredit"
"Minor mode for pseudo-structurally editing Lisp code."
t)


(mapc (lambda (mode)
(let ((hook (intern (concat (symbol-name mode)
     "-mode-hook"))))
(add-hook hook (lambda () (paredit-mode +1)))))
 '(emacs-lisp lisp inferior-lisp))

(load "auctex.el" nil t t)
     (load "preview-latex.el" nil t t)


;; Auctex Mode Conf with Reftex support

(setq TeX-auto-save t)
(setq TeX-parse-self t)
(setq-default TeX-master nil)

(add-hook 'LaTeX-mode-hook 'turn-on-reftex)
(setq reftex-plug-into-AUCTeX t)
(setq mode-line-format nil)

;; CSV Files viewing and editing

(require 'csv-mode)


(add-to-list 'auto-mode-alist '("\\.[Cc][Ss][Vv]\\'" . csv-mode))
(autoload 'csv-mode "csv-mode"
"Major mode for editing comma-separated value files." t)


(require 'csv)

(load "csv.el" nil t t)

;; ERC Extras

(add-to-list 'load-path "/erc-extras" t)

(require 'erc)

;; Very funny window effects:)

(require 'windzoom);;This is windzoom.el from Japan:)

;; Tramp extras- I use tramp for ftp connections

(require 'tramp-util)

;;Textile file editing

(require 'textile-mode)

(add-to-list 'auto-mode-alist '("\\.textile\\'" . textile-mode))


;; XML-RPC Service for Blog Software

(require 'weblogger)


(require 'keywiz)

;;Drupal Minor Mode

(defun drupal-minor-mode ()
(interactive)
(php-mode)
(setq c-basic-offset 2)
(setq indent-tabs-mode nil)
(setq fill-column 78)
(c-set-offset 'case-label 2)
(c-set-offset 'arglist-close 0))


(setq auto-mode-alist
   (append '(("\\.\\(php\\|module\\|template\\|engine\\|inc\\|thtml\\)\\'" . drupal-minor-mode)) auto-mode-alist))

(autoload 'drupal-minor-mode "drupal-minor-mode" nil t)

;; Smarty Mode
(require 'smarty-mode)

(autoload 'smarty-mode "smarty-mode" "SmartyMode" t)

(setq auto-mode-alist
  (append '(("\\.\\(template\\|tpl\\)\\'" . smarty-mode)) auto-mode-alist))


;; Note: PHP-Javascript and CSS Modes load with nxhtml-mode start file...
;; Auctex Mode have self conf files...

That's all...

Mewde Introduction

My Emacs Web Development Environment

First and Last; I am sorry my poor English, this is not my first language; I'm still working for learning English better; but for now; I am really sorry...

Introduction

This project covers nothing special. This is just my GNU Emacs Web Development Environment for Win32 Systems based on the Emacs at OurComments.org Project with a little additions; but it works for other operating-systems because Emacs Environment works almost all systems. All related projects and code links view blog sidebar. I think most important part for everyone; My PHP-CSS-Javascript and Smarty Modes. I added Javascript-mode, php-mode and css mode to Emacs Wiki .These modes not so special actually; just three xemacs mode tweaks for working GNU Emacs and some other tricks; like documentation browsing with w3m, speedbar support for navigating source code, templating and textmate like snippet usage with msf-abbrev mode... I must say I'm not elisp hacker, even programmar; I tried this because I needed open source productive code writing environment. Good News; original xemacs php and smarty mode maintainer support to Gnu Emacs with next versions. My goals with this project; Sharing a web development environment like other unix systems inside Win32 platform. You can edit projects, css-html-javascript-php-smarty-po-textile-csv files with Emacs. But having this power; GNU Emacs not enough, sorry. You must download and install first:
  • Cygwin Shell (required for w3m browser environment within Win32)
  • Msys Shell (bash script works better in this shell)
  • GPL Ghostscript and Ghostview and Miktex (If you are use Auctex for Latex editing)
  • ImageMagicK : Required image viewing inside emacs
  • w3m text based web browser and setup inside cygwin
  • GNU Win32 - Gettext package for po files editing
  • Emacs Win32 from OurComments (required base installation-everything inside with win32 environment problem solution, nxml and nxhtml-mode for base-powerful html-xml editing)
  • Emacs win32 Download page is here :http://ourcomments.org/cgi-bin/emacsw32-dl-latest.pl I suggest last patched version. This is basically what you are need.
  • Emacs w3m package and setup inside cygwin - or you can use my site-lisp directory inside w3m package, but once you must setup w3m browser-this package just for emacs-w3m shell.
  • Bitstream Vera Fonts; Because our dotemacs file setup with "Bitstream Vera Sans Mono" font. It gives you nice looking Emacs...
  • 7zip - The Best archive program of the world
  • For Complete Solution, I hardly suggest use Firefox with webdeveloper and firebug-firephp extensions. Of course you must setup this world leading real browser and development-debugger environment:)
  • For testing all Internet Explorer versions(5-6), you must setup Multiple IE ( If you are googled, you can easily find.)And you can use ie5-6-7; if your winxp system update to ie7
  • I suggest Gimp for image editing; Gimp win32 installation page: http://gimp-win.sourceforge.net

Installation Details

This part draft for now; but power users can be handle everything with this information.
  • If you are setup Latest Emacs Win32 Package and other requirements; download mewde.7z package, open archive somewhere and install like this:
  • Rename emacs.el to .emacs and with .abbrev_defs file, both must be placed your home/Application Data directory - this directory default hidden; you must arrange Show Hidden Files option from your explorer.
  • Your Emacs Installation Place with Emacs win32 Default Installation C:\Program Files\Emacs
  • Put our site-lisp directory to C:\Program Files\Emacs
  • Put nxhtml directory content C:\Program Files\Emacs\EmacsW32\nxhtml\
  • And that is all. You can see screenshots from my flickr page http://www.flickr.com/photos/ahmetusal/ and some screenshots inside mewde package. If you are done everything true; your Emacs must be looking like this:)
emacs_css_mode