Sorry, I was away on a business trip and not checking the forum.
1
The problem with your ‘My Template’ is that you used single quote characters when it needed to be backtick characters (on my QWERTY keyboard it’s the key to the left of the 1 key)
So instead of
<%*
tR = '<span class="blue">${tp.file.selection()}</span>';
-%>
it needs to be
<%*
tR = `<span class="blue">${tp.file.selection()}</span>`;
-%>
2
The tR
is a Templater variable. Whatever gets assigned to it is the text that the template outputs. It can be used to build up more complicated outputs.
3
Breaking down the more complicated script:
const colors = ['orange','yellow','pink','blue','green'];
This line defines an array of strings that are the names of colors. The list is just an example. You can add or remove colors as works for you.
let color = await tp.system.suggester(colors,colors,false,'Color');
This line uses Templater’s suggester
function to display a list of options from which the user can select one item. In this case, the the list of options will be the names of the colors which were defined in the previous line. Whichever color is selected will be assigned to the color
variable.
if (color !== null)
When suggester
displays the list of options it is possible for the user to abort without having picked one of the options by hitting the ESC key. If this happens, color
will get a value of null
. The test performed on this line means that the template will only make the change if the user has selected a color.
tR = `<span class="fs12 ${color}">${tp.file.selection()}</span>`;
This line wraps the current selection with an HTML span
. This span will have two classes: ‘fs12’ and whichever color was selected.