Trilium Stole My Heart and My Sanity: A 1,285-Word SOS from a Clueless Noob

[draperbr]

I'm new to Trilium, and am totally blown away (and befuddled) by its capabilities!. I've been investing a lot of time going through the User Guide and Demos trying to get up to speed on many of the features. Admittedly, along the way, I've been stumped by a number of things. I posted a general question in a Trilium Matrix room asking how people go about getting up to speed and was encouraged by @eliandoran to post my questions over here as one big post, as it would be easier for everyone to see and answer. So here goes (in no particular order):

Markdown Import

• I had been really struggling in copying/pasting markdown into Trillium. Going through the User Guide, I realized there's a “Markdown import from clipboard”, and was excited!  I tried it out, and it just seems to do a paste with no formatting like shift-crtl-v - am I missing something here?
• Example:  
  • If I'm on a web page with rendered markdown, and I copy it to the clipboard (and I must use Chrome because Firefox refuses to copy it for some reason, truncating the copy at the first codeblock), then try “Markdown import from clipboard”, it pastes it as unformatted text.  
  • If I paste that exact same clipboard into stackedit.io, it pastes as markdown and renders it correctly.
  • If I paste it into Text Editor, I just see unformatted text, much like I do in Trilium
  • Maybe it's not designed for my use case, as I'm copying HTML rendered markdown vs straight markdown, but it would be amazing if Trilium handled the clipboard contents like stackedit.io.  I use this feature a lot when creating technical documentation.  
    • Until then my workflows has to be Web Page (copy content to clipboard) > StackEdit (paste from clipboard)  > StackEdit (copy raw markdown) > Trilium. (paste raw markdown)
    • It's not a perfect system, so if anyone has tips on how to make it work in Trilium, or even a suggestion for a better workflow, I'm all ears.

Themes / Custom CSS

• Themes
  • I love the themes and ability to do custom CSS, and I've spent a lot of time tinkering with a 3rd party theme to get things how I like them, but it has been very challenging (due in no small part because I suck at CSS), but it there any detailed documentations on the CSS classes used?  Do people just study the existing templates and use the browser inspector and try and figure out how it works?  
• Custom CSS (similar to question above)
  • User Guide > Basic Concepts > Themes
    • I understand that in the example you set cssClass equal to whatever class you want the appCSS file to reference it as (in this example - "todo" and "done")
    • But how in the heck do you know things like span.fancytree-node.todo  and .fancytree-title?
    • I can suss out .fancytree-title by using the Dev Tools pretty easily, but how does one know to also include span.fancytree-node? Do I just need to bone up on Inspector sleuthing?
• Custom Icons
  • I don't follow exactly how to implement custom icons.  If there was a specific example of taking a custom icon (along with icon image specs if they apply), where to put it, how to call it, etc, it would be super helpful.  Or it would be great if there was a Demo note where I could look at an example, perhaps?

Disable previews of child notes?

• Is it possible to prevent the child note previews that are auto embedded at the bottom of parent notes?

Highlights List

• Is in possible to turn off highlight lists by default, but still re-enable it with a keyboard shortcut? I know I can use #hideHighlightWidget, which is great, but unfortunately, that also prevents my keyboard shortcut from turning it back on.

Internal Links in User Guide Not Functional

• Internal links in the User Guide don't seem to function
• External links still work.
• If I hover over the internal link on a browser is shows the link as https://[my server]/[relative path to link], for example: https://[myserver]/Advanced Usage/Attributes.html or https://Basic Concepts/Note/Read-Only Notes.html.
• If I click on any of them, nothing happens.  
• The internal links I have in my own notes work, as do the internal links in the Trilium Demos.  But those links show a more cryptic https://[me server]/#root/[note ID]/[note ID] (etc) format

Mermaid Diagrams

• Is there a way to zoom in on a Mermaid Diagram?  The get small very quickly, as they appear to be “boxed in” to whatever the horizontal width of your window is.
• I saw a comment in the v0.91.4-beta release notes with a screenshot showing a split-view toggle and some other options on a menu, but I don't see that UI anywhere
• I also saw in the v0.92.5-beta release notes that there is now a “better zoom mechanism”, but I can't figure out the original zoom mechanism! (I'm running 0.92.4), I swear I've tried!

Default Note Name

