[Question] Styling of annotaions with different color

[Sleepwalker6]

Is it possible to add specific texts before or after annotations with different colors.
for example add "Important" before red annotaions or "Read more" before yellow annotaions.

[windingwind]

Yes. You can paste your template here and I'll help you.

[Sleepwalker6]

Thanks. Actually I am trying to learn to create one and right now I don't have a template.
I just want to use the quick import template and add simple styling to annotations with red and yellow colors

[zyx335588]

@Sleepwalker6
The official note template may be helpful.
See: https://www.zotero.org/support/note_templates

You can try to click the menu 'Edit -> Preferences-> Advanced -> Config Editor -> I accept the risk!'
and then search extensions.zotero.annotations.noteTemplates.highlight, change the value to the following or other similar template

{{if color == '#ff6666'}}
	<blockquote>
		<p style="color: red;"><strong>❗ imortant:</strong></p>
		<p style="background-color: #ff6666;">{{highlight}}<p>
		{{if comment}}{{comment}}{{endif}}
	</blockquote>
{{elseif color == '#ffd400'}}
	<blockquote>
		<p style="color: red; background-color: #ffd400"><strong>⚠ Read more:</strong></p>
		<p style="background-color: #ffd400;">{{highlight}}<p>
		{{if comment}}{{comment}}{{endif}}
	</blockquote>
{{else}}
	<blockquote>
		{{highlight}}
		{{if comment}}{{comment}}{{endif}}
	</blockquote>
{{endif}}

In Zotero pdf reader, adding the annotations to a note will use the above style.

[Sleepwalker6]

Thanks alot.

[windingwind]

Thanks, @zyx335588 . This is a solution using the Zotero 'Add to Note' function.

[Sleepwalker6]

Is there a way to do styling without modefying the config editor?@windingwind

[windingwind]

@Sleepwalker6
The addon template supports several different ways to collect the annotations with your custom settings:

1. [Item] template. You can select items and import anything about these items, including annotations, with a template.
2. [QuickNote] template. This template is called when you quick note from an annotation.
3. [QuickImport] template. This template is called when you extract the linked note in the main note/export note.

You can choose one that fits your workflow.

[Sleepwalker6]

Thanks, That is a great help.
But actually what I wanted to see is adding specific text(or markdown characters) to annotaions with specific colors. For example adding #important before annotations with the red color or "To Research:" before annotaions with blue color.

Forgive my lack of coding knowledge, but it would be great to be able to make more use of the zotero reader's main colors (Yellow, Green, Red, Blue, Purple).

[Sleepwalker6]

By the way, What @zyx335588 suggested would do the job. But it would be great to have it in the addon instead of editing zotero's main preference config.

[windingwind]

@Sleepwalker6
See #51.
For your example, the template should be:

${await new Promise(async (r) => {
  async function getAnnotation(item) {
    try {
      if (!item || !item.isAnnotation()) {
        return null;
      }
      let json = await Zotero.Annotations.toJSON(item);
      json.id = item.key;
      delete json.key;
      for (let key in json) {
        json[key] = json[key] || "";
      }
      json.tags = json.tags || [];
      return json;
    } catch (e) {
      Zotero.logError(e);
      return null;
    }
  }

  async function getAnnotationsByColor(_item, color) {
    const annots = _item
      .getAnnotations()
      .filter((_annot) => _annot.annotationColor === color);
    let annotations = [];
    for (let annot of annots) {
      const annotJson = await getAnnotation(annot);
      annotJson.attachmentItemID = _item.id;
      annotations.push(annotJson);
    }

    const editor =
      await Zotero.Knowledge4Zotero.knowledge.getWorkspaceEditorInstance();
    await editor.importImages(annotations);
    return Zotero.EditorInstanceUtilities.serializeAnnotations(annotations);
  }

  const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
    i.isPDFAttachment()
  );
  let res = "";
  let colorYellow = "#ffd400";
  let colorRed = "#ff6666";
  let colorGreen = "#5fb236";
  let colorBlue = "#2ea8e5";
  let colorPerple = "#a28ae5";
  for (let attachment of attachments) {
    res += `<h2><p style="background-color:${colorYellow};">Yellow Heading</p></h2>
    ${(await getAnnotationsByColor(attachment, colorYellow)).html}
    `;
    res += `<h2><p style="background-color:${colorRed };">Red Heading</p></h2>
    ${(await getAnnotationsByColor(attachment, colorRed )).html}
    `;
    res += `<h2><p style="background-color:${colorGreen };">Green Heading</p></h2>
    ${(await getAnnotationsByColor(attachment, colorGreen )).html}
    `;
    res += `<h2><p style="background-color:${colorBlue };">Blue Heading</p></h2>
    ${(await getAnnotationsByColor(attachment, colorBlue )).html}
    `;
    res += `<h2><p style="background-color:${colorPerple };">Perple Heading</p></h2>
    ${(await getAnnotationsByColor(attachment, colorPerple )).html}
    `;
  }
  r(res);
})}

