I would like JS <script type="xx"> content to be colored nicely inside my HTML document.
Right now, when adding the type to a script tag, the element text becomes uniform white, as seen below.
Of course, the JS code is colored nicely within the HTML if removing the type attribute.
Is there some setting I can modify to make this work?
No setting to modify. This is a known issue. From the thread it looks like syntax highlighting was working at one point for script tags with the type attribute but was lost.
Hopefully it's fixed soon. I'm seeing the same thing on VSCode 1.13.1.
Related
we are looking at a lot of HTML usually.
Now, <, > and </ around the tags are splattered everywhere. But unless there is a syntax error, those really have no value. And syntax errors are highlighted.
So instead of looking at:
I would prefer to look at, note you can change this in
Settings -> Editor -> Color scheme -> HTML -> HTML Code
the problem is if I change it this way, the vue templates get affected as well and all condition operators become gray too like the <>
mycomponent.vue
notice all and in
is there a different way to do it?
This is a perfect case of using language injections
If you don't have explicit vue.js support already set up (or if it doesn't handle it), you can define language injections to highlight that area as javascript expressions.
https://studgeek.com/2010/08/16/intellijidea-webstorm-knockout-data-bind-attributes/
Shows how a dummy javascript context can be set up for arbitrary xml attributes.
In this (quite dated) image, you can see the Prefix is set to a random window variable object, and the suffix ends the object, this simply wraps the code in the xml attribute with something roughly resembling the correct context for the javascript.
The data-bind xml attribute in this case, would be swapped out for v-if v-else or any other vue attributes that take a binding that looks similar to javascript.
If this fails to work, it sounds like an IntelliJ bug which should be reported.
You can try if rainbow brackets plugin works for you.
It changes the color of brackets and gives each pair of opening and closing bracket a unique colour to make it easier to identify which belongs together.
I'm trying to create a very simple and light wysiwyg editor using designMode/execCommand, eg:
$(document).ready(function() {
wysiFrame.document.designMode = 'On';
});
<iframe name="wysiFrame" id="wysiFrame"></iframe>
When I enter text in the iframe it is not wrapped in any tags. When I hit return the new line is wrapped in a div, eg:
here's my bit of text
<div>and this is the text after hitting return</div>
If I add:
$('#wysiFrame').contents().find("body").append('<p>Select me and type</p>');
and then select the text and over type the tags are added (in Chrome at least) as expected, new paragraphs and line breaks.
I tried:
$('#wysiFrame').contents().find("body").append('<p></p>');
But that gave me:
My typed text
<p></p>
Is there a way to wrap entered text within paragraph tags? I have trawled online but have only been able to find reference to preventing line breaks in favour of paragraph tags.
All help, suggestions and ideas welcome.
Thanks in advance.
Managed to get something together that although not elegant may be useful to others looking for a no-fuss, simple (dirty!) solution. In my 'designMode = 'on' function I added:
$('#wysiFrame').contents().find("body").append('<p> </P>');
When you click in the iFrame the insertion point lands between the space and the closing paragraph tag, just a little clean up needed server-side. Tested in Chrome, Safari and Firefox, seems to work reliably in all.
Any other suggestions out there?
When I hover over a custom html tag that I'm using from a platform (Polymer) or even a custom one I made it says that you can mark such a tag as custom somewhere. Is there a place to do this in Intellij? I'm using the latest version (14).
Here is a screenshot of what I'm talking about:
Any help would be appreciated! It would be nice to get rid of all these error highlights when I'm working with Polymer. Thanks!
Place the caret over the highlighted tag, hit ALT+ENTER and select Add tag to custom tags.
However that works only for current project. If you want to set the ignored tags globally, try this:
Go to Settings/Inspections, find the Unknown HTML tag inspection, select the Default profile instead of Project Default and specify the tags separated by comma in the textfield in the bottom right corner. Here is a screenshot:
Whenever I code the following inside an HTML document within PSPad (a free code editor):
<script src="test.js" type="text/javascript"></script>
the <script> tag becomes gray.
When I remove or split up the word script inside text/javascript, everything is fine. Is this a bug, or how can I still have formatting colors in a <script> tag with this type attribute?
Hopefully this image clearifies what I mean:
Currently, I do not have this issue anymore. I don't know how comes, but restarting PSPad was a workaround apparently. Also, I can't reproduce it at the moment anymore, so I'll forget about it.
This is not a bug, it is the Javascript tag's highlighter background.
In the Settings menu you have the Highlighters Settings where you can change all highlighters.
Different languages in a document can have their own highlighter colors and the highlighter can be individually set on/off or customised for all languages.
is there a way to alter the rendered HTML page in webbrowser control? What i need is to alter the rendered HTML Page in my webbrowser control to highlight selected text.
What i did is use a webclient and use the webclient.Downloadstring() to get the source code of the page, Highlight specific text then write it again in webbrowser. problm is, images along with that page does not appear since they are rendered as relative path.
Is there a way to solve this problem? Is there a way to detect images in a webbrowser control?
Not sure why you need to change the HTML to lighlight text, why not use IHighlightRenderingServices?
To specify a base url when loading HTML string you need to use the document's IPersistMoniker interface and specify a url in your IMoniker implementation.
I suggest you do it a different way, download and replace the text using the webbrowser control, this way your links will work. All you do is replace whatever is in the Search TextBox with the following, say the search term is "hello", then you replace all occurances of hello with the following:
<font color="yellow">hello</font>
Of course, this HTML can be replaced with the SPAN tag (which is an inline version of the DIV tag, so your lines wont break using SPAN, but will using DIV). But in either case, both these tags have a style attribute, where you can use CSS to change its color or a zillion other properties that are CSS compatible, like follows:
<SPAN style="background-color: yellow;">hello</SPAN>
Of course, there are a zillion other ways to change color using HTML, feel free to search the web for more if you want.
Now, you can use the .Replace() function in dotnet to do this (replace the searched text), it's very easy. So, you can Get the Whole document as a string using .DocumentText, and once all occurances are replaced (using .Replace()), you can set it back to .DocumentText (so, you're using .DocumentText to get the original string, and setting .DocumentText with the replaced string). Of course, you probably don't want to do this to items inside the actual HTML, so you can just loop through all the elements on the page by doing a For Each loop over all elements like below:
For Each someElement as HTMLElement in WebBrowser1.Document.All
And each element will have a .InnerText/.InnerHTML and .OuterText/.OuterHTML that you can Get (read from) and Set (overwrite with replaced text).
Of course, for your needs, you'd probably just want to be replacing and overwriting the .InnerText and/or the .OuterText.
If you need more help, let me know. In either case, i'd like to know how it worked out for you anyway, or if there is anything more any of us can do to add value to your problem. Cheers.