Repeat cursor text in a custom Emmet snippet - code-snippets

I want to create a snippet where the the text I type at the first cursor position gets used multiple times. I thought I could do it this way by repeating a cursor position number but it just treats the other ones as independent cursor positions. I don't see anything in the documentation about this.
Here is an example of what I would like to work:
<template id=${1}>
This is a ${1}!
</template>
<style>
#${1} {${2}}
</style>
Here is my Emmet snippets file used in VS Code:
{
"html": {
"snippets": {
"test": "test[id=${1}]>{This is a ${1}.}"
}
}
}
When I use the 'test' snippet it puts the cursor at the first ${1} but anything I type is not reflected in the second ${1} it stays empty.

It depends on editor you’re using. If your editor fully supports text fields (like Sublime Text, VSCode) the example above should work, all ${N} with same N should be connected.

Related

Infragistics UltraTree print/preview with nodes that have formatted/markup text

I'm trying to print/preview an Infragistics UltraTree (winform) (version 14.2) which has formatted/markup text
The nodes of the tree use Infragistics.Win.FormattedLinkLabel.UltraFormattedTextEditor
with TreatValueAs = FormattedLinkLabel.TreatValueAs.FormattedText
On the screen the tree looks nice. However when I use Infragistics.Win.Printing.UltraPrintPreviewDialog, the resulting tree displays each node with all of its markups.
<span style='color:Navy; font-size:11pt; font-weight:bold; '> The Node's Text </span>
Is there a way to have the preview display the same way it looks on the screen? That is instead of the above, display "The Node's Text", where this text is printed in 11pt and the text color is navy.
The guys at Infragistics said it is a bug in their control here. However, they provided and work around. Add this event handler in form's constructor:
this.ultraTreePrintDocument1.Tree = this.ultraTree1;
this.ultraTreePrintDocument1.InitializeTree += UltraTreePrintDocument1_InitializeTree;
And then in InitializeTree add this code:
private void UltraTreePrintDocument1_InitializeTree(object sender, InitializeTreeEventArgs e)
{
e.Control.Override.EditorComponent = new UltraFormattedTextEditor();
}
As #wnvko indicated, Infragistics acknowledges the bug which will be corrected in their next service release. This is the statement I received from Infragistics:
Issue "237272: EditorComponent is not taken into account when printing
the tree" has been fixed and verified by our Engineering Team in the
following versions . We are in the final stages of creating the
service release and expect to publish it according to following
schedule:
http://www.infragistics.com/support/service-releases/

google translator toolkit - how to exclude portions of the text from being processed

Does anybody know whether there is a possiblity to exclude portions of a text from being processed by the google translator toolkit?
A great advantage of this tool is that it suggests the translations of sentences which have already been translated in another context. However, if any additional footnote and/or remark has been added to the text, it won't be recognized as a match. I am looking for a possibility to enclose such text in "brackets" within which it will be ignored.
For example, the following two strings should be recognized as identical:
"This is one continuous sentence."
"This is {this text will be ignored}one continuous sentence."
and be translated i.e. into German as:
"Dies ist ein zusammenhängender Satz."
"Dies is {this text will be ignored}ein zusammenhängender Satz."
If neccessary I could number such insertions and place their content into additional paragraphs like:
"This is one continuous sentence."
"This is {1}one continuous sentence."
"{1 this text will be ignored}
thanks a lot in advance,
Marcel
Quoting from the Google Translate FAQ ...
How do I tell Cloud Translation API to NOT translate something?
You can use the following HTML tags:
<span translate="no"> </span>
<span class="notranslate"> </span>
This functionality requires the source text to be submitted in HTML.
If it's "not working for you" a likely reason is that you requested TEXT translation not HTML translation. If you only want TEXT translation then wrapper your plan text in HTML tags (with <span> tags as above) and then unwrap after translation.
Add a span tag with a class of 'skiptranslate' to the bits that you do not want to be translated, like this:
"This is <span class="skiptranslate">this text will be ignored</span> one continuous sentence."
The "skiptranslate" class didn't work for me in the po files I submitted to gtt. Gtt continued to translate everything. I noticed that gtt does not translate anything inside an href attribute, so what I did was to pre-process my .po file (using a "copy" grunt task) by changing {{my_expr}} type strings to <a href='{{my_expr}}/> strings, then changing them back to {{my_expr}} after the gtt translation (using another "copy" grunt task).
I'm not sure how this affects the semantics of the translation, but at least the resulting translation doesn't break my templating code.
Here is my grunt copy task config showing the regular expressions I used:
copy: {
fixupPoFileForTranslation: {
src: [], // Fill in src and dest!
dest: '',
options : {
process: function (content, srcpath) {
return content.replace(/"Go page"/g, '"Go"')
// Change handlebars {{<name>}} to <a ref='<name>'/> to stop
// machine translation from translating them.
return content.replace(/(\{\{[a-zA-Z_\$].*?\}\})/g, '<a href=\'$1\'/>')
// Same thing for our js .format {0}, {1}, ...
.replace(/(\{\d*?\})/g, '<a href=\'$1\'/>');
}
}
},
fixupPoFileForMerge: {
src: [],
dest: '',
options : {
process: function (content, srcpath) {
// Restore <a href=... back to {{<name>}}
return content..replace(/<a href='(\{\{[a-zA-Z_\$].*?\}\})'(\/>|)/gi, '$1')
// Same thing for {0} constructs
.replace(/<a href=' *(\{.\d?\})('\/>|)/gi, '$1');
}
}
}
}

