Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Show the css of the html attribute the cursor is on.
Emacs Lisp

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.org
show-css.el

README.org

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.

http://i.imgur.com/VCqEwAp.gif

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 -->

or

<!-- 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 (derived-mode-p
       '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

  1. Show css from style attributes that have multiple classes. e.g. style=”style1 style2 style3”
Something went wrong with that request. Please try again.