I am using WebStorm 9 IDE, but i have faced annoying issue with Line comments in LESS/HTML/CSS using "CTRL+/" hotkey, e.g.:
.navbar-toggle {
// margin: 13px 15px 13px 0;
}
As you can see it makes line comments at first column, i don't need that, i need this:
.navbar-toggle {
//margin: 13px 15px 13px 0;
}
How can i do that for LESS/HTML/CSS?
For Javascript i can go in Settings -> Codestyle -> Javascript -> Wrapping and braces -> Uncheck "Comment at first column" and it works, but there's no such option for LESS/HTML/CSS. Need some help.
Not currently possible: such option has to exist on per language basis (it's not one-for-all option, unfortunately).
As I understand you have submitted new ticket already: https://youtrack.jetbrains.com/issue/WEB-14255
LESS specific ticket: https://youtrack.jetbrains.com/issue/WEB-12549
Related
I'm using .mjml templates and VSCode. I had to install an extension for the highlighting to work correctly but I noticed by Prettier seems to transform inline CSS (which is pretty common in emails) from this:
p,
h1 {
color: #ffffff;
}
h1,
.text-h1 h1 {
font-size: 32px;
line-height: 1.1;
margin: 0 0 16px 0;
font-weight: 700;
}
to this:
p, h1 { color: #ffffff; } h1, .text-h1 h1 { font-size: 32px; line-height: 1.1; margin: 0 0 16px 0; font-weight: 700; }
The only way I was able to prevent this is by adding a <!-- prettier-ignore --> before the <mj-style> tag but I was wondering if there isn't a better way (configuration?) to get the same result without the extra markup.
See:
https://github.com/mjmlio/mjml/issues/2557
Is there a way to tell Prettier that the following "block" has a specific markup type?
Based on my research and also the lack of answers, it looks like the overall MJML tooling ecosystem is not in the best of states. I think for now the best option is to use the workaround I provided. Here is a detailed breakdown of the options available.
Style element <mj-style>: (most likely the best option)
<!-- prettier-ignore -->
<mj-style css-inline="inline" />
.content {
color: green !important;
}
</mj-style>
Pros:
Works in the online visual editor by copy/pasting the markup.
Cons:
No Prettier formatting (ref).
An external CSS file:
<mj-include path="./default.css" type="css" css-inline="inline" />
Pros:
You can import a CSS file that will get normal Prettier treatment.
Standard pattern where CSS lives outside the document.
Cons:
It also won't work with the online MJML editor tool without merging back your CSS file. This is very annoying and makes it hard to maintain.
<mj-include> can report miss flagged error depending on our your project is setup.
It does not work with the "official" VSCode plugin (you have to use this one).
MJML inline styles:
<mj-text color="#fff" padding="0" font-weight="400" font-size="16px" line-height="1.65" />
Pros:
You don't need CSS.
Cons:
You possibly will repeat a lot of the same style and maintenance can become problematic.
Style element <mj-class>:
<mj-class name="blue" color="blue" />
Pros:
Benefits from the re-usability of CSS without having to use CSS, avoiding Prettier issues.
Cons:
Not as flexible as CSS in terms of selectors which can lead to repetition and maintenance issues.
I want to set my live template for css like
df
After this I want to be displayed:
display: flex;
But in my Webstorm I have some predefined shourtcut and I cannot find any clues how to disable it in LiveTemplates. It's really annoying to always press bottom arrow when I want to write display: flex;
The IDE suggests existing HTML elements in completion; dfn is the Definition element; there is no way to remove it from completion list
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
Consider aligning properties in a CSS file using the Tabular plugin in Vim. Suppose we have the following CSS ruleset:
body {
margin: 0;
padding: 0;
font-family: arial, verdana;
}
With the cursor inside the rule, vi{ followed by :Tab /:\zs results in
body {
margin: 0;
padding: 0;
font-family: arial, verdana;
}
However, I would like to align all the property values in all rulesets in the file at once, not just in one ruleset.
Running the same Tabular command for all lines (:%Tab /:\zs) does achieve the desired effect, as rule names needlessly affect the width of the left column. Besides, some CSS rules contain several : characters.
How to ignore lines containing curly braces when running such Tabular command?
To work around the issue, one can eliminate the problematic lines from
affecting the width of the first column by prepending the column
separator at the start of each of those lines. When the alignment is
done, this extra prefix can be easily removed. Following this approach
we will have three commands, like so:
:%g/:.*{/ s/^/:/ | exe '%Tab/^[^:]*:\zs' | %s/^:\s*//
You can map this command to a shortcut, or even run it automatically
when a CSS file is saved:
:autocmd BufWrite *.css %g/:.*{/ s/^/:/ | exe '%Tab/^[^:]*:\zs' | %s/^:\s*//
The global command could be used here. I don't have Tabular, so my version just indents all CSS blocks:
:%g/^.*{/+ | .,/}/->
The last command after | is the Ex-mode command to indent the block from the current position (one line below each opening brace) to line above the closing brace. Based on what you've said, I'd expect this to work, but I haven't tried it:
:%g/^.*{/+ | Tab /:\zs
I want to create a MediaWiki template which shows different text depending on where it is on a page.
Specifically, it is before the first heading it should show text like, "this template is applicable to this whole page"
Alternatively, if it is within a section on a page (after a heading) it should show text like, "this template is specifically applicable to this section".
I know there are templates that make use of "If" (like If pagename); is there any way of detecting the template's location on the page?
I don't think so. Your best bet would be to make multiple templates. That being said I'm sure you could write an extension that would do this.
Another way would be to add a variable in your template, that you change depending on which section it is in.
With a lot of help from a colleague the answer is below. Put this into a template (which you then call from all your other templates containing header / instruction / etc. text).
<includeonly><css>
div.headingText { color: blue; border: 2px solid blue; background: lightcyan; width: 461px; padding:0.5em 0.5em 0.5em 0.5em; display: none; margin-bottom:-6px; }
h2 + div.headingText, h3 + div.headingText, h4 + div.headingText, h5 + div.headingText, h6 + div.headingText { display:block; margin-top:5px; }
</css>
<div class="headingText">'''{{{1|This [[tag]] applies only to this section.}}}'''</div></includeonly><noinclude>
your explanatory text
</noinclude>
Notes:
This requires use of the CSS extension.
What this actually does is show certain text if the tag is included directly below a title and no text otherwise. (It has default text in parameter 1 in this example, which can be changed.)