Emmet with sublime - sublimetext3

I am trying to make something pretty easy and for some reason i can't. Generally with Emmet on html i don't have any problem, but i wanna make something custom. On javascript, when i type log i want on Tab should generate console.log() and write pointer inside (). I have searched folder with packages installed but i didn't find somewhere i could put code on. Also on the google i didn't find something that can help, i had this thing on the ATOM but i also can't find how they have it there.

You don't need Emmet for that, just create a snippet in Sublime Text.
Example:
<snippet>
<content><![CDATA[console.log($1)]]></content>
<tabTrigger>log</tabTrigger>
<scope>source.js</scope>
</snippet>
If you need this to work for HTML as well, you could change the scope to source.js,text.html

Related

Where do I put custom syntax highlighter definitions for Sublime Text?

I have created a custom syntax definition in the new .sublime-syntax format, but I can seem to get it to appear in my list of available syntaxes...
I have tried putting it in:
<Install Location>/Packages
<Install Location>/Packages/User
<Install Location/Data/Packages
<Install Location/Data/Packages/User
%APPDATA%/Packages
%APPDATA%/Packages/User
The documentation seems to be bit light on how this works, but I'm hoping that someone can enlighten me!
The proper location for user-defined syntaxes, plugins, build systems, etc. is Packages/User, where Packages is the folder opened by selecting Preferences -> Browse Packages...*. I'm not on Windows at the moment, but I believe this is %APPDATA%/Sublime Text 3/Packages/User. Once you place the file there, it will be available from the syntax menu under User.
Also, please recall that .sublime-syntax files are only supported in the dev builds currently, and you need to be a registered user to run them. They will not work with Build 3083.

sublime text 3 html autocompletion not working correctly

I am trying to use sublimetext3 for editing html.
If I do
ul tab, then it generates <ul></ul>
if I do
ul.temp tab, then it generates <ul class="temp"></ul>
however, when I am trying
ul>li.temp tab, it is generating ul><li class="temp"></li>
What I am expecting to see is <ul><li class="temp"></li></ul>
I have package control. What am I missing in getting this functionality?
Note: Moved to an answer at the request of the original poster.
Perhaps the behavior you are looking for comes from the Emmet plugin
What you are describing it the expected behavior for Sublime Text.
The functionality that you are looking for comes from Emmet as skuroda said. Just install it using Package Control and you should be good to go.

Sublime Text 2 split active screen like dreamweaver

At work, I have to jump into old mysql_query procedural website build higgledy-piggledy (some var are camelCased AND underscored, no indent code, page are build in table ...)
Anyway, usually I m using ST2, but here I can't. So to search my line code, I use dreamweaver to click on the screen preview and the cursor drop on the code line I want.
I do not like and I don't know dreamweaver. But as code is UNREADABLE, that is the only way I have to work.(My boss doesn't want rebuild theses sites).
Here is my question, does anybody know for ST2 a way (or a plugin) to split screen and click on screen preview to go right to the code line just like dreamweaver preview does ?
Regards.
Answer is simple, you will never find something like that.
Try here - http://webdesign.about.com/od/windowshtmleditors/tp/windows-wysiwyg-editors.htm
WYSWIG html editors.
Try Sublime CodeIntel, as well says this page:
...This plugin brings a little of IDE functionality into ST2. This plugin reads all your code and is able to code-complete, jump into
definitions and function call tooltips. Although sometimes looks a
little buggy, it’s still worth having it around. It’s a huge time
saver, especially when you are dealing with other’s people code.
If is suitable for that project you can remove the package later.

Live preview markdown editor

Forgive me if this is has been answered. I have looked around, but didn't find anything.
I am creating a site for non-techies and it requires them to be able to add rich text content. I have been looking at Markdown for this, and would like to use that.
I have been searching around for a nice (jquery) ui control to make editing simple, but everything I have looked at has the live preview living somewhere else on the page other than the input box. (WMD is like this, markitup, etc..)
I would like to use something that makes it feel like you are using a word processor. Like how TinyMCe does it, but running on Markdown, not HTML
Is there anything like that, or maybe somewhere that shows how to build it?
To clarify, I'm looking for an editor that makes it feel like you are typing in the live preview; not a textbox with a preview above/below.
If I get what you're looking for, then the simplest approach would be to generate HTML with TinyMCE or CKEditor, then apply something like Markdownify to the output of e.g., tinymce.getContent().
I have since found something that I love. the Pen editor on Github does just what I wanted. I am glad to see someone has taken this on
Check out Stack Edit It's a great WYSIWYG markdown editor - syncs with Google Docs, Dropbox & CouchDB, publishes to Github (and many other places), and offers easy link sharing. You can access it on their website or using the Chrome app. You can create titles and lists in the editor there, and it will show you the corresponding text in markdown format. You can then save, publish, share, or download the file.
Markdown would not be compatible with a WYSIWYG editor. Consider this sample Markdown:
Let's link to [Google][].
[Google]: http://www.google.com/
If you were making a WYSIWYG editor, what would happen after you typed [Google]? Would you see blue underlined text? Would you just see [Google] since it's not a valid hyperlink yet? What about after you type the trailing []? It's still not a fully-defined hyperlink; you can't click it, because Markdown doesn't know where it links.
And how does the user type that [Google]: http://www.google.com/ follow-up line? That line isn't displayed; it's markup; it's invisible. Where do you type invisible text into a WYSIWYG editor?

How can I change language contexts in Textmate bundles?

I'd like to get my Textmate bundles to use the correct contexts based on what I'm editing. For example I use YUI a lot so I'd like the HTML bundle to use the YUI JS bundle instead of the standard JS one, etc.
Can anyone suggest where and what I should be editing to make that happen. Bonus points for tips on bundle editing.
The thing we are talking about here is scope. You'll have to edit your Bundle elements scope.
Let's take a look:
alt text http://mtod.org/so/scope.png
Now, edit the scope to a wider one, for example use source.js instead of source.js.yui. This should be applied to every snippet, command, etc. in the Bundle. You could probably do a search & replace directly on your Bundle files.
alt text http://mtod.org/so/edit.png
That's it. Bundle snippet triggered below.
alt text http://mtod.org/so/yui.png

Resources