Styling links based on URL schema

Bike Outliner
1

Hi!

I’m just starting to explore Bike, and really like it so far! I’ve had a brief look at the docs for theming, and it doesn’t seem as straight forward as I had hoped for. :slight_smile: So before I try to understand how it works, I just wanted to ask wether what I want to do is achievable or not: Could links be styled depending on wether they are internal, opens another application (x-devonthink-item://), or a web page? I would like a visual hint/reminder on where a link will take me.

1 Like
2

Yes, here’s a starting point:

let modifier = defineEditorStyleModifier('link-extended', 'link-extended')

modifier.layer('run-formatting', (row, run, caret, viewport, include) => {
  run(`.@a beginswith "x-devonthink-item://"`, (context, text) => {
    text.color = Color.systemRed().withAlpha(text.color.resolve(context).alpha)
  })
})

Once you get the bike-extension-kit up and building, the above is enough to modify the default stylesheet and highlight the link text of DevonThink items red.

Glad you are liking Bike … and alas the complexity of styles.

3 Likes