You can modify the heading text.

[Sleepwalker6]

Thanks a lot. That was a great help. Just one question:
I have pdfs that are highlighted with adobe acrobat and when I use "add notes from annotation" in zotero, the extraxted annotation doesn't have default Red, Blue, Green,Yellow or Purple. Is there any way to add those colors to the template and extract those annotations by color as you did above with the five main colors.

[windingwind]

You can add a filter for your custom color.

Part of the template above. Just an example:

let colorXXX = "#XXXXXX";
  for (let attachment of attachments) {
    res += `<h2><p style="background-color:${colorXXX};">XXX Heading</p></h2>
    ${(await getAnnotationsByColor(attachment, colorXXX)).html}
    `;
}

[Sleepwalker6]

Thanks a lot for the help. One question:
The above code gather all same colors for example yellow colors together under the "Yellow Highlight" heading. Is there a way I can add styling without collecting same colors together and have the highlights by the order they are made in the pdf.
Thanks again.

[windingwind]

Zotero provides an 'add annotations to a new note' function. It can collect all annotations to a new note.
Does it satisfy your need?

[Sleepwalker6]

What I meant was something like this:

• The code you kindly provided above creates A (gathering all similar colors together)
• How can I have annotations with the order they appear in the pdf ( B).
  Thanks a lot and sorry for my lack of coding knowledge.

[windingwind]

try this:

${await new Promise(async (r) => {
  async function getAnnotation(item) {
    try {
      if (!item || !item.isAnnotation()) {
        return null;
      }
      let json = await Zotero.Annotations.toJSON(item);
      json.id = item.key;
      delete json.key;
      for (let key in json) {
        json[key] = json[key] || "";
      }
      json.tags = json.tags || [];
      return json;
    } catch (e) {
      Zotero.logError(e);
      return null;
    }
  }

  async function getAnnotationsByColor(_item, color) {
    let annots = _item
      .getAnnotations()
    annots = color ? 
      annots.filter((_annot) => _annot.annotationColor === color) :
      annots;
    let annotations = [];
    for (let annot of annots) {
      const annotJson = await getAnnotation(annot);
      annotJson.attachmentItemID = _item.id;
      annotations.push(annotJson);
    }

    const editor =
      await Zotero.Knowledge4Zotero.knowledge.getWorkspaceEditorInstance();
    await editor.importImages(annotations);
    return Zotero.EditorInstanceUtilities.serializeAnnotations(annotations);
  }

  const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
    i.isPDFAttachment()
  );
  let res = "";
  for (let attachment of attachments) {
    res += `<h2>${attachment.getFilename()}</h2>
${(await getAnnotationsByColor(attachment)).html}`;
  }
  r(res);
})}

This is a multi-item version of Zotero's add annotation to note.

[windingwind]

Will close this issue. Please feel free to open it anytime

[pinetreemoonlight]

Hi, thank you for the template, it works for me in Zotero 7 beta and the latest version of Better Notes. One question: could you help me modify the template to

1. remove the author name, year and page number in brackets after each annotation
2. make each annotation show as a bullet point?
   Thank you!

[Tabshhh]

try this:

${await new Promise(async (r) => {
  async function getAnnotation(item) {
    try {
      if (!item || !item.isAnnotation()) {
        return null;
      }
      let json = await Zotero.Annotations.toJSON(item);
      json.id = item.key;
      delete json.key;
      for (let key in json) {
        json[key] = json[key] || "";
      }
      json.tags = json.tags || [];
      return json;
    } catch (e) {
      Zotero.logError(e);
      return null;
    }
  }

  async function getAnnotationsByColor(_item, color) {
    let annots = _item
      .getAnnotations()
    annots = color ? 
      annots.filter((_annot) => _annot.annotationColor === color) :
      annots;
    let annotations = [];
    for (let annot of annots) {
      const annotJson = await getAnnotation(annot);
      annotJson.attachmentItemID = _item.id;
      annotations.push(annotJson);
    }

    const editor =
      await Zotero.Knowledge4Zotero.knowledge.getWorkspaceEditorInstance();
    await editor.importImages(annotations);
    return Zotero.EditorInstanceUtilities.serializeAnnotations(annotations);
  }

  const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
    i.isPDFAttachment()
  );
  let res = "";
  for (let attachment of attachments) {
    res += `<h2>${attachment.getFilename()}</h2>
${(await getAnnotationsByColor(attachment)).html}`;
  }
  r(res);
})}

This is a multi-item version of Zotero's add annotation to note.

（已经搜索过现有方案）您好！由于该模板（B形式）已经不适用zotero7，我尝试修改了但是因为没有该代码基础所以没能修改出来，能否麻烦您将版本升级到zotero7的版本，再次感谢您！