I am trying to set a background color on my div based on a a color send down by my server. I can't solve this with classes because the color value could be any legal color value. However, VSCode is giving me an error when I type the following. Is EJS not allowed to use with css related stuff?
<div style="background-color: <%= display_color %>;"></div> // Error: property value expected
This is an ESLint error. ESLint is a linting tool. It can help you find and fix (mostly/usually) stylistic problems with your code. It's highly configurable, and can also be used to auto-fix some problems for you.
As you already found, you can disable the lint warning for a single site/line like so:
<div <% /* eslint-disable css-propertyvalueexpected */ %> style='background-color: <%= display_color %>;'></div>
If you want to disable the warning once and for all, create an ESLint configuration file and do it there.
If you haven't installed the ESLint NPM package to use it that way, you're probably getting this because of one of your VS Code extensions.
Related
I am storing colors codes as a input from user into mongodb through mongoose. I tried to apply those codes into ejs template parts for styling. Can't figure it how can i do that.
I tried this way but it is showing error mark here :
Please my image :
colors are applying but the problems is error mark. I should remove that error mark.How can i do that?
Please don't send code as screenshot. It appears that you're being warned by the VSCode that you have syntax error but it appears ok, unless you have misspelled the variable name Primarycolor
<button style="background-color: <%= Primarycolor %>!important">Send a free request</button>
Have you tried to render that page?
Which formatter does Visual Code use? I read somewhere it uses jsbeautifier so I tried adding a compatible ignore comment to my .ejs template, but it doesn't work.
As far as I know, there is no way to do this without an extension.
However, you have full control of the formatting if you use this extension. It also uses js-beautify, but it adds configuration.
As specified in the js-beautify docs, the "preserve" directive only works in javascript sections. I have tested this in the script tag of an ejs file and formatting the document does NOT change the indentation of the console.log statement. This worked without changing any settings at all, actually. I simply installed the extension, saved this file as index.ejs and observed that vscode had the language mode set to html.
My test page
// These comments DON'T work because they aren't in a javascript section of the code
/* beautify preserve:start */
<h1><%= title %></h1>
/* beautify preserve:end */
<ul>
</ul>
<script>
function log() {
// Without the beautify comments, format document will move console.log
// to align with this
/* beautify preserve:start */
console.log('hello');
/* beautify preserve:end */
}
</script>
I'm getting an error from Babel when trying to compile my JSX code into JS. I'm new to react so apologies if this is an obvious issue, I wasn't able to find anything about it that seemed related. I'm attempting to use props in this chunk of code, and pass a pageTitle prop to my FieldContainer component. This is giving me an issue, though, that isn't letting the code compile to JS. I discovered in my searching that prop values should be passed between {}, but adding these did not help. Any ideas? Thanks!
It's hard to tell what you are trying to do here, but as the error says, the value of an attribute must be an expression {foo} or quoted text "foo".
In this case
Child={<LoginForm />}
or
Child={LoginForm}
is probably what you want.
I got this error because I failed to quote a property inside of the JSX:
<span aria-hidden=true ...
should have been
<span aria-hidden="true" ...
Just faced same issue, I was writing
component="Contacts"
resolved it by rewriting it as:
component={Contacts}
I would like to use prettify instead of Pelican's default code highligher on a Pelican site. I disabled the default code highlighting by specifying the MD_EXTENSIONS setting manually in pelicanconf.py and not including the codehilite extension. I've also successfully included prettify in the template.
The missing bit:
Prettify requires <code> or <pre> tags to have the attribute class="prettyprint", as explained here. How can I coerce Pelican to include this attribute by default?
I guess you have to edit theme it self.
For the following it is necessary to use version 2.6 (or later) of the Python-Markdown package.
In pelicanconf.py, add
MD_EXTENSIONS = [
'extra',
'codehilite(linenums=False,css_class=prettyprint,guess_lang=False,use_pygments=False)'
]
The two key settings are use_pygments=False, which will cause code-highlight to simply output <pre><code>... blocks, and css_class=prettyprint, which adds the required class to <pre> tags.
Now modify the Pelican theme according to prettify's setup instructions and you're set!
I use tinymce on my website and I always run into this annoying j is null.
In my template file I originally had the init method out in the open like in the example...
<script type="text/javascript" >
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
But in the error console of Firefox I see something that says "j is null" and the reference is somewhere within the tiny_mce.js file.
Any help is appreciated. Thanks so much.
It's a tinymce bug. Internally, the tinymce code uses a <span id="mce_marker"></span> to remember the caret-position when pasting. when validating the resulting fragment, after the paste, the span is deemed invalid and removed, thus breaking the code by removing the marker.
This issue will be fixed in the next official tinymce minor release. There are some workarounds for this kind of issue. One is to add to add id and mce-data-type attribute to spans as valid elements (init setting). Example:
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style]," +
"a[name|href|target|title]," +
"#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i,-u" +
"-span[data-mce-type]",