Reveal.js: Add fragments inside code

I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result:

How to publish a few snippets in a single file Sublime Text 3?

How to publish a few snippets in a single file Sublime Text 3?
I am use this code, but do not work. I have error!
<snippets>
<snippet>
<content><![CDATA[
.............................
]]></content>
<tabTrigger>span</tabTrigger>
<scope>text.html</scope>
<description>span</description>
</snippet>
<snippet>
<content><![CDATA[
.............................
]]></content>
<tabTrigger>img</tabTrigger>
<scope>text.html</scope>
<description>img</description>
</snippet>
</snippets>
For multiple snippets, you'll need to either make multiple .sublime-snippet files, or set up a custom completions list. Yours might look something like this:
{
"scope": "text.html - source, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "myspan", "contents": "<span class=\"$1\" id=\"$2\">$0</span>" },
{ "trigger": "myimg", "contents": "<img alt=\"$1\" src=\"$2\" class=\"$3\" id=\"$4\" />$0" },
]
}
Save it in your Packages/User directory as HTML.sublime-completions (you can access Packages by going to Preferences -> Browse Packages...). Now, when you're coding and type span and hit CtrlSpace to bring up autocomplete (if it doesn't appear automatically, you'll see the following:
The top option is Sublime's built-in completion, which just gives <span>|</span> where | is the cursor. I have the Tag package installed, so it adds another option that basically does the same thing as Sublime's. The third option is our new completion. You'll need to arrow down to select your completion, but the good news is that the next time you type span it'll be selected, so you can just hit Tab and go on to fill in the options.
I hope this helps, please let me know if you have any questions.

How to show interactive character limits?

How does Stack Overflow show interactive character limits? Like when editing comments, it shows you how many characters you have left, as well as warning if it is too few.
I'd like that exact functionality in my Ruby on Rails... But not sure how to do it?
Stackoverflow uses the jQuery JavaScript Framework and it has a lot of existing scripts and plugins for this sort of thing.
One example is this Interactive Character Limit for TextArea in jQuery demonstrated here.
I'm sure there are others as well.
I use the following JavaScript function to restrict max length in textareas
function checkLength(edit, maxlen)
{
if (edit.value.length > maxlen)
edit.value = edit.value.substring(0, maxlen);
document.getElementById('remaining').innerHTML = edit.value.length;
}
Link this to your textarea's onKeyDown and onKeyUp attributes:
onKeyDown = "checkLength(this, 100);"
by using the onkeydown event on the input. There are millions of examples out there and frankly I'd be surprised if this isn't a duplicate question.
It is: How to show interactive character limits?
I think you are looking for some javascript, basically you add a handler to the textbox onkeypress event then to get the current length:
mytextbox.value.length
and to limit it you could do something like:
if (mytextbox.value.length > maxlimit)
mytextbox.value = mytextbox.value.substring(0, maxlimit);
You can also use simple javascript event handling to show character counts
for input elements. No server side processing required.
This javascript catches the key-press event for a text area "txt"
and shows the character count in a span "count".
See it running at
http://aaron.oirt.rutgers.edu/myapp/root/charCount.html
<html>
<head>
<script>
function go() {
var txt=document.getElementById("txt");
txt.onkeydown = countTxt;
}
function countTxt() {
var txt=document.getElementById("txt");
var count=document.getElementById("count");
count.innerHTML = txt.value.length+1; // count the character not shown yet ;)
}
</script>
</head>
<body onload="go()">
<h3>type in the text area and see the count change</h3>
<textarea id="txt" rows="8" cols="30"></textarea>
<br>
count: <span id="count"> 0</span>
</body>
The count can be off my +-1 -- fixing that (if you really want to) is left to the reader.

Resources