• I love the idea of a default label name, using the name of the parent.  I see the example of ${parentNote.getLabelValue('authorName')}, but how do I just get the name of the parent note?  Is that a specific label, or another function?
• The documentation has a link to the parentNote documentation, which would almost certainly answer the question, but it gives a 404 error.

Attributes / Inheritance

• Inheritance:
  • The guide says “attributes can be automatically inherited by child notes if they have the isInheritable flag set to true”, but it took me forever to figure out that the syntax is #label(isInheritable).  A simple example would have gone a long way for me.
  • The guide Talks about “copying inheritance” using the syntax of “#child:attributeName”.  I still haven't been able to figure how this works.  I see the syntax of bot both “#child:attributeName” and “~child:attributeName”.  I don't know the difference, and I've yet been able to get #child to work.
  • I'm still unclear about Standard vs Copying Inheritance:
    • Copying inheritance survives moving to a different parent, but I THINK you have to specificy every level of the hierarchy.  
      • If I want to cascade down infinitely in a heirarchy, is that impossible to do with copying inheritance?  
      • If I have a hierarchy 5 levels deep, I'd have to setup 5 copies of each attribute I wanted to get inherited  - one for each level? And if a 6th level got implemented, it wouldn't inherit any of it?
      • Or if I setup #chilld:#child:#child attribute does that automatically cover levels 1-3, or just level 3?  
  • Is there a way to prevent inheritance on a single note.  I see references in the User guide to settin #isInheritable=false, but if I try and use that as an attribute, it does nothing.
• Attribute definition
  • I could really use someone walking through the examples/demo.  I see things like “#label:tag=promoted,text,multi”.  I totally get what promoted means, and what text means, and what multi means.  What I don't get is where/how did this tag get setup in the first place.  If I put “#label:tag=promoted,text,multi” in a new note, a multi selection list just pops up!  Where did it come from?  How is it defined?
  • Going through the TODO Demo, I see things like:
    • A note called “Tags” with #taskTagRoot
    • Sub notes that appear to be the values of the “tag” drop-down when “#label:tag=promoted,text,multi”  is implemented in a new note, with attributes of #taskTagNote=shopping and #taskTagNote=health, which seem to be the values in the drop-down.  How, exactly are these setup/defined?
    • And how is this accessible from notes I'm creating outside of the whole Demo hierarchy?  How are these labels/tags accessible to me?
    • Is all this explained somewhere, or am I losing my mind?
• Is there anyway to disable the UI that pops up when entering Arributes?  I find that once I have more than a couple of attributes, it completely masks the helpful autocomplete dropdown.

Hidden Notes

• I realize there are Hidden Notes somewhere, as occasionally I stumble across them, or they come up in searches (but sometimes do not?).  I recall seeing a warning somewhere about the risk of modifying without knowing what you're doing, but is it possible to use the hidden note section to hide notes you don't want cluttering up your note tree (themes and other custom scripts come to mind)?  If so, how do you reliably find the Hidden Notes?

[pano9000]

Internal links in the User Guide don't seem to function

just tested it, and I seem to have the same issue, do you mind creating a separate bug report here?
https://github.com/TriliumNext/Notes/issues

[eliandoran]

Yup, it's a bug since I never gotten around to implementing it.

[eliandoran]

@draperbr ,

Markdown Import

• I had been really struggling in copying/pasting markdown into Trillium. Going through the User Guide, I realized there's a “Markdown import from clipboard”, and was excited!  I tried it out, and it just seems to do a paste with no formatting like shift-crtl-v - am I missing something here?
• Example:  
  • If I'm on a web page with rendered markdown, and I copy it to the clipboard (and I must use Chrome because Firefox refuses to copy it for some reason, truncating the copy at the first codeblock), then try “Markdown import from clipboard”, it pastes it as unformatted text.  
  • If I paste that exact same clipboard into stackedit.io, it pastes as markdown and renders it correctly.
  • If I paste it into Text Editor, I just see unformatted text, much like I do in Trilium
  • Maybe it's not designed for my use case, as I'm copying HTML rendered markdown vs straight markdown, but it would be amazing if Trilium handled the clipboard contents like stackedit.io.  I use this feature a lot when creating technical documentation.  
    • Until then my workflows has to be Web Page (copy content to clipboard) > StackEdit (paste from clipboard)  > StackEdit (copy raw markdown) > Trilium. (paste raw markdown)
    • It's not a perfect system, so if anyone has tips on how to make it work in Trilium, or even a suggestion for a better workflow, I'm all ears.

