With Avalon Edit, I'm looking for a way to provide a highlighting format while inside something that is already formatted.
That is, I'd like to highlight thing inside quotes, but within those quotes I have another syntax that can be added that starts with ${ and ends with }.
By default, it seems that the syntax highlighting stops once it enters a 'begin' and doesn't look for any others until the end is reached.
<Span color="ParamName">
<Begin>"</Begin>
<End>(?=:)</End>
</Span>
<Span color="Variable" multiline="false">
<Begin>\${</Begin>
<End>}</End>
</Span>
So here the ${ syntax is only colorized if it is not within a ParamName ("). is there a way to allow my Variable highlighting to work even if it is in a ParamName (yes ParamName is from JSON formatting, I'd like my highlighting to work no matter where it shows in the JSON syntax)?
Full Highlighter code:
<Keywords color="Digits" >
<Word>true</Word>
<Word>false</Word>
</Keywords>
<Span color="Value" multiline="true">
<Begin>
(?<=:)\040?"[^"]*
</Begin>
<End>"</End>
</Span>
<Span color="ParamName">
<Begin>"</Begin>
<End>(?=:)</End>
</Span>
<Span color="Variable" multiline="false">
<Begin>\${</Begin>
<End>}</End>
</Span>
<Rule color="Digits">\b0[xX][0-9a-fA-F]+|(\b\d+(\.[0-9]+)?|\.[0-9]+)([eE][+-]?[0-9]+)?</Rule>
A <Span> switches to another <RuleSet> that is active within the span. By default, that's an empty rule set, so nothing else is active.
If you want a rule to apply within a span, move it to the nested ruleset:
<Span color="ParamName">
<Begin>"</Begin>
<End>(?=:)</End>
<RuleSet>
<Span color="Variable" multiline="false">
<Begin>\${</Begin>
<End>}</End>
</Span>
</RuleSet>
</Span>
Related
I cannot seem to get my head around this problem.
I have a contenteditable div.
I want to wrap all words and special characters in a tag but keep line breaks.
I’ve tried sanitize (allowing only spans and br tags) and using all kinds of regular expressions.
Do you guys know any npms or have ideas as to how this might be done?
It doesn’t neccesarilly need to happen as the user types.
I have categories which the user must select after typing the text. Ie. “Animal”, “Food” and “People”. The user must select a category and the he/she can click on any word in the contenteditable.
Let’s say I enter:
Peter loves his dog.
<span class=“word”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“word”>dog</span><span class=“word”>.</span>
User then clicks “People” and then clicks “Peter” =>
<span class=“people”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“word”>dog</span><span class=“word”>.</span>
Then user clicks “Animal” and then clicks “dog” =>
<span class=“people”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“animal”>dog</span><span class=“word”>.</span>
I know how to change the class name of a clicked span class, but the formatting leasing to these steps, I cannot get my head around :(
Any ideas are really appreciated.
Thanks in advance for any guidance to npm installations or simply ideas.
I know that this question has been asked a lot but I tried re-downloading Bootstrap (I've got the latest version - 3.3.6), my #font-face{ } has the correct paths to my font files, I don't know what else to try. I get the same results in both Chrome and Firefox. One thought I had is that I'm trying to put my icons w/in <em> tags, but when I tried moving them to outside the tags, they still looked like squiggley lines, so that didn't fix it.
I want to use glyphicon-chevron-up and glyphicon-chevron-down (which show up as ≅ and [ ) but when I do something like <span class="caret"></span> then it looks perfectly normal.
Here is how I am using them:
<em class="pull-right">
<em class="pull-left">
<span class="glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>
<span class="glyphicon-chevron-down" ng-click="minusOne($index)"></span>
</em>
{{ post.upvotes - post.downvotes }}
</em>
I can still click the icons and increase/decrease the vote count so I don't think it is a problem with Angular, but just for reference I am using angular1.4.9 and django1.9. Again, I know several variations of this question have been asked but none of the solutions I found worked for me so any additional ideas would be appreciated!
Maybe its for this:
<span class="glyphicon glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>
In my page works great.
Just add glyphicon before the glyphicon-icon name.
Currently i need to search a text and select the expected result from the search list.Search result displays with li tag and the text resides under span tag. Searching text will be like this Phone,Phone-audio,Phone-video .My source code is displaying like below..Please help me to select either Phone-audio or Phone-video.
<ul>
<li class="Searchitem"></li>
<span value="AL">Phone</span>
<li class="Searchitem"></li>
<span value="AL">Phone</span>-audio
<li class="Searchitem"></li>
<span value="AL">Phone</span>-video
</ul>
That html doesn't make any sense, and definitely isn't per standard. Neither the span nor the -audio or -video are inside the li tags. I'm not even sure what element you need to click.
If it was html was compliant it would be as easy as:
browser.span(text: 'Phone-video').when_present.click
or maybe this would work, depending on the rest of the site's html, but it would be very flaky if anything changed:
browser.ul.span(index: 1).when_present.click
This is my JSX:
<h4>{post.title} <small> (by {post.author})</small> </h4>
This is what is generated on the server (using React.renderComponentToString()) and sent to the client.
<h4 data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0">
<span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.0">Why JavaScript is eating the world.</span>
<span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.1"> </span>
<small data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2">
<span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2.0"> (by </span>
<span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2.1">spike</span>
<span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.2.2">)</span>
</small>
<span data-reactid=".2ggx1vlvrwg.1.0.0.$posts-about.$2.0.3"></span>
</h4>
And this is what is generated on the client side (in browser):
<h4 data-reactid=".0.1.0.0.$posts-about.$2.0">
<span data-reactid=".0.1.0.0.$posts-about.$2.0.0">Why JavaScript is eating the world.</span>
<small data-reactid=".0.1.0.0.$posts-about.$2.0.1">
<span data-reactid=".0.1.0.0.$posts-about.$2.0.1.0"> (by </span>
<span data-reactid=".0.1.0.0.$posts-about.$2.0.1.1">spike</span>
<span data-reactid=".0.1.0.0.$posts-about.$2.0.1.2">)</span>
</small>
</h4>
Apparently two spans are missing and that's causing React attempted to use reuse markup in a container but the checksum was invalid. error.
I suppose that the problem is in the JSX compiler. The generated JavaScript that is bundled and sent to the client is different from what the server is using.
Funny thing is that if I "fix" the indentation in JSX, it works. Both server and client generate the same HTML markup without those extra spans.
<h4>{post.title}
<small> (by {post.author})</small>
</h4>
However I haven't read anything in the documentation about being careful width JSX indentation and this makes me a little bit nervous because this kind of problem is hard (or at least annoying) to debug.
The problem was caused by an out-dated version of reactify. As a consequence two different versions of JSX compiler were used. As #FakeRainBrigand pointed out, the rules for treating whitespaces in JSX have changed recently and that caused the difference in compiled JavaScript.
JSX handling of whitespace makes a lot of sense when you understand the rules.
If it's on the same line it will work exactly like html whitespace
Spaces directly before or after a new line character are removed
The last rule is different from HTML for a very good reason. If you have a list of things, and you don't want a space between them in HTML, you have to pick one of these:
<ul><li>Apples</li><li>Oranges</li></ul>
<ul><!--
--><li>Apples</li><!--
--><li>Oranges</li><!--
--></ul>
As wonderful as those are, in JSX it can either look like the first one, or
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
And if you do want the space you can either insert it inside one of the elements
<ul>
<li>Apples </li>
<li>Oranges </li>
</ul>
or put a very explicit literal space where you want it
<ul>
<li>Apples</li>
{' '}
<li>Oranges</li>
</ul>
It has the side bonus of being my new favorite emoticon {' '}
I want to set an span 2 classes and one more with conditionality if item.qty is 0. I have this
<span ng-class="glyphicon,glyphicon-minus,{'notvisible': item.qty 0}"/>
But this dont work..i think this is not the sintax but i havent found anythink.
Why don't you just add those static classes in the usual way and only leave the conditional in an ng-class, like this:
<span class="glyphicon glyphicon-minus" ng-class="{'notvisible': item.qty==0}"/>
Also, you forgot the compare-operator == (I added it in the above example).
If you only want to toggle the visibility of that element with the 'notvisible'-Class, I would even recommend you use the ng-show-Directive like this:
<span ng-show="item.qty > 0" class="glyphicon glyphicon-minus" />