Function lists

From EditPlus Wiki
Revision as of 00:50, 17 January 2006 by 220.238.248.72 (Talk) (deleting spam)

Jump to: navigation, search

CSS

Since CSS doesn't have a "function" keyword, we need to find a way to identify lines containing a selector. I've chosen to use the most common method; selectors start at the beginning of the line with an alphanumeric character, all other lines (properties, comments) must be indented (or generally start with a non-alphanumeric character). Example:

/*
  Example of a comment
*/
td.test
{
  background-color:   #ffffff;
  color:              #000000;
  padding:            2px;
}

In EditPlus:

  1. Go to Tools > Preferences
  2. Find the Settings & syntax option under the Files section
  3. Select CSS from the File Types list
  4. In the Function Pattern box, enter:
^[a-zA-Z0-9]

If you are unfamiliar with Regular Expressions: the ^ matches the beginning of the line, so that's where our search will start. After that, match a single character in the range of a-z, it's capital equivelant or 0-9, also known as alphanumeric. Since we indicated this character must be directly after the beginning of the line, any line with a leading space or tab will be ignored, as will the {} lines.

If you open up the Function List again, you'll get a list of all selectors; just be careful on how you format the CSS.

You can also develop more advanced, more general, stricter patterns like

^([@:\.#]?[A-z][A-z0-9_-]*)([ \t]*[,+> ][ \t]*([:\.#]?[A-z][A-z0-9_-]*))*[ \t]*{?

This particular pattern still lacks support for some complexer selectors, e.g. 'a[hreflang|="en"]', 'html:lang("en")' or multiline ones, and chokes on comments.


HTML

Of course HTML does not have functions, but especially in longer documents it is convenient to be able to jump to headings. You can either regex-search for "<h[1-6]" and select Set Marker or you use the function list (Ctrl-F11) with a pattern like this in Settings & Syntax > Files > HTML > Function Pattern

<(h[1-6]|caption)