Let's clarify a bit:

• For plain markdown, the Markdown import from clipboard should work just fine and apply the formatting. If it doesn't then there's something wrong with either the Trilium import mechanism (case in which I would need a sample to verify on my side), or there's a problem with the content.
• For HTML content, simply pasting with Ctrl+V should work just fine.

Themes / Custom CSS

• Themes
  • I love the themes and ability to do custom CSS, and I've spent a lot of time tinkering with a 3rd party theme to get things how I like them, but it has been very challenging (due in no small part because I suck at CSS), but it there any detailed documentations on the CSS classes used?  Do people just study the existing templates and use the browser inspector and try and figure out how it works?  

Theming is a more complicated subject, but if you want to get into it you should look into using Inspect Element. You can select an element and check which classes it has.

I would suggest to get into learning a bit about HTML and CSS using services such as FreeCodeCamp.

There's no documentation of the CSS classes because we use tons of them and it's not a common web development practice.

• Custom CSS (similar to question above)
  • User Guide > Basic Concepts > Themes
    • I understand that in the example you set cssClass equal to whatever class you want the appCSS file to reference it as (in this example - "todo" and "done")
    • But how in the heck do you know things like span.fancytree-node.todo  and .fancytree-title?
    • I can suss out .fancytree-title by using the Dev Tools pretty easily, but how does one know to also include span.fancytree-node? Do I just need to bone up on Inspector sleuthing?

Here it's the principle of trying to make a selector as specific as possible. Conceptually, since you want to color an item in the tree, it makes sense to look at the note tree and see which classes correspond to a single item. Use Inspect Element and try to check the existing classes.

• Custom Icons
  • I don't follow exactly how to implement custom icons.  If there was a specific example of taking a custom icon (along with icon image specs if they apply), where to put it, how to call it, etc, it would be super helpful.  Or it would be great if there was a Demo note where I could look at an example, perhaps?

There is no official support for custom icons. See Allow alternate icon packs for note icons · Issue #354 · TriliumNext/Notes for tracking the issue. It's a big time investment that we are not yet willing to invest in.

Disable previews of child notes?

• Is it possible to prevent the child note previews that are auto embedded at the bottom of parent notes?

Sure is, you have to add #hideChildrenOverview to the list of attributes.

Highlights List

Is in possible to turn off highlight lists by default, but still re-enable it with a keyboard shortcut? I know I can use #hideHighlightWidget, which is great, but unfortunately, that also prevents my keyboard shortcut from turning it back on.

Not aware of this being possible. You can assign a keyboard shortcut to toggle the visibility of the right pane/sidebar, which might achieve the same effect, but not sure if it's good enough for your use.

Internal Links in User Guide Not Functional

• Internal links in the User Guide don't seem to function
• External links still work.
• If I hover over the internal link on a browser is shows the link as https://[my server]/[relative path to link], for example: https://[myserver]/Advanced Usage/Attributes.html or https://Basic Concepts/Note/Read-Only Notes.html.
• If I click on any of them, nothing happens.  
• The internal links I have in my own notes work, as do the internal links in the Trilium Demos.  But those links show a more cryptic https://[me server]/#root/[note ID]/[note ID] (etc) format

Indeed, this is a known issue but I haven't had the time to figure it out yet. The reason it's not working is that the User Guide is a set of “fake” notes, so I have to implement all the features separately from the main application and this includes the links. We'll figure it out eventually.

But you're the first one to report it. :)

Mermaid Diagrams

• Is there a way to zoom in on a Mermaid Diagram?  The get small very quickly, as they appear to be “boxed in” to whatever the horizontal width of your window is.
• I saw a comment in the v0.91.4-beta release notes with a screenshot showing a split-view toggle and some other options on a menu, but I don't see that UI anywhere
• I also saw in the v0.92.5-beta release notes that there is now a “better zoom mechanism”, but I can't figure out the original zoom mechanism! (I'm running 0.92.4), I swear I've tried!

Try the latest stable, should be good enough. You should see a split view and there should be buttons for zooming in. Mouse interaction should work as well. See the Mermaid help for more info.

If something's not working for you, maybe you have an issue with your Trilium setup (such as a script interfering with the application). Let me know.

