Subscribe to andrewsw's Blog        RSS Feed

Grand Unified Snippet

Icon 1 Comments
When I first encountered Sublime Text, a few years ago now, I was first attracted to the look of it, then by multi-line editing, but mainly by the possibility of using it as a vehicle to extend my knowledge of Python. Python is the main language behind its plug-in architecture. On further investigation I noticed that regex was used extensively behind the scenes, for its snippets. This suited me as well, as it gave me an opportunity to stretch my regex muscles.

I then encountered Zen Coding, now called Emmet. This is cool, expanding abbreviations to quickly create CSS rules (works with other languages as well). This inspired me to an extent. I didn't want to re-create it - that would be pointless - but I had a vision. I could see myself typing abbreviations on a single line, with comments appearing on a line below providing hints and guidance, and the CSS rules appearing further below, in full, as the abbreviations are typed.

I prefer to see what I can achieve with a single snippet first, stretching the limits of my regex, before considering a full-blown plug-in (with Python). Here's the snippet that I created:
   <content><![CDATA[/* ${1} ${1/.*(\.)$|.*/?1::\n/}${1/($)|.*(?:^| )((b)|(c)|(d)|(e)|(f)|(h)|(l)|(m)|(o)|(p)|(q)|(r)|(t)|(v)|(w)|(z)).?$|.*/?1:Type to for top etc, followed by a space:?3:BAckground-Attach etc BOTtom BOrder-Collapse-Spacing-Bottom\(Color\/Style\/Width\) etc BC BS BW:?4:CLear CLIp COlor CONtent CUrsor Counter-Inc-Reset Caption-Side:?5:DIsplay DIRection:?6:Empty-Cells:?7:FOnt F-Family-SI\/ST\/W\/V FLoat:?8:HEight:?9:LEft LEtter-Spacing Line-Height List-Style I\/P\/T:?10:MArgin T\/R\/B\/L MAx\/MIn-Height\/Width:?11:OUtline-Color-Style-Width OVerflow:?12:PAdding T\/R\/B\/L POsition-Abs\/Rel\/Fixed\/Static:?13:QUotes:?14:RIght:?15:TOp TExt-Align\/D\/I\/T:?16:Vertical-Align VIsibility:?17:WHite-space WIdth WOrd-spacing:?18:Z-Index/i}${1/($)|.*(?:\b| )((baa)|(bap)|(bar)|((b[trbl]?s)|(ous))|(b[trbl]?w|ouw)|(boc)|(cl)|(cu)|(cs)|(dir)|(di)|(ec)|(fl)|(fsi)|(fst)|(fv)|(fw)|((bot|to|le|ri|he|wi|mat|mar|mab|mal|ma)|(mah|maw)|mih|miw|pa[trbl]?|tei)|((lh)|ls)|(lsi)|(lsp)|(lst)|(ov)|(po)|(tea)|(ted)|(tet)|(va)|(vi)|(wh)|(wo)|(zi))( |_[a-z0-9-]{0,8})$|.*/?3:attachment\: fixed scroll:?4:left center right bottom center top:?5:repeat no-repeat repeat-x repeat-y:?6:style\: dashed dotted double groove inset outset ridge solid none(?7: hidden):?9:width\: thin thick medium:?10:collapse separate:?11:left right both:?12:default pointer crosshair move *-resize text wait help progress auto:?13:top bottom:?14:ltr rtl:?15:inline inline-block list-item run-in table-cell-column-row -header-footer -group none:?16:show hide:?17:left right none:?18:smaller larger x\(x\)-small-large medium:?19:italic oblique normal:?20:small-caps normal:?21:bold bolder lighter normal xxx:?22:length percentage(?23: auto:?24: none):?25:length percentage (?26:number )normal:?27:none:?28:inside outside:?29:disc circle square decimal-leading-zero lower-upper-greek-latin-roman armenian georgian:?30:visible hidden scroll auto:?31:absolute relative fixed static:?32:left center right justify:?33:underline overline line-through blink none:?34:uppercase lowercase capitalize none:?35:baseline sub super top text-top middle bottom text-bottom length percentage:?36:visible hidden collapse:?37:nowrap pre pre-wrap pre-line normal:?38:length normal:?39:integer auto/gi} */$0${1/\\|\.$|(?:\b| )((ba((a)|(c)|(i)|(p)|(r))?)|(bot)|(bo((c)|(s))?)|(((bb)|(bl)|(br)|(bt)|b)((c)|(s)|(w))?)|(cli)|(con)|(co)|(cu)|(cl)|(c((i)|(r)))|(cs)|(dir)|(di)|(ec)|((ff)|(fsi)|(fst)|(fv)|(fw)|fo)|(fl)|(he)|(les)|(le)|(lh)|(ls((i)|(p)|(t))?)|(((ma)|(mi))((h)|(w)))|(((ma)|(pa))((b)|(l)|(r)|(t))?)|(ou((c)|(s)|(w))?)|(ov)|(po(?:(a)|(r)|(f)|(s))?)|(qu)|(ri)|(to)|(?:te((a)|(d)|(i)|(t)))|(va)|(vi)|(wh)|(wi)|(wo)|(zi)|(!)|([0-9]*)(cm|em|ex|in|mm|pt|pc|px|\%)(?:(4)|3)(!)?)( |_|\.|$)|( {2,}|\t)/?2:;\nbackground(?4:-attachment:?5:-color:?6:-image:?7:-position:?8:-repeat)\: :?9:;\nbottom\: :?10:;\nborder(?12:-collapse:?13:-spacing)\: :?14:;\nborder(?16:-bottom:?17:-left:?18:-right:?19:-top)(?21:-color:?22:-style:?23:-width)\: :?24;\nclip\: :?25:;\ncontent\: :?26:;\ncolor\: :?27:;\ncursor\: :?28:;\nclear\: :?29:;\ncounter-(?31:increment:?32:reset)\: :?33:;\ncaption-side\: :?34:;\ndirection\: :?35:;\ndisplay\: :?36:;\nempty-cells\: :?37:;\nfont(?38:-family:?39:-size:?40:-style:?41:-variant:?42:-weight)\: :?43:;\nfloat\: :?44:;\nheight\: :?45:;\nletter-spacing\: :?46:;\nleft\: :?47;\nline-height\: :?48:;\nlist-style(?50:-image:?51:-position:?52:-type)\: :?53:;\n(?55:max:?56:min)(?58:-height:?59:-width):?60:;\n(?62:margin:?63:padding)(?65:-bottom:?66:-left:?67:-right:?68:-top)\: :?69:;\noutline(?71:-color:?72:-style:?73:-width)\: :?74:;\noverflow\: :?75:;\nposition\: (?76:absolute:?77:relative:?78:fixed:?79:static):?80:;\nquotes\: :?81:;\nright\: :?82:;\ntop\: :?83:;\ntext(?84:-align:?85:-decoration:?86:-indent:?87:-transform)\: :?88:;\nvertical-align\: :?89:;\nvisibility\: :?90:;\nwhite-space\: :?91:;\nwidth\: :?92:;\nword-spacing\: :?93:;\nz-index\: :?94: !important:?95:$95$96 $96 $96(?97: $96)(?98: !important)/gi};
   <description>po to, etc</description>

Here's a screencast that gives a flavour of how it works. An interesting aspect is that I can press Backspace to correct entries, and even click around to edit, as long as I remain within the same line.

My typing is slow in the screencast, partly so that you could see what is happening but, mainly, because I haven't used it for ages! With practice, it could be an efficient, speedy, tool.

I think it could be claimed to be the most detailed single regex expression in a snippet because I ran out of captures; 98 is the maximum. I tried to include as many standard rules as possible; I think I included nearly all of them (at the time).

I am not recommending or promoting my snippet, it is more of an academic exercise. In particular, I added an abbreviation using a dot . which collapses the comment lines to a single line, making it easier to delete them afterwards. I should not have done this because now I cannot type 23.0 within the rules.


Does a blog-entry need to have a purpose? I hope it was interesting, although maybe I'm just showing off a little? My stated purpose is to encourage you to explore the features of your chosen editor or IDE, including its plug-in architecture and snippets. They can increase, and stretch, your understanding of, typically, Python (or Javascript), Regex, JSON and/or XML.

1 Comments On This Entry

Page 1 of 1


24 January 2015 - 04:46 PM
If anyone is brave, or foolhardy, enough to play with my snippet then here is another snippet that just contains some help text.
   <content><![CDATA[/* propx uses two or three letter abbreviations for many of the css properties, separated 
by a space. For example, 'to' for top, 'po' for position, 'bbc' for 'border-bottom-color'.
You can type values between the abbreviations, but you cannot use quotes, colons or brackets.
After you type an abbreviation (and a space) a list of values will be shown. This list will disappear
as soon as you type another character, or follow your abbreviation with an underscore to keep the
list visible.
If you need to type an abbreviation such as 'le', just split it with a back-slash: 'l\e'.
Typing, for example, '3px3' will produce '3px px px', similarly for '3px4'. This works for ems, etc,
and percentages.
You can backspace as you type, and even edit the line, as long as you remain within the field.
Once you've finished, press Escape then Ctrl-Shift-K twice to delete the comment. */
   <description>propx help</description>

A dot . ends the snippet and collapses the two comment lines to a single line (for deletion) and an exclamation mark ! adds !important.
Page 1 of 1

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

January 2021

242526 27 282930


    Recent Entries

    Recent Comments

    Search My Blog

    2 user(s) viewing

    2 Guests
    0 member(s)
    0 anonymous member(s)