My Zotero annotation template that works

Hi everyone !

Thanks to this thread and to elena razlogova’s notetaking process I’ve writed my own script for when I read research article and to import my annotations into Obsidian. I also wanted to make it look good.

It put each highlights/notes/image into a callout of its own which color correspond to the annotation’s color in Zotero with underneath your comment if there is one. Then you can link it to your main writing notes.

Hope that it can help someone !

Template :

---
{% if title %}Title: "{{title}}"{% endif %}
Authors: {{authors}}{{directors}}
{% if publicationTitle %}Publication: "{{publicationTitle}}"{% endif %}
{% if date %}Date: {{date | format("YYYY-MM-DD")}}{% endif %}
citekey: {{citekey}}
tags: {{hashTags}}
---
## {{title}}
**Bibliographie :** {{bibliography}}

**Lien de la publication :** {{url}}

**Lien Zotero :** {{pdfZoteroLink}}

**Tags :** {{hashTags}} 

>[!abstract]+
>*« {{abstractNote}} »*

{% for annotation in annotations -%}
>[!Annotation|{{annotation.color}}]+ 
>{%- if annotation.annotatedText -%}*« {{annotation.annotatedText}} »*([{{annotation.page}}](zotero://open-pdf/library/items/{{annotation.attachment.itemKey}}?page={{annotation.page}}&annotation={{annotation.id}})){% endif %}{% if annotation.imageRelativePath %}![[{{annotation.imageRelativePath}}]]{% endif %}{% if annotation.comment %} 
>
>{{annotation.comment}}{%- endif %}

{% endfor %}

CSS snippet :

/* Red */
.callout[data-callout-metadata="#ff6666"] {
    --callout-color: 205, 52, 92;
}

/* Green */
.callout[data-callout-metadata="#5fb236"] {
    --callout-color: 114, 162, 100;
}

/* Blue */
.callout[data-callout-metadata="#2ea8e5"] {
    --callout-color: 52, 82, 255;
}

/* Purple */
.callout[data-callout-metadata="#a28ae5"] {
    --callout-color: 157, 131, 242;
}

/* Orange */
.callout[data-callout-metadata="#f19837"] {
    --callout-color: 244, 164, 96;
}

/* Yellow */
.callout[data-callout-metadata="#ffd400"] {
    --callout-color: 255, 236, 0;
}

/* Magenta */
.callout[data-callout-metadata="#e56eee"] {
    --callout-color: 255, 33, 255;
}

/* Gray */
.callout[data-callout-metadata="#aaaaaa"] {
    --callout-color: 152, 152, 152;
}

.callout-icon {
    display: none;
}

Example of how it looks :

6 Likes