Default Note Name

• I love the idea of a default label name, using the name of the parent.  I see the example of ${parentNote.getLabelValue('authorName')}, but how do I just get the name of the parent note?  Is that a specific label, or another function?
• The documentation has a link to the parentNote documentation, which would almost certainly answer the question, but it gives a 404 error.

It's #titleTemplate="${parentNote.title}", I'll add some documentation for it too.

Attributes / Inheritance

Inheritance

The guide says “attributes can be automatically inherited by child notes if they have the isInheritable flag set to true”, but it took me forever to figure out that the syntax is #label(isInheritable).  A simple example would have gone a long way for me.

There's a + button to the right of attributes that let you define these kind of attributes, including inheritable.

The guide Talks about “copying inheritance” using the syntax of “#child:attributeName”.  I still haven't been able to figure how this works.  I see the syntax of bot both “#child:attributeName” and “~child:attributeName”.  I don't know the difference, and I've yet been able to get #child to work.

# refers to labels, whereas ~ refers to relations. If you have a note with #child:foo and you create a sub-child, then #foo is applied to that note.

It does not modify existing notes.

• I'm still unclear about Standard vs Copying Inheritance:
  • Copying inheritance survives moving to a different parent, but I THINK you have to specificy every level of the hierarchy.  
    • If I want to cascade down infinitely in a heirarchy, is that impossible to do with copying inheritance?  

Copy inheritance works only manually, so you can't have them cascading infinitely.

• If I have a hierarchy 5 levels deep, I'd have to setup 5 copies of each attribute I wanted to get inherited  - one for each level? And if a 6th level got implemented, it wouldn't inherit any of it?

That would be correct, as far as I understand.

• Or if I setup #chilld:#child:#child attribute does that automatically cover levels 1-3, or just level 3?  

#child:child:child:foo would create:

• #child:child:foo on the first level
• #child:foo on the second level
• #foo on the third level.

So it covers every level, but not in the way you would expect them to. Only the third level notes get foo.

Is there a way to prevent inheritance on a single note.  I see references in the User guide to set in #isInheritable=false, but if I try and use that as an attribute, it does nothing.

There isn't. Inherited attributes force conformity in all child notes. If you feel the need to do that, you should look into templates, as they offer greater flexibility.

Attribute definition

I could really use someone walking through the examples/demo.  I see things like “#label:tag=promoted,text,multi”.  I totally get what promoted means, and what text means, and what multi means.  What I don't get is where/how did this tag get setup in the first place.  If I put “#label:tag=promoted,text,multi” in a new note, a multi selection list just pops up!  Where did it come from?  How is it defined?

You don't need to bother too much about the format, you can use the Plus button to the right of the attributes list → Add new label/relation definition. 

• Going through the TODO Demo, I see things like:
  • A note called “Tags” with #taskTagRoot

You can create any kind of attribute and relations in a note. taskTagRoot doesn't mean anything by itself. It's used in a script to give it meaning.

• Sub notes that appear to be the values of the “tag” drop-down when “#label:tag=promoted,text,multi”  is implemented in a new note, with attributes of #taskTagNote=shopping and #taskTagNote=health, which seem to be the values in the drop-down.  How, exactly are these setup/defined?

The whole tasks hierarchy is managed by a dedicated script. See “Implementation”.

And how is this accessible from notes I'm creating outside of the whole Demo hierarchy?  How are these labels/tags accessible to me?

Not sure to understand, perhaps you could rephrase the question. As mentioned, labels and relations can be used everywhere. But for some cases, it's scripts that gives them meaning. The task implementation is only an example script and nothing else.

Is there anyway to disable the UI that pops up when entering Arributes?  I find that once I have more than a couple of attributes, it completely masks the helpful autocomplete dropdown.

This was a bug and it is solved on the latest stable.

Hidden Notes

I realize there are Hidden Notes somewhere, as occasionally I stumble across them, or they come up in searches (but sometimes do not?).  I recall seeing a warning somewhere about the risk of modifying without knowing what you're doing, but is it possible to use the hidden note section to hide notes you don't want cluttering up your note tree (themes and other custom scripts come to mind)?  If so, how do you reliably find the Hidden Notes?

You can access the hidden notes by pressing the global menu (Trilium icon or hamburger icon, depending on the layout) → Advanced → Show Hidden Subtree.

