I have already built a snippet. Which works fine.
To better help understand the problem, lets say my snippet creates an anchor tag with inline styling:
<a style="color:red;font-weight:30px;"></a>
My problem is that when I attempt to add a key binding such as:
{
"keys": ["ctrl+a"], "command": "insert_snippet", "args": {"name": "Packages/User/red-anchor.sublime-snippet"}
}
If I select the highlighted text, then click ctrl+a, it deletes the text and adds the snippet. Rather I would like it to wrap the text inside the snippet. Such as:
<a style="color:red;font-weight:30px;">HelloWorld</a>
Any ideas?
Thanks in advance!!
If you look at the documentation on snippets, you'll see that there are a number of variables that can be accessed, including $SELECTION. So, your snippet should be:
<snippet>
<content><![CDATA[<a style="color:red;font-weight:30px;">$SELECTION</a>]]></content>
<scope>text.html</scope>
</snippet>
Related
I made a snippet which works on other scopes, but won't with html.
When i'm typing "test" just nothing happens.
Why?
<snippet>
<content><![CDATA[test]]></content>
<tabTrigger>test</tabTrigger>
<scope>text.html</scope>
</snippet>
Try to type "<test" instead of "test".
In ST3 if you type <st in an HTML field it shows known tags for autocompletion:
For my templating engine TYPO3 Fluid i need to add custom tags (like <f:for each="" as=""></f:for>).
How can i do this?
Regular snippets are not enough here as long as they don't show up in the nice typeahead.
Contrary to what was posted in the comments, there is a very straightforward way of doing this using a custom .sublime-completions file for HTML. These files are great because not only can you just have a simple list of custom tags, but you can also use snippet syntax for more complex tasks.
Create Packages/User/HTML.sublime-completions with JSON syntax, and use the following as a starting point:
{
"scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "ffor", "contents": "<f:for each=\"$1\" as=\"$2\">$0</f:for>" },
{ "trigger": "foobar", "contents": "<foobar>$0</foobar>" },
"baz",
"quux",
"thneed"
]
}
When you type ffor and hit Tab, <f:for each="" as=""></f:for> will be inserted, with the cursor between the each quotes. Hitting Tab again puts the cursor between the as quotes, and hitting it once more puts it between the opening and closing tag. The foobar trigger just creates a regular <foobar></foobar> tag with the cursor between them. baz, quux, and thneed just populate the completions list with those words.
I'm unfamiliar with the syntax you're trying to produce, but is there any reason this snippet (Menubar / Tools / New Snippet…) won't work for you?
<snippet>
<content><![CDATA[f:for each="$1" as="$2"></f:for>]]></content>
<tabTrigger>f:for</tabTrigger>
<scope>text.html</scope>
</snippet>
The $1 and $2 indicate cursor placement after the autocompletion (pressing tab jumps the cursor from the first cursor location to the second).
As it's written above, the snippet appears upon typing simply <f (or the complete trigger, <f:for) in an HTML file.
The snippet must be named with a .sublime-snippet file extension, and it must be saved in the ~/Library/Application Support/Sublime Text 3/Packages/User directory. No relaunch of the Sublime app is necessary.
Documentation:
http://docs.sublimetext.info/en/latest/extensibility/snippets.html
I also asked a similar question recently in Stack overflow - How to add custom auto completion in Sublime Text 3? and sublime User Echo.
This question will be easily solved by the below implementation. (But my question is not completely solved by this method.) The method below is specific for my own problem. But you can easily figure it out how to change it.
Easiest way to implement these auto completions is to create HTML.sublime-completions file in Sublime Text Build 3059 x64\Data\Packages\User folder. (Since I use portable version of ST3 in Windows OS, the folder may be different when you installed ST3.) Filling the file with JSON text like
{
"scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "eq", "contents": "<eq>$1</eq>" },
{ "trigger": "eqq", "contents": "<eqq>\n\t$1\n</eqq>" }
]
}
. But tab triggering is not enabled, although my Preferences - Settings - User includes tab related features like
{
[
"Vintage",
"BracketHighlighter",
"SideBarEnhancements"
],
"tab_completion": true,
"tab_size": 2,
"translate_tabs_to_spaces": false,
"use_tab_stops": false,
}
. Only Ctrl+tab triggering is enabled in this case. What is wrong? I don't know.
To resolve these problems, I tried Snippets, making HTML.sublime-snippet file in Sublime Text Build 3059 x64\Data\Packages\User folder. I put
<snippet>
<content><![CDATA[<eqq>
$0$1
</eqq>]]></content>
<tabTrigger>eqq</tabTrigger>
<scope>text.html</scope>
</snippet>
<snippet>
<content><![CDATA[<eq>$1$0</eq>]]></content>
<tabTrigger>eq</tabTrigger>
<scope>text.html</scope>
</snippet>
. In this case only the first <snippet> is enabled. So I separately saved multiple snippet files.
<snippet>
<content><![CDATA[<eq>$0</eq>]]></content>
<tabTrigger>eq</tabTrigger>
<scope>text.html</scope>
<description>eq tag to be rendered by MathJax</description>
</snippet>
in eq.sublime-snippet file, and
<snippet>
<content><![CDATA[<eq>$1$0</eq>]]></content>
<tabTrigger>eq{$PARAM1}</tabTrigger>
<scope>text.html</scope>
<description>eq{inline TeX equation} tag to be rendered by MathJax</description>
</snippet>
in eqBraces.sublime-snippet file, and
<snippet>
<content><![CDATA[<eqq>
$0
</eqq>]]></content>
<tabTrigger>eqq</tabTrigger>
<scope>text.html</scope>
<description>eqq tag to be rendered by MathJax</description>
</snippet>
in eqq.sublime-snippet file, and
<snippet>
<content><![CDATA[<eqq>
$1$0
</eqq>]]></content>
<tabTrigger>eqq{$PARAM1}</tabTrigger>
<scope>text.html</scope>
<description>eqq{outline TeX equations} tag to be rendered by MathJax</description>
</snippet>
in eqqBraces.sublime-snippet file. But these don't resolve my problems completely either.
I tried something like ${1/\\/\/}. But this doesn't work either. Uncomfortably using double \ like eq{\\alpha \\beta \\gamma}, I can fix the unexpected escape \ problem.
Is there a way you can make your own shortcuts for your tags, like if I type in "li" It will automatically put in li type="square" and all I have to do is hit enter?
Have you tried to make your own snippets?
Try the New Snippet command in the Tools-menu and add the following and save it:
<snippet>
<content><![CDATA[
<li type="square">${1:Item} ${2:}
]]></content>
<tabTrigger>li</tabTrigger>
</snippet>
This will enter an <li>-tag in the current file if you type li and then press Tab.
You can also add a <scope> tag to limit it to HTML-files.
From the unofficial documentation:
Snippets can be stored under any package’s folder, but to keep it simple while you’re learning, you can save them to your Packages/User folder
Ok, my situation is a bit different than all the threads here about formatting HTML. Also, I've installed about every HTML formatting plugin out there with mixed results and none really solve my issue.
Also, configuring these plugins can be difficult since I'm not a programmer and some authors don't provide enough information to customize their plugins.
For now the only plugin that formats my HTML somewhat Ok is HTMLTidy, the problem is that it uses too much space per tag. See my HTML example below.
I also tried what they mentioned in this thread and it only works to some extent as far as indentation goes, but not really for 'true' markup formatting.
All I want to do is turn this markup:
<ul>
<li>
item here
</li>
<li>
item here
</li>
<li>
item here
</li>
</ul>
Or this one:
<p>
Content...
</p>
Into this:
<ul>
<li>item here</li>
<li>item here</li>
<li>item here</li>
</ul>
And this:
<p>Content...</p>
Having the content of every tag in a separate line from the opening/closing tags is a waste of space for me.
Any idea how to accomplish this either by modifying something in TidyHTML or manually, or any other way for that matter?
Thanks in advance.
Note: This solution works only in ST2, because at this moment (7/31/14) HTMLTidy is not available for ST3.
I figured a temporary solution, not ideal by any means, but...
Go to: Preferences -> Key Bindings - User. You will be editing the file Default (Windows).sublime-keypmap.
Add these two instructions to that file (note that the instructions need to be inside the [ ] brackets):
[
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}},
//Indent code -- http://stackoverflow.com/questions/8839753/formatting-html-code-using-sublime-text-2
{ "keys": ["ctrl+alt+t"], "command": "html_tidy"}
//HTMLTidy key binding
]
Save the file.
Make sure you have HTMLTidy installed. Open HTMLTidy's Settings file HtmlTidy.sublime-settings: Preferences -> Package Settings -> HtmlTidy -> Settings - Default.
Look for "indent": true, (include double quotes and comma) and change it to false.
Save the file.
Go back to your HTML file and select a section of the code you want to format in one line. Yes, it doesn't work if you select the entire markup o_O. It will only leave what's inside the <body> tag, and it will delete everything else (<html>, <head>, etc).
Press CTRL+ALT+T to execute TidyHTML. This will shrink your markup and make the tags in one line.
Finally press CTRL+SHIFT+R to execute the indentation.
Good luck.
If your elements are uniform, a much easier solution would be to select all the <li>s you want to crush to one line with alt+f3 or, for more control, ctrl+d, then just hit ctrl+j twice to join the lines together. Done!
Failing that, use ctrl+shift+j to select all the content within a tag after multi-selecting one part of each of the tags. Hit the cursors to the right or left edge with the left or right arrow keys and you can delete from there.
you can set shortcut key for one line by press key F12
goto menu Preferences -> Key Bindings – User
{ "keys": ["f12"], "command": "reindent"}
see detail at http://how-to-sublime-text.blogspot.com/2014/11/reformat-code.html
I had previously managed to get Zencoding in ST2 to autocomment closing tags eg:
I'd type div.my_div and hit tab and as well as creating the div, it would also add a closing comment so that I can easily navigate the closing div tags in my document.
<div class="my_div">
*
</div> <!-- .my_div -->
Do any of you know how to replicate this?
Thank you.
You should use “comment“ filter: http://code.google.com/p/zen-coding/wiki/Filters
.my_tag|c
You can also make ZC to automatically apply “comments” filter to HTML. It‘s a bit hacky, but you need to open zen_settings.py file and add c filter at https://github.com/sublimator/ZenCoding/blob/master/zencoding/zen_settings.py#L511
It should look like this:
"filters": "html,c"