Using the Ace Editor pre-packaged version and trying to add some basic code highlighting (custom keywords) to the Ace JavaScript editor.
Please do not read too much into the example, it is purely an example to avoid posting sensitive data.
Keywords example: added to the keywordMapper:
"options": "settings|options|global|user";
And added some css to the page that uses it:
.ace-eclipse .ace_options {\
color: rgb(255,20,147);\
}\
I figured it would just highlight the keywrods so i can get this (without highlighting the dots):
But nothing I've tried works. I can only get the first (pre dot: '.') word to match. ".settings" wont match (you'd think it would).
The idea is that i'll implement auto complete based on the previous token, e.g. type "settings." to get a list containing "options" (and other stuff), click options and enter "." to get a list containing "global|user", another "." to show all the settings in each respective object.
I've experimented a little using the rules, but that is confusing enough, and the closest i can get is it working WITH dots being highlighted.
Any assistance is appreciated.
P.s. Had a go at the <![CDATA[ example on the ace main site and couldn't even get the code they post to work.
Its so confusing and there's hardly any documentation! I cant help but think it cant be that hard, as there are a ton of "real world users" on their site.
Thanks.
keywordMapper is only for keywords and top level identifiers. All the properties after dot are handled in https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/mode/javascript_highlight_rules.js#L210.
so you should add another rule before it like:
{
token : "options",
regex : "settings|options|global|user"
},
You can use https://ace.c9.io/tool/mode_creator.html to experiment with the highlighter
But for autocompletion you don't really need to highlight tokens, you can just use their values, instead of types.
Related
I have a large corpus of ES6 code. A search returns all occurences of a string or regular expression, but I'd like an option that will either show or hide hits within comments. Atom can already parse the language enough to discern code vs comments, so it shouldn't be much of a stretch to make search results sensitive to code, comments or both.
Does anyone know if a plugin to enable this behavior already exists? I can't seem to find it if it does, and if I get the urge to write it, I don't want to just be spinning wheels.
I want to add information to an HTML page that will be visible to JavaScript but not to the end-user. I want to keep the original HTML page as simple as possible. One solution would be to use non-standard tags, such as <custom> ... </custom>
I am aware of the official way of adding custom elements, but my purpose is not to show anything on-screen, so using the CustomElementRegistry seems overkill.
Here's my use case. I am creating an "aided reader" web application for people who are learning English. My JavaScript code adds <span> elements to an ordinary HTML page, enclosing words which are new to the reader. For example, JavaScript code will change the plain HTML ...
<p>The word "thought" may be new to elementary learners.</p>
... to:
<p>The word "<span data-info="think">thought</span>" may be new to elementary learners.</p>
(The span's data-info attribute provides information which is used later — when the user hovers the mouse over the word — to display images, definitions and examples, but that is not important here.)
The text comes from non-web-developer authors, and it contains no mark-up at all at the beginning. I am writing two tools: one offline and one online. The offline tool compares the vocabulary with lists of words that students are expected to know at different levels, and allows an non-tech-savvy editor to collect different inflections of the same word (for example: lose|loses|lost|losing) that appear in the given text, so that they can be treated as the same root word. This generates an array of terms that the student might want to learn more about. Each term is stored as a string that can be converted to a regular expression. For example "los(?:e|es|t|ing)".
The online web page will receive:
The raw text from the author
The array of search terms
Some more information about what reference sites to use. This information will be added to the data-info attribute of the enclosing span, but it is not important here.
The online code will work through the array, looking for matches for each regular expression (/thought|thinks?/, for example) in the raw text and add the same span to all the occurrences it finds. It will also add <p> tags where necessary.
However, the word "thought" can be either a verb or a noun: "Yesterday I thought..." (verb) or "Yesterday I had a thought... " (noun). In the second case, I need to use a different regular expression: /thoughts?/, to allow for both singular and plural forms.
However, both these regular expressions will find a match for "thought", which is the problem I need to solve.
This is where the "information hiding" comes in. One solution would be for my offline tool to add tags to the raw text like this...
Yesterday I thought ... Yesterday I had a thought ...
I can then use different regular expressions for each case, and there would be no clash.
/<verb>(thought|thinks?)<\/verb>/
/<noun>(thoughts?)<\/noun>/
Since these tags will be not be displayed in the browser, they can remain in place ... or can they?
Is there any danger in using non-standard and non-declared tags in this way?
Why don't wrap it with a span like you did at the beginning and add an attribute called "data-type".
Would give :
<p>Yesterday I <span data-info="think" data-type="verb">thought</<span> ... Yesterday I had a <span data-info="think" data-type="noun">thought</span> ... <p>
I am embedding a foreign system that uses i18n into my website. I have no control over the source of language files, and my language isn't one of the available languages there.
But I do have access to JavaScript/jQuery, so I thought I'd change a few of the headers, to give the interface a more localized feel. Not a full translation, just a few of the more prominent values.
Is there a way to select specific i18n elements, and change their value using JavaScript/jQuery?
This is the syntax of the elements I want to change:
<div class="className" data-i18n="some.idententifier">English Value</div>
edit:
Some more research got me to a point where I managed to change content of divs, but it only works when the identifier is one word, no dots.
See this fiddle: http://jsfiddle.net/einavatar/50wnqrym/1/
But all the identifiers on the interface I'm using make use of the dot syntax. How can I hook on to those then?
In your jsfiddle you have doesnt.work as a single key. Split that up into doesnt: { work: "different value" } and you should find it works (ironically unless you change doesnt to does).
I want to use some custom keywords in Markdown mode that should be highlighted by Ace. For example, I need to tell Ace that it should colorize
keywords like TODO,
regexps like /COMMENT\.+$/ or $1 in /^list: \[(.+)\]/,
the YAML header (which is not considered by Ace)
However, the file src/mode-markdown.js looks aweful and http://ace.c9.io/#nav=higlighter reads too general to me. Is there a comprehensive way to implement it?
I am looking into this myself, one thing I've done is created a custom mode-mymode.js and hacked at it to add in the keywords and items I wanted to colorize. But I'm in agreement it's an awful looking file.
On the page http://ace.c9.io/#nav=higlighter - they do offer the mode creator, but if you go way down the page.. i think what you are looking for is the subsection on "Extending Highlighters"
The concept of this section is that you basically "add-on" to an existing highlight rule, which should take care of what you are looking to do.
This is my first post, but I've loved using this site as resource for quite awhile now. However, the time has now come for me to ask a question...
I have found plenty of JavaScript highlighter plugins during my research into this question, but they all focus on finding one word. For a fan-site I am creating (Mega Man Battle Network, for those interested), I would like to find a way to detect the words, "Fire", "Aqua", "Elec", and "Wood", so I can automatically add styling to them.
Any JavaScript gurus out there to help me?
If you don't care which word is found, you could use a regex like this:
/\bfire|aqua|elec|wood\b/gi
Actually, now that I think about it, I'd still use the same regex (only with capture groups) even if you did care what word you found. You could use javascript and jquery to select sections that have a word and add that word as a class name, thus applying whatever CSS you've defined as associated with that class.
That regex would look like this:
/\b(fire|aqua|elec|wood)\b/gi
The jQuery you'll be looking for will likely be the filter function: http://api.jquery.com/filter/#expr
Once you have those objects, you can apply your styles using jQuery and .addClass: http://api.jquery.com/addClass/
I figured it out!
$(document).ready(function(){
$('div.elemental:contains("Aqua")').addClass('aqua');
$('div.elemental:contains("Fire")').addClass('fire');
$('div.elemental:contains("Wood")').addClass('wood');
$('div.elemental:contains("Elec")').addClass('elec');
});
Now I just need to figure out how create a callback to a new function so that the highlighting is done to each new page I go to.