Note Templates Engine: replace with a more common template engine?

josephholsten · December 15, 2022

I was looking for how to update the obsidian integration docs in an Obsidian forum thread to match with my use of Zotero 6 and Preview PDF Annotations.

At some point, I wanted to get the highlights template defined as something like this pseudocode:

{{if color == 'green' || color == '#5fb236' || color == '#7cc868' }}  
    {{if comment}}  
        <p>{{highlight quotes='true'}} {{citation}}</p>
        <p> - [ ] {{comment}} #task</p>
    {{else}}  
        <p>[[Followup]]:{{highlight quotes='true'}} {{citation}}</p>
    {{endif}}  
{{else}}  
    {{if color == 'red' || color == '#ff6666' || color == '#fb5c89'}}  
        <p>[[Disagreement]]: {{highlight quotes='true'}} {{citation}}</p>
    {{elseif color == 'blue' || color == '#2ea8e5' || color == '#69b0f1'}}  
        <p>[[Confusion]]: {{highlight quotes='true'}} {{citation}}</p>
    {{elseif color == 'purple' || color == '#a28ae5' || color == '#c885da'}}  
        <p>[[Important]]: {{highlight quotes='true'}} {{citation}}</p>
    {{else}}  
        <p>{{highlight quotes='true'}} {{citation}}</p>
    {{endif}}  
    {{if comment}}  
        <blockquote> <p>{{comment}}</p></blockquote>
    {{endif}}  
{{endif}}  
{{if tags}}  
    <blockquote><p><b>Tags:</b> #{{tags join=' #'}}</p></blockquote>
{{endif}}

But of course, this doesn’t work. Looking into Note Templates doc and generateHTMLFromTemplate I was surprised to see custom parsing code, and no way for boolean logic.

I wouldn’t really want to have a feature request added to that engine, mostly because I’d feel obliged to implement the patch, then maintain it until the end of time ;-)

Instead, I wonder if you’d consider switching to a more popular templating engine. I <3 mustache, but it wouldn’t support string match and regression in features is no fun. And since we want ‘safe’ templating languages, I’d really only consider handlebars.js, nunchucks or liquid. I think Zotero users would probably prefer Liquid most, so here’s what the above would look like:

{% if color == "green" || color == "#5fb236" || color == "#7cc868" %}  
    {% if comment %}  
        <p&gt;{{highlight | prepend: '"' | append: '"'}} {{citation}}</p&gt;
        <p> - [ ] {{comment}} #task</p>
    {% else %}  
        <p>[[Followup]]: {{highlight | prepend: '"' | append: '"'}} {{citation}}</p>
    {% endif %}  
{% else %}  
    {% if color == "red" || color == "#ff6666" || color == "#fb5c89" %}  
        <p>[[Disagreement]]: {{highlight | prepend: '"' | append: '"'}} {{citation}}</p>
    {% elsif color == "blue" || color == "#2ea8e5" || color == "#69b0f1" %}  
        <p>[[Confusion]]: {{highlight | prepend: '"' | append: '"'}} {{citation}}</p>
    {% elsif color == "purple" || color == "#a28ae5" || color == "#c885da" %}  
        <p>[[Important]]: {{highlight | prepend: '"' | append: '"'}} {{citation}}</p>
    {% else %}  
        <p>{{highlight | prepend: '"' | append: '"'}} {{citation}}</p>
    {% endif %}  
    {% if comment %}  
        <blockquote> <p>{{comment}}</p></blockquote>
    {% endif %}  
{% endif %}  
{% if tags %}  
    <blockquote><p><b>Tags:</b> #{{tags | join: " #"}}</p></blockquote>
{% endif %}

The least of all benefits is having the ability to test things in a playground, so here’s the above in the liquid playground. Obviously if we implemented a quote filter it would be even smaller.

Another benefit is to set the standard for other examples which may want templating later but haven’t gotten there yet, for example mdnotes

What do you think?