I've recently moved from Atom to VSCode, while I managed to customise most of the editor according to my likings, I am still missing a few features that Atom had that I enjoyed.
One of those things is that the "id" attribute in Atom used to be a specific colour, something similar to #99FFFF. I've looked through themes but I couldn't manage to find one that makes the id attribute colour different then the rest of them.
Another feature that I enjoyed was the fact that when a new HTML element was created, eg. a div, it came with the most used, basic attributes by default. I got the hang of using the emmet snippets but it still doesn't work the same, probably because I don't know exactly how to use it properly yet. If there is a cheat sheet for this it would be greatly appreciated, or at least a few examples. Let's say I want to create an input element with a type, name, id and placeholder attribute, how would I go about to do that with emmet snippets?
Here is my settings.json
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"editor.background": "#232323",
"sideBar.background": "#272727",
"sideBar.foreground": "#C9C9C9",
"editor.foreground": "#C9C9C9",
"statusBar.background": "#272727",
"activityBar.background": "#232323",
"titleBar.activeBackground": "#232323",
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
You can change the color of the word id or its attribute value using the tokenColorCustomizations object in your settings.com:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.attribute.id.html entity.other.attribute-name" // the word id
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
},
{
"scope": [
"meta.attribute.id.html string.quoted.double.html" // the id's vaue
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
}
]
}
See Editor Syntax Highlighting.
Related
I started using Prismic as a headless CMS for a previous project, and it worked fine, but on a second project, I ran into a problem that surprised me, and that is Prismic's inability to do a simple blockquote. Considering that this HTML element has been around in HTML for decades, it blows my mind. According to their docs and forum responses, they are considering adding it to their editor, but you have to jump through hoops by using labels and applying them to your text, and this just wraps the text in <span> tag that has a class of your label name. In your front end, you then have to target those spans with CSS.
The problem with this in their Rich Text editor, if you have a multi-paragraph block that you want to quote inside of a larger body of text, the editor treats them as multiple paragraphs, so in your output, instead of one big block - like you would get with a standard <blockquote> tag - you get multiple paragraphs wrapped in individual <span> tags, which is more difficult to make look like one block with just CSS.
<p><span class="my-label">Paragraph 1 text</span></p>
<p><span class="my-label">Paragraph 2 text</span></p>
<p><span class="my-label">Paragraph 3 text</span></p>
<p><span class="my-label">Paragraph 4 text</span></p>
I'm doing this inside a Nuxt app using v-html, and since highlighted text could be anywhere inside a larger body of text, I really don't want to have to do code gymnastics inside an html serializer or the api data to identify the labeled items. I really don't want to have to switch to another CMS or local markdown just to get around this.
When I've tried targeting the tags, it gets challenging trying to do it so that everything looks like one large block.
Does any Prismic user know a way I can actually get a <blockquote> tag in the content in the Prismic editor itself? There's not an option to edit the raw html in their editor, and even with slices, I haven't seen a way to insert a tag in the content.
Is there a simple way with CSS to target those multiple paragraphs so that they look like one block? I'm not a CSS guru, and it looks like it requires some fine tuning with padding and line heights.
Regarding a solution on Prismic's end, using slices the idea would be to use the slice zone to have a simple "RichText" slice for basic text and another "BlockQuote" slice for doing fancy quotes. Slice definition could look like this:
{
"type": "Slices",
"fieldset": "Slice zone",
"config": {
"labels": {
"richtext": [],
"blockquote": []
},
"choices": {
"richtext": {
"type": "Slice",
"fieldset": "Rich Text",
"description": "Rich text slice",
"icon": "reorder",
"display": "list",
"non-repeat": {
"text": {
"type": "StructuredText",
"config": {
"multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
"allowTargetBlank": true,
"label": "Text"
}
}
},
"repeat": {}
},
"blockquote": {
"type": "Slice",
"fieldset": "Block Quote",
"description": "Block Quote slice",
"icon": "format_quote",
"display": "list",
"non-repeat": {
"text": {
"type": "StructuredText",
"config": {
"multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
"allowTargetBlank": true,
"label": "Text"
}
}
},
"repeat": {}
}
}
}
}
Then it would be just about looping through the array, something in that fashion:
<template>
<prismic-rich-text v-for="slice in document.data.body" :field="slice.primary.text" :class="slice.slice_type" />
</template>
How can I change the color of the HTML open/close tags in VScode to match the image below? I have tried using the Highlight Matching Tag extension and the following settings, but this only works on selecting (onFocus) of the tags. I want the actual font color for open tags to be different than all the closing tags. Thank you!
"highlight-matching-tag.styles": {
"opening": {
"name": {
"custom": {
"color": "#007fff",
}
}
},
"closing": {
"name": {
"custom": {
"color": "#F02931"
}
}
}
},
You can do this by customizing the VS Code theme that you are currently using (see the end result on the last image).
CUTOMIZING THE THEME
In the VSCode open the Command Palette by pressing Ctrl + Shift + P, and type/select Preferences: Open Settings (JSON).
This will open the editor Settings .json file.
Set/add new rules for the editor token color customization.
Adding the below snippet to the settings.json will change the color of the closing tags (name) in JSX, for the theme Dark (Visual Studio).
TL;DR
Paste the below snippet to your editor settings JSON, to enable the color > rules for a particular theme.
settings.json
"editor.tokenColorCustomizations": {
"[Visual Studio Dark]": { // Name of the theme that we want to customize, same as the value from "workbench.colorTheme"
"textMateRules": [ // TextMate grammars tokenization settings
{
"name": "Opening JSX tags",
"scope": [
"entity.name.tag.open.jsx", // HTML opening tags (in JSX)
"support.class.component.open.jsx", // JSX Component opening tags
],
"settings": {
"foreground": "#007fff",
}
},
{
"name": "Closing JSX tags",
"scope": [
"entity.name.tag.close.jsx", // HTML closing tags (in JSX)
"support.class.component.close.jsx", // JSX Component closing tags
],
"settings": {
"foreground": "#F02931",
}
},
]
}
}
SETTING ADDITIONAL SCOPES:
Additionally you can inspect the particular token (e.g. tag) in order to see the name of the scope that you want to style.
In the the Command Palette Ctrl + Shift + P open the Developer: Inspect Editor Tokens and Scopes to see the TextMate scope names of the parts (opening tag, closing tag, etc.) that you want to modify.
For a more advanced matching and going beyond jsx you may want to reference the TextMate grammars
Is there a way how to force Visual Studio Web Essentials to insert single quotes instead of double quotes?
For instance so that div.col-xs-1 TAB produces <div class='col-xs-1'></div> instead of default <div class="col-xs-1"></div>?
I am using Visual Studio 2013 Update 4 with Web Essentials 2013 v. 2.5.3.
Not to be a johnny come lately, but I was having trouble getting this to work in VS code, and so I thought I would post a solution for anyone still having this problem. My solution was to go into settings (ctrl-,) > user settings > extensions > emmet and under preferences click "Edit in settings.json". There, I added this to the user settings:
"emmet.syntaxProfiles": {
"xml": {
"attr_quotes": "single"
},
"html": {
"attr_quotes": "single"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
},
"jsx": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
Where each language you can define settings for. This worked for me.
To get single quotes working with JSX you will need to update or create the syntaxProfiles.json in ~/emmet with the syntax profile. If ~/emmet does not exist create it.
The key is the file extension and the value is the name of the profile that extension will use.
So in ~/emmet/syntaxProfiles.json
/* 'js' will map files with .js extension to use the js profile*/
/* 'jsx' will map files with .jsx extension to also use the js profile*/
{
"js": "js",
"jsx": "js"
}
And in ~/emmet/profiles.json
/* create or add the 'js' profile */
{
"html": {
"attr_quotes": "double"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
This should work for most editors but I have only tried in atom.
https://github.com/emmetio/emmet-atom/issues/68
This must have been asked somewhere, but can't find where :(
I was reading up on finding out which browser someone was using in html.
My site uses a 'theme' (DevExpress' Black glass) and was wondering if there was a way of accessing Chrome's current theme, when the user is logged in.
I understand this has the potential to be a huge undertaking, but if it was possible, is there a way of getting the 'css' of chromes theme (obviously this would only apply if user was using chrome)?
I am currently writing a project in mvc, but any html/css approaches would be beneficial here.
For Example:
Is it possible to obtain access to the css of the 'Grass' theme (please note, this is just one example, there are many other themes available)?
As far as I know it's not possible, because it doesn't work like CSS. You have to get the JSON file, because I don't think it's possible from CRX.
Here is how a JSON file for a GC theme looks like:
{
"version": "1.0",
"name": "test theme",
"description": "A test theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}
More info:
https://code.google.com/p/chromium/wiki/ThemeCreationGuide
BTW: Why would you want this, when there are 3-4 colors, no styles? You can get the colors with color picker.
I tried this : https://developer.chrome.com/extensions/options.html and made an option page.
So a selection has been added under my extension icon with the name of Option.
My question is that is there a way to rename Option and change it something like Setting or some words in other languages ?
The "Options" label at chrome://extensions is automatically adapted to the user's language. Extensions cannot change the value of this label.
The value of the "Options" option at the dropdown menu at the extension's button cannot be customized either, but you can create a new context menu item under the button as of Chrome 38. E.g.
chrome.contextMenus.create({
id: 'show-settings', // or any other name
title: 'Settings',
contexts: ['page_action', 'browser_action']
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == 'show-settings') {
chrome.tabs.create({
url: chrome.runtime.getURL('settings.html')
});
}
});
I suggest to just stick to "Options" though, because users do already know what the option does. Consistency in UI/UX is important, imagine how you productive you'd be if every application had a different way of (e.g.) closing/quiting the application.
manifest.json to test the previous script:
{
"name": "Contextmenu on browserAction button",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Right-click to see a context menu"
},
"permissions": [
"contextMenus"
]
}
Easier way to trigger events.
chrome.contextMenus.create({
title: 'GitHub',
contexts: ['page_action'],
onclick: () => console.log('GitHub'),
});