In this section there is a “User Hidden” note which is reserved for use by scripts. You can find the note in scripts by looking by its note ID (_userHidden).

[draperbr]

Thanks @eliandoran, this was extremely helpful. I'm going to spend some time digesting the info about inheritance, attributes =, and templates and playing around a bit to see what I can learn based on the direction you've given me (although showing me where the '+' was, alone, will get me a long way!). Here are some responses to a few of the sections:

Markdown Import

@eliandoran responded:
Let's clarify a bit:
For plain markdown, the Markdown import from clipboard should work just fine and apply the formatting. If it doesn't then there's something wrong with either the Trilium import mechanism (case in which I would need a sample to verify on my side), or there's a problem with the content.

For HTML content, simply pasting with Ctrl+V should work just fine.

I couldn't recreate today. Not sure what I was doing at the time that was causing the "wall of text" I was seeing. If I see it again, I'll grab examples. And if I don't - fantastic.

Themes / Custom CSS

@eliandoran responded:
Theming is a more complicated subject, but if you want to get into it you should look into using Inspect Element. You can select an element and check which classes it has.

I would suggest to get into learning a bit about HTML and CSS using services such as FreeCodeCamp.
There's no documentation

Ok, thanks. This is exactly how I'd been going about it. I was just hoping there might be some documentation. I'm even more impressed that the Theme creators did it all with Inspector. Hat tip to them.

Highlights List

Is in possible to turn off highlight lists by default, but still re-enable it with a keyboard shortcut? I know I can use #hideHighlightWidget, which is great, but unfortunately, that also prevents my keyboard shortcut from turning it back on.

@eliandoran responded:
Not aware of this being possible. You can assign a keyboard shortcut to toggle the visibility of the right pane/sidebar, which might achieve the same effect, but not sure if it's good enough for your use.

Yeah, I was hoping to be able to hide the highlights by default, but toggle them on, as desired, with a keyboard shortcut. Sounds like this isn't possible. You can:

1. Have the highlights on by default, and toggle them off and on with a keyboard shortcut
2. Suppress them completely with #hideHighlightWidget, but then you can not toggle them back on

I'm was just looking for option 3, haha.

Internal Links in User Guide Not Functional

I created bug 1643

Mermaid Diagrams

Is there a way to zoom in on a Mermaid Diagram?

@eliandoran responded:
Try the latest stable, should be good enough. You should see a split view and there should be buttons for zooming in. Mouse interaction should work as well. See the Mermaid help for more info.

If something's not working for you, maybe you have an issue with your Trilium setup (such as a script interfering with the application). Let me know.

I'm running v0.92.4, but I don't see anyway to zoom. I'm not running any custom scripts. The only script I have enabled is the wordcount script from the demo, which is not enabled in my mermaid note. I do have #fullContentWidth #hideHighlightWidget attributes set, but I tried disabling those and still can't figure out how to zoom. I've tried it in both Firefox and Chrome. Am I just missing something??

[eliandoran]

I'm running v0.92.4, but I don't see anyway to zoom. I'm not running any custom scripts. The only script I have enabled is the wordcount script from the demo, which is not enabled in my mermaid note. I do have #fullContentWidth #hideHighlightWidget attributes set, but I tried disabling those and still can't figure out how to zoom. I've tried it in both Firefox and Chrome. Am I just missing something??

In 0.92.4 there are no visual buttons for zooming, but you should still be able to use the mouse wheel to zoom and drag and pan to move around.

As mentioned previously, 0.92.6 (stable) brings quite a few improvements to the Mermaid experience, so I would update to that version and give it try.

[eliandoran]

Yeah, I was hoping to be able to hide the highlights by default, but toggle them on, as desired, with a keyboard shortcut. Sounds like this isn't possible. You can:

At some point we are going to redesign the sidebar since the way it works right now is kind of clunky. I would prefer a similar toggle to the left sidebar (note tree), the only problem is that there are cases where the sidebar would be empty which would be kind of confusing.

[maphew]

Markdown import - consider using the Import files function from the 3-dot menu at upper right instead of copy-paste, especially if you're doing this a lot.

• Put all of the .md files into a folder (or many folders)
• zip up the folder
• Choose that zip file when importing

Reference (some gif animations, but not that detailed): https://triliumnext.github.io/Docs/Wiki/markdown.html