When I type the shortcut link+tab to get the link tag and attributes.
It only shows:
<link rel="stylesheet" href="">
When i want it to show:
<link rel="stylesheet" type="text/css" href="">
or
<link rel="stylesheet" type="" href="">
How can I change the built-in emmet shortcut/snippet to do this? I've tried going into preferences and shortcuts, etc. but haven't quite figured it out.
Thanks for any help!
Put this into your settings:
"emmet.extensionsPath": "C:\\Users\\Mark\\Test Bed\\.vscode",
// with path to your .vscode folder.
// right-click on the folder in your explorer bar and choose Copy Path - use that in above
The above will allow emmet to find the snippets you will create.
Create a snippets.json file in your .vscode folder.
Put this into that file:
{
"html": {
"snippets": {
"link": "<link rel='stylesheet' type='text/css' href='${1}'>"
}
}
}
Reload vscode window after any changes to this file or you won't see the changes take effect!
or use this form if you want to use double quotes:
"link": "<link rel=\"stylesheet\" type=\"text/css\" href=\"${1}\">"
More info here: https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets
Related
I used ag-grid a few times before and each time it works with no probs, but now for no reason the css is not working I use these links for css :
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-themealpine.css">
I didn't get any error on my page and the links are valid.
The css file was loaded on my page and I can see it using F12.
What should I check next ? how can I solve it ?
You are missing the - between theme and alpine in ag-themealpine.cssin the second link tag.
Replace that link tag with the following:
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" />
See this implemented in the following plunkr.
I'm using chrome, my favicon works in the browser tab.
However, when move URL to desktop to create shortcut, the chrome logo appears instead.
This is the link I used...
<link rel="icon" type = "image/png" href="img/favicon16.ico" sizes="16x16">
<link rel="icon" type = "image/png" href="img/favicon32.ico" sizes="32x32">
<link rel="icon" type = "image/png" href="img/favicon96.ico" sizes="96x96">
Favicon is not used for that. You need to add a web app manifest file, that points to the correct icon as explained here: https://developer.mozilla.org/en-US/docs/Web/Manifest
Edit: I might be wrong and the manifest.json might only work for mobile
Desktop chrome shortcuts do not have the same icon as a favicon and will open in the program you have as the default for that extension, in this case chrome. You can sometimes customize desktop shortcut icons.
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.
I have been trying to put together my own page at meredithhu.github.io. As you can see, at this point, only the Home page is displaying the correct layout, all other pages' (if you click through the tabs on home page) layouts are off... And I couldn't figure out why and how to fix it...
All the codes are here: https://github.com/meredithhu/meredithhu.github.io.
I defined layouts in the _layouts folder, apparently only the default.html is working... but aren't all others defined the same way? how could none of the other ones work?
Could anyone give me some hints how to fix the problem?
Update your link tag from default layout
<link rel="stylesheet" type="text/css" href="css/main.css">
to this ->
<link rel="stylesheet" href="/css/main.css">
There is a problem with the styles loading, if you just use href="css/main.css" then the browser will use the current level as the base URL, this is why it works for the base url, but not for any other deeper category/page, in _layouts/default.html change the CSS line to:
<link rel="stylesheet" type="text/css" href="{{site.baseurl}}/css/main.css">
Also, in _config.yml, there is a wrong parser, remove the line markdown: shengli so the website loads properly.
NOTE : UPDATED MY QUESTION
Some times, we have to overwrite the css file in template page, by using following code
<?php $this->headLink()->appendStylesheet(BASE_URL . 'css/test.css'); ?>
This appends first file with all existing css file in our page.
For example,
<link href="/css/test.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/css.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/front.css" media="screen" rel="stylesheet" type="text/css" />
From Above source, test.css is appended.I need that be after front.css
it make new css file is overwritten by default css file.This results our new css is not reflecting in site. so we need to keep include the css file at end.
How can we include in zend? kindly advice on this.
Use prependStylesheet($href, $media, $conditionalStylesheet, $extras) instead of append. Or even cleaner, use the helpers for all your stylesheets and append them in the right order.