My Zotero annotation template that works

[Albialy]

Hi

As I’ve been struggling for few days to make it right, I’d like to share my implementation of Zotero annotations template that I built and I believe looks very nice.

Features:

• Simple layout
• Focuses on the content
• Large headers based on annotation color (Default is red annotation = h5)
• Includes highlights, boxes, comments

Requirements:

• Obsidian (obviously)
• Zotero with Better Bibtex installed
• “Zotero Integration” plugin for Obsidian

Steps:

• Copy my template into a new document of yours
• Direct the integration plugin into that template
• Activate the CSS snippet that I’m attaching
• Pull the annotation from Zotero using the integration plugin

Template:

---
year: {{date | format ("YYYY")}}
tags: research
authors: {{authors}}

Abstract:  {{abstractNote}}
---

### {{title}}
{{pdfZoteroLink}}

### Notes
{% for annotation in annotations -%}{%- if annotation.annotatedText -%}{% if 'Red' in annotation.colorCategory %} 
##### {{annotation.annotatedText | escape }}{% else %}
<mark class="customZot-{% if annotation.color %}{{annotation.colorCategory}} {% endif %}">{{annotation.annotatedText | escape }}</mark> ([{{annotation.page}}](zotero://open-pdf/library/items/{{annotation.attachment.itemKey}}?page={{annotation.page}}&annotation={{annotation.id}}))

{% endif %}{%- endif %} {% if annotation.imageRelativePath %} ![[{{annotation.imageRelativePath}}]]{% endif %}{% if annotation.comment %} 
>{{annotation.comment}}
{% endif %}{% endfor -%}

CSS Snippet (ZoteroHighlights.css)

.customZot-Yellow {
    background-color: rgba(255, 204, 0, 0.212) !important;
}

.customZot-Green {
    background-color: rgba(0, 255, 47, 0.215) !important;
}

.customZot-Blue {
    background-color: rgba(0, 0, 255, 0.187) !important;
}

.customZot-Purple {
    background-color: purple !important;
}

Below are some screenshots (I’m using “Things” theme)

[readherring]

Just wanted to say thank you so much for posting this. I have finally been able to get my Zotero notes imported into Obsidian after spending hours fiddling around with it.

This is such a big help!

[medium_old]

Thanks so much for this template - took some time for me to find my way through it but I did it

here’s my rendition - with the help of you and others (Source1), used with BibTex and Zotero integration. I’m not the best with this templating stuff, so many apologies if its messy!

---
status:
year: {{date | format ("YYYY")}}
authors: {{authors}}
type: {{itemType}}
last-reviewed:
---
## {{title}} 
> [!info] 
> - **Abstract:** {{abstractNote}} 
> - **Sources**: [online]({{uri}}) [local]({{desktopURI}}) {%- for attachment in attachments | filterby("path", "endswith",".pdf") %} [pdf](file:///{{attachment.path | replace(" ","%20")}}) {% if loop.last %}{% endif %}{%- endfor %}
> - **Bibliography**: {{bibliography}}
> - **Cite Key:** [[@{{citekey}}]] 
 {%- if hashTags %}
> - **Tags:** {{hashTags}} 
{%- endif %}

>[!Personal Summary] 

## Annotations 
{% for annotation in annotations -%}{%- if annotation.annotatedText -%}{% if 'Purple' in annotation.colorCategory %} 
##### {{annotation.annotatedText | escape }}{% else %} 
<mark class="customZot-{% if annotation.color %}{{annotation.colorCategory}} {% endif %}">{{annotation.annotatedText | escape }}</mark> ([{{annotation.page}}](zotero://open-pdf/library/items/{{annotation.attachment.itemKey}}?page={{annotation.page}}&annotation={{annotation.id}}))
{% endif %}{%- endif %} {% if annotation.imageRelativePath %} ![[{{annotation.imageRelativePath}}]] {% endif %}{% if annotation.comment %}
>*{{annotation.comment}}* 
{% endif %}{% endfor -%}

[Albialy]

That’s very good to hear! Happy that I was able to help

[nocona]

Hi there,

thanks for the inspiration in this channel. I would like to share my flavour → GitHub - nocona71/obsidian-literature-note: MD template and CSS to generate a literature not based on Zotero PDF annotations and notes

It’s an early version. Feedback welcome.

Enjoy

[nocona]

… and expanded:

[ize]

Hi nocona!

First, very nice template! I have a question tho…
I’m fiddling a little with your callout headers. I’d like them to have the same name on each calloutHeader as the header they sort under. Now they are hard coded into:

{%- set calloutHeaders = {
“highlight”: “Relevant / Important”,
“strike”: “Disagree”,
“underline”: “Todo / Read later”,
“image”: "Image
}
-%}

I’ve tried a lot but my nunjuck-fu is too poor. Could you please help me to point out where to edit? In the setting above or in the object call further down?

[Muk]

This is the best thing I have found for my Obsidian and finally got my Zotero workflow working. However, could you possibly help me change a few things in it? I have no understanding of coding.

[nocona]

Hi ize, I just saw your post. I am not sure I understand your request. Could you please elaborate a little more what you would like to achieve?
Thanks

[nocona]

Hi Muk,

thanks and I appreciate you like my script. Feedback and inspiration is always welcome. Please consider using the issues section in the corresponding git-repo.

Thanks for your support

[Odulhin]

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 :

[nocona]

To whom it might concern:

I just released v1.0.6 of obsidian-literature-note.

Enjoy

[nocona]

Hi @Muk, I answered on github…

[92BIOHAZARD]

Thank you for share your template. Obsidian are a powerful tool, but could be frustrating for people like me that doesnt undestand so much about coding

[georgie]

Hello, these posts have been so helpful, thank you! I have one problem – I can’t get the {{bibliography}} to produce anything in my import. Obsidian says “style getCiteProc is not a function” – does anyone know where I’m going wrong, or could point me to any information on how to set this aspect up?

[tidebo]

Hey georgie, had the same problem. Your citation/bibliography style must be the same as your Quick Copy item format in Zotero (Preferences > Export > Item Format).

If not present, you can add new styles under Preference > Cite > click ‘Get additional styles’.

Are you by any chance using IEEE with URL in Obsidian? If so, the regular IEEE format in Zotero won’t work; you’ll need to actually add ‘IEEE (with URL)’ as a style.

Hope this solves your problem!

[georgie]

Thanks for your help, tidebo, I checked and I do have the same style in the quick copy item format in Zotero and in obsidian, and after double checking and trying the import again I still get the same error message. I’m not using IEEE with url as far as I know - what is it?

Is there anything else I could have not set up properly?

[Obsidian-newby]

Really like this setup - however - if I copy your exact template - all my annotation callout boxes have the same background color. Do you know how I can fix this?

[Disappointed]

Man you did such a great job! Your Idea with Colored Callouts is outstanding.
Thanks a lot!

[stone18]

Thanks for posting! I have a problem and am interested in help on figuring out. When I read articles my red highlight means never read this again. Saves me from reviewing impertenant portions of articles in the future. But I don’t want these brought over to my Obsidian vault.

Is there any way to import annotations without importing the red color highlights?

Thanks!