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.
Related
I'd like to keep some space between some html blocks in my code. However, Prettier wants to remove these lines. Is there a Prettier setting to keep this spacing?
Before prettier:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
After pretter:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
There is no way to actually do this, you might only use tricks.
First trick
Ignore completely the file (or file extensions) but you will not benefit from Prettier
Second trick
Deny Prettier to trim whitespaces
trim_trailing_whitespace = true
And add whitespaces in line breaks.
Once again this is not an effective solution, it's only a trick.
An issue has been closed by devs
adding and removing line breaks is core to prettier's formatting algorithm
According to #suchipi , Github member:
adding and removing line breaks is core to prettier's formatting algorithm, so preserving them isn't consistently possible.
As a work around you can try:
setting very short printWidth
put // prettier-ignore comment above your code.
For Refernce:
Github issue
Is there a config in prettier to keep line breaks?
Don't know if this will work as intended however, in the document for Prettier, there is a section for "Empty Line" that says;
"Prettier collapses multiple blank lines into a single blank line."
By this, you may want to add a double blank line instead of a single blank, where you are wanting a space to be, as it should compress it into a single line rather than removing it all together.
Take a look on this thread https://github.com/prettier/prettier/issues/4870, it's pretty good explaining why this is still non-existing feature.
There is no simple way for formatter to determine what to keep and what to remove.
So the only practical things you can do
Add comments to disable formatting in certain places (which is bad idea and never work well, dev gents become annoyed with this super quickly).
Accept that empty lines would be collapsed (still bad, because of poor readability)
Disable this feature and maintain empty lines yourself (alternative editor). This one "arguably" seems to me the simplest (best) option in a long-term.
I am trying to create a snippet that gives me choices for optional attributes. I have used this approach in the past where I just put a blank space as a choice in the placeholder. That works when there is only one option between other parts of the snippet but like in the following example if I wanted to skip both placeholders (optional attributes on the adorn) there would be multiple spaces in the generated code which I would have to delete manually.
"Adorn":
"prefix": ["adorn"],
"body": [
"<%= adorn${1| , color: :blue, color: :white|}${2| , inline: true|} do |a| %>",
"\t$0",
"\t<%= a.adornment %>",
"\t\t",
"\t<% end %>",
"<% end %>"
],
"description": "An adorn"
},
From what I can see in the documentation it doesn't seem possible to do what I want using placeholders and choices. I thought I could use a variable and just have it resolve to empty string but the grammar doesn't seem to allow for that.
Is there any other way to accomplish what I am trying to do?
You can use some unicode characters in snippets, so I tried backspace (did not work) but \u200B which is a "zero-width space" does. So you can do this in your choices:
{1|\u200B, color: :blue, color: :white|}${2|\u200B, inline: true|}
and if you choose the blanks (i.e., the \u200B's) a zero-width space will be inserted. And you get what you want - no spaces to be deleted.
But I leave it to you to see if there are any parsing or other problems with having that character in your code. Maybe it is or isn't a problem in your language. See the open issue (which I found after posting this answer initially) https://github.com/microsoft/vscode/issues/34368 ("Allow "empty" as a choice in snippets
") where the zero-width space option is warned against and may cause problems - so test it. It doesn't look like there is any other option but a regular space which you have tried.
I tried "null" \u0000 and it wasn't recognized by vscode.
if a blank space is all you need, then all is needed is an '$1' that the placeholder.
but first let's see if you have errthing
First
at the root of yow project you need a new dir call .vscode
in side yow dir add a new file NOTE name is very important yow new file's must have this pattern any.code-snippets
in side yow new file add this
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
To finish I recommend you to remove the scope attribute. and do not use the file for more than one language, bcuz if you do so it may not work at all.
The best way to get an empty value for a placeholder with choices is to add a choice of 1 character and remove this with Delete or Backspace (depending where the cursor is, it differs for the 2 placeholders) and then TAB to the next placeholder.
To get the choice list for placeholder 2 press TAB when you are at placeholder 2.
Watch the location of the separating spaces, they are at the end of the choice.
"Adorn": {
"prefix": ["adorn"],
"body": [
"<%= adorn ${1|e,color: :blue ,color: :white |}${2|e,inline: true |}do |a| %>",
"\t$0",
"\t<%= a.adornment %>",
"\t\t",
"\t<% end %>",
"<% end %>"
],
"description": "An adorn"
}
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 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)
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