I know how to wrap a single line of text in an HTML tag with Emmet by using Wrap with Abbreviation. It works. However, it produces the following output:
<h1>
HTML5
</h1>
What I want is this:
<h1>HTML5</h1>
I can make some progress with this in my User Settings:
"emmet.syntaxProfiles": {
"html": {
"tag_nl": false
}
}
However, my output then looks like this, with extra whitespace:
<h1> HTML5 </h1>
Oddly, if want to individually wrap a selection that contains multiple lines, visual studio behaves as I want. It is just individual lines that cause this behavior. For instance, if want to wrap this:
foo
bar
I end up with this, which is what I what I want:
<h1>foo</h1>
<h1>bar</h1>
Is there a way to sort this out? I just want to wrap some text in a tag with no fancy formatting:
<h1>HTML5</h1>
It is perhaps worth pointing out that WebStorm and Atom wrap as I expected. This is a Visual Studio Code specific thing.
I tried your code:
"emmet.syntaxProfiles": {
"html": {
"tag_nl": false
}
}
It works now perfectly with single line selection, but is still buggy with multiple lines (extra tabs & spaces added)
Related
I need TinyMce to write Markdown with formatting options. Here I do not need paragraphs, simple <br> elements which can be reliably replaced to \n would be best.
To illustrate the problem, the following output was created after inserting the third line as a paragraph:
<p>## Heading<br />
Some Text</p>
<p>Some More Text</p>
I cannot think of an easy solution to find and replace incorrect paragraphs like the ones around the first block. Thus I want to turn off paragraphs completely.
I already found the configuration forced_root_block : '' to disable automatic creation of paragraphs for every line break. Here the solution is shown how to disable Shift+Enter. The last remaining puzzle piece is the styleselect-toolbar, which has a possibility to add paragraphs. I only found a solution how to add options to that toolbar, but not how to hide or remove.
Can someone help me how to hide the paragraph-style from the styleselect toolbar? Or maybe point out that I am missing an elegant solution which completely disables paragraphs in one step?
With Try-and-Error I changed the following part in the current themes theme.js, which hides the "Paragraph" button in the styleselect-toolbar:
var defaultStyleFormats = [
...
{
title: 'Blocks',
items: [
{// removed this block
title: 'Paragraph',
format: 'p'
},
{
title: 'Blockquote',
format: 'blockquote'
},
...
Removing part of the JS file was possible because we do not import it from npm but rather copied the code manually in our repository. So this solution might not apply to everyone.
Right now, when writing markdown in visual studio I have the configuration to wrap words according to the view port, and this is just fine, but sometimes I have to insert some base64 codes that have more than 200000 characters.
The base64 lines fill pages and pages with "useless" information.
Ideally, I want to achieve something similar to this in an automatic way or something close to it:
As you can see, the objective is to have "wrap on" for the information and the "wrap off" for the base 64 information.
So the point is to understand if there is a way to wrap off just some blocks and keep the wrap on viewport for the rest of the information
I thought in some workarounds
Wrap off lines starting with XXXXX ( in this case wrap off lines that start with:
Mess with the editor properties in settings json to wrap on lines with length 0 till 100 (for example)
but enable to get some success with it.
Right now, I have a pretty straight configurations in my settings.json (nothing is overriding the markdown section)
"[markdown]": {
"editor.wordWrap": "on",
"editor.defaultFormatter": "darkriszty.markdown-table-prettify",
},
Let me know if someone had the same problem and managed to workaround this situation
Feel free to ask for further information
Thanks in advance,
I suggest you wrap it in
<div> ... </div>, since it does not have any effect on your document, and then fold it. You can fold the text in VSCode with
Ctrl + Shift + [
or by pressing F1 and typing fold, selecting it while having your line cursor inside the div.
Here's a very nice answer as well.
I'm trying out VS Code and I used Emmet to create a new HTML element with a class. I need to create another nested (child) HTML element inside the original element, but by default, VS Code will not indent for the new element, when you hit enter inside the original element tags. Like if you have <div class="main"></div> and you hit enter in between the div tags, you'll get -
<div class="main">
</div>
And then you need to manually go one line up, add tabs and indent for the new HTML element.
In Webstorm, hitting enter in between the parent tags automatically indents for the new child element.
Here are two GIFs which show what I mean.
VS Code -
Webstorm -
Is there an extension or some other trick that achieves this feature in VS Code?
Download an HTML formatter Extension. 1th, download one of the below Extensions:
Beautify
JS-CSS-HTML Formatter
OR any other HTML formatter you want. 2th, in VS Code, go to one of the HTML files you are working. 3th, Press ALT + SHIFT + F then a pop out window appears. 4th select one of the suggested formatters. All done!
Whenever, you press ALT + SHIFT + F in an HTML file, it will be auto indented and beautified.
I'm guessing your looking for this setting
{
...
"html.format.indentInnerHtml": true,
...
}
"emmet.useNewEmmet": true;
Use this command to enable indent.
Steps:
1) Open "settings.json".
2) Add this code inside { ..... } (Curly Braces).
3) Make sure you add ',' (comma) on the last line if you are adding this code after a certain line in the end.
eg:
{
...
...
"editor.fontSize": 17, <--comma
"emmet.useNewEmmet": true
}
4) Save it.
FROM: https://github.com/Microsoft/vscode/issues/30790#issuecomment-317290906
I am using visual studio code for writing html but it doesn't have the feature of identifying closing tag for the current selected one.
How can I achieve the same?
Here is how it looks on VS Code:
Can you suggest any extension or how can I achieve this?
VS Code 1.7.1
install this extension
highlight-matching-tag
and change the settings.json to
"highlight-matching-tag.leftStyle": {
"borderWidth": "0 0 0 3px",
"borderStyle": "dotted",
"borderColor": "red",
"borderRadius": "5px"
},
I think you chose PHP or something else for "language mode", change it on HTML
I'm not sure if you have any extensions installed that break the highlighting? If I use your example, it highlights the closing tag fine by default:
Additionally, there is a builtin Emmet command that jumps between the beginning/closing tag. In the command palette, you can search for 'Emmet: Go to Matching Pair".
If you bind it to a shortcut, you can press that for example twice to see the cursor jumping between your tag. The name of the command to bind is editor.emmet.action.matchingPair
I was having the same issue and HTML snippet extension solve it. Just install it Html snippet
and just do some changes in setting, goto file->preferences->setting,
you can now see User settings in the right hand side, add the following code
,"files.associations": {
// extension name : html
"*.php": "html",
"*.html": "html"
}
and you are ready to go. Enjoy :)
The best visual way that i found to do this is with a plugin highlight-matching-tag
"highlight-matching-tag.styles": {
"opening": {
"full": {
"highlight": "rgba(165, 153, 233, 0.3)"
}
}
}
VSCode now supports matching tag highlighting by default:
Install "Bracket Pair Colorizer" extension.
File -> Preference -> Settings -> User Settings(Text Editor). You can edit in json view.
first confirm your visual studio have this extension it install default but for safe side you can check and solve highlight problem with matched div with this steps:
Go to the visual studio and type Ctrl+P
Make sure
Open preferences > setting
Paste this:
"editor.occurrencesHighlight": false,
"highlight-matching-tag.styles": {
"opening": {
"name": {
"underline": "red"
}
}
}
first line for disabled highlights.
you can choose color : red or anything else
may be it's help to you
#thank you
I was having this issue too. If you click and drag it selects all words with that text highlighted, but if you just single click it seems to select the closing tag. So yeah just single click a tag to get the pair, don't double click or click and drag.
I was having this same issue with Some Tags matching and highlighting while others don't.
The Weird thing was if I created a new file, and put a bunch of tags in they all highlighted correctly.
Turns out that that the person that created the original page used </br> for line breaks. This broke the highlighting of open and closing tags where a </br> happened between them. I changed the </br> to <br /> and everything is happy now.
It also happened with <link></link>, that I fixed by removing the closing tag.
I would suggest that if you are having this issue to look for closing tags that are not needed/ required.
We have a SAPUI5 timeline control, where we are showing the comments coming from server.
The issue is, if the comments contain a newline \n, then the Timeline control is not able to display the text in newline. Instead, it introduces space wherever \n is present.
We have tried formatting \n to unicode character also but that also didn't worked. Timeline control aggregates TimelineItem.
The control we are using is: https://ui5.sap.com/#/api/sap.suite.ui.commons.TimelineItem
Code snippet can be found at:
https://jsbin.com/kuluyehilu/edit?html,output
I inspected your example and came up with the following solution.
Since the text is embedded in a <span>, all unnecessary whitespace will be trimmed. What you can do is telling the span (via CSS) that it should display the whitespace anyway.
If you don't have a CSS file in your project yet, create one. Then add the following lines
div.sapSuiteUiCommonsTimelineItemShellBody>span {
white-space: pre;
}
This should do the trick.
JSBin: https://jsbin.com/feladeneso/1/edit?html,output
If you inspect the rendered element, you will see it actually put in the break:
<span id="__item0-realtext">x
y</span>
...but did not convert it to a <br/> tag. You cannot add the tag yourself since it will be escaped, either. Maybe you can try to override the renderer, and convert any line breaks to html breaks