Show CSS

Overview

Show CSS is a minor mode for emacs.

With showcss-mode turned on, as you navigate around an HTML file the matching css for that element will be displayed in another buffer.

In the current html buffer, if you move the cursor over a class=”.*?” or id=”.*?” a buffer will open with the external css file loaded and scrolled to the matching selector.

Show Css will look at the <link> tags and a custom comment tag to get the location of external css files.

Show Css looks for a comment with this regex:

<!-- showcss: \\(.*?\\) -->

For example:

<!-- showcss: /home/user/projects/facebook/site/css/main.css -->

<!-- showcss: ./sass_files/main.sass-->

The comment is useful if you want to use sass files directly instead of compiling them. Also showcss-mode will only use local files. So if you use css on a remote server, you will need to use the showcss tag in you html file and have it point to a local copy of that css.

Tested on emacs 24.

Usage

Put this in your init.el or .emacs file:

(autoload 'showcss-mode "show_css"
   "Display the css of the class or id the cursor is at" t)

Personally, I find this mode to distracting to use all the time, so I use this function to quickly toggle the mode on and off.

(defun sm/toggle-showcss()
  "Toggle showcss-mode"
  (interactive)
  (if (member major-mode
       '("html-mode"
         "nxml-mode"
         "nxhtml-mode"
         "web-mode"
         "handlebars-mode"))
      (showcss-mode 'toggle)
    (message "Not in an html mode")))
(global-set-key (kbd "C-c C-k") 'sm/toggle-showcss)

Customize options

<alt x>customize-group<ret>showcss

Customize three faces; html match found, html no match found, and css element. Also you can set the mode so that it only gets the css location from the magic comments and not from the link tag.

Todo

Show css from style attributes that have multiple classes. e.g. style=”style1 style2 style3”

sindikat/showcss-mode

Show CSS

Overview

Usage

Customize options

Todo