I’m working on adding highlighting to code-blocks on lemmy using highlight.js, and am wondering exactly how to implement it. There are many code-themes that could be used Regarding which theme to use there are basically two different directions I could go:

  1. Each lemmy-theme would have to explicitly declare an hljs theme to use.
    • PROS:
      • easy to use, users automatically get an appropriate code-theme for every ui-theme.
      • simple to implement (already done)
    • CONS:
      • theme-makers need to pick an appropriate theme
      • no user customizability, limited number of themes
  2. Users can pick their preferred theme just like they pick a UI theme.
    • PROS:
      • Extreme customization, there are a buttload of themes, and users can pick any one!
    • CONS:
      • Users would need to pick an appropriate theme. It would use the “browser-default” (light/dark) until they pick one, and could look weird and be confusing until then
      • PITA to implement & requires back-end changes (wont see it for a while)

Let me know what you think, or if you have another solution.
I have solution #1 deployed on HeapOverflow.ml right now =]

Here is the PR for those interested: https://github.com/LemmyNet/lemmy-ui/pull/663

I think a mix is best. I would start with 1. Declare a preferred highlighting theme for each Lemmy theme. Then users get a reasonable option by default. Later we can consider adding a user preference for overriding that option.

@Thann@lemmy.ml
creator
link
fedilink
12M

that’s what I was originally thinking, but the solutions arn’t really compatible with each-other. themers would import themes, but when we add the setting, you’d end up with two themes loaded, and there could be issues until themers remove the import =/

It would be less headache for everyone to decide on a comprehensive solution from the beginning =/

I’m not familiar with how the code works but wouldn’t this be something as simple as

let codetheme = user_prefs.code_theme
  .or(user_prefs.ui_theme.recommended_code_theme)
  .unwrap_or(DEFAULT_CODE_THEME)
@Thann@lemmy.ml
creator
link
fedilink
12M

It could be, but if I put the mapping of UI-theme to code theme in JS then custom themes would require custom code on the frontend. My simple implementation for #1 only involves adding an ‘@import myhljstheme.css’ statement to the themes css. This makes themeing easier, but css is blissfully unaware of what happens in JavaScript land.

Ah, I see. Yeah, if you just compile it into the theme it is slightly simpler. But yeah, I think ideally the frontend could pull UI Theme + Code Theme separately to allow flexibility.

@Thann@lemmy.ml
creator
link
fedilink
62M

I like #1

@Thann@lemmy.ml
creator
link
fedilink
22M

I like #2

Everything about Lemmy; bugs, gripes, praises, and advocacy.

For discussion about the lemmy.ml instance, go to !meta@lemmy.ml.

  • 0 users online
  • 2 users / day
  • 28 users / week
  • 44 users / month
  • 189 users / 6 months
  • 2 subscribers
  • 318 Posts
  • 2.22K Comments
  • Modlog