For example, when I type html + tab,
the html boilerplate automatically loads:
`<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>`
then if I type ol + tab, it automatically loads the opening tag and the closing one:
`<ol></ol>`
and because of this very annoying autocomplete pop up, I can't directly type enter between the tags to get the closing tag under the opening one,
I already tried to change the settings just like it's said in the SublimeCodeIntel Github page :
" Do NOT edit the default SublimeCodeIntel settings. Your changes will be lost when SublimeCodeIntel is updated. ALWAYS edit the user SublimeCodeIntel settings by selecting "Preferences->Package Settings->SublimeCodeIntel->Settings - User". Note that individual settings you include in your user settings will completely replace the corresponding default setting, so you must provide that setting in its entirety. "
and " Live autocomplete can be disabled by setting "codeintel_live"
to false. "
So I did this, okay, no very annoying autocomplete pop up anymore, awesome ! But when I type html + tab, no html boilerplate loading anymore ! Yikes !
I also have to tell I'm an absolute beginner at coding.
Thanks a lot for your help !
It seems like you solved your problem, but at the expense of the HTML boilerplate shortcut.
Try these steps to fix it:
Sublime Text -> Tools -> New Snippet...
Copy-paste the following text into the new snippet file:
--
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html</scope>
</snippet>
--
Save the new file into your Sublime Text user packages directory.
By default the file should save into this directory, but in case it does not, this is the location for each OS:
OSX: /Users/{user}/Library/Application\ Support/Sublime Text 2/Packages/User/
Windows: C:\Users\{user}\AppData\Roaming\Sublime Text 2\Packages\User
Linux: /home/{user}/.config/sublime-text-2/Packages/User
Related
In some html editors when you create a new html file, some default codes as below created automatically:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
how can I enable this feature in VSCode editor?
Thanks.
Press shift and 1 (!) It will show two options select the first one or type html:5 and enter the option it will give you default boilerplate for html
Just give the ! sign and then press Tab.
Is it possible to change default (not for single project) Emmet behaviour for command ! in Visual Studio Code?
For example, I don't want to see the attribule lang="en" in <html> tag? Also I don't want to see the string:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And maybe I will want to add some another strings to default Emmet-behaviour in VS Code.
According to official documentation you can add or overwrite the contents of default Emmet snippets in VS Code with custom ones. Here how you can do it:
Firstly you need to create to the snippets.json file and set the path to it in user settings.
"emmet.extensionsPath": "C:\\Users\\Folder\\snippets.json"
Then you should figure out which snippet to change, see default HTML snippets and CSS snippets.
Finally overwrite the snippet in snippets.json. For example:
Hopefully it will help you solve your issue! Good luck!
You can overwrite the defaults (see VS Code documentation). In your case:
Create a snippets.json (must use this filename), e.g. at ~/.vs-emmet/snippets.json
Search in VS Code File -> Preferences -> Settings for "Emmet: Extension Path" and add the path to the directory of snippets.json, e.g. ~/.vs-emmet
Insert this into snippets.json:
{
"html": {
"snippets": {
"doc": "html>(head>meta[charset=${charset}]+title{${1:Document}})+body"
}
}
}
This replaces the doc-abbreviation with a leaner boilerplate. doc is used in the !-abbreviation. So ! now creates this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
Refer to the official emmet documentation and the default HTML snippets to make further adjustments.
Visual Studio Code is pretty smart about how it autocomplete tags. With tags such as and when you press enter it automatically does this:
<head>
>
</head>
But <p> does this:
<P> > </p>
Which is great. However <script> performs like the latter when it should be like the former. Is there a way I can fix this?
I want to insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');
How do you write the pop-up HTML in a Crossrider extension?
What triggers it and how do you add an image, eg if you want to show a logo in the pop-up with some text, do you leave the extension.js since you will be writing all the codes in the pop-up HTML?
I am so confused here.
In general, Crossrider popups can be created with a few simple steps, as follows:
On the (Settings >) Browser Buttons page, enable the extension button for the browsers you want to support
In the background.js file:
Set the button icon using appAPI.browserAction.setResourceIcon (Note: don't forget to add the icon to the extension's resources)
Set the popup details using appAPI.browserAction.setPopup
appAPI.browserAction.setPopup({resourcePath:'popup.html', height: 300, width: 300});
Create the template popup HTML that is specified as the resourcePath property in step 2.2.
On the Edit Code page, right-click on the Resources folder, point to Create, click Popup, and then specify the name for the popup file (e.g. popup.html).
At this point, you have a fully functional popup button that is triggered whenever the extension button is clicked.
To customize your popup, simply add HTML, CSS, and JS to the popup.html in a similar way to a regular HTML page adding remote resources using standard HTML tags. Use our crossriderMain function, as defined in our popup template, to add files from your extension's Resources folder. For example:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
// Note: don't forget to add the files to the extension's resources
// Load resource CSS
appAPI.resources.includeCSS('style.css');
// Load resource JS
eval(appAPI.resources.get('script.js'));
// Load resource image
$('#myImg').attr('src', appAPI.resources.get('myImg.png'));
}
</script>
</head>
<body>
Hello World!
<img id="myImg">
</body>
</html>
If you need any assistance with any specific issues, please feel free to email our support (support#crossrider.com).
[Disclaimer: I am a Crossrider employee]