3 ms·

Introducing MicroLighter

53 points by tobr 2mo ago

xigoi 2mo ago
Really cool! It’s a shame that the CSS Highlight API only allows changing the color and not the font.
- SoftTalker 2mo ago
  For me, a little highlighting goes a long way. I don't like my code looking like a box of Crayola crayons. Throwing in multiple fonts doesn't sound helpful at all.
  - goodmythical 2mo ago
    #section in italics because it contains a bug I've not yet fixed
  - xigoi 1mo ago
    I personally like having keywords and built-in identifiers in italic.
- crummy 2mo ago
  Or even setting bold would be nice.
  - capitainenemo 2mo ago
    yeah, although text-stroke and text-shadow probably work even better with fixed width code since it avoids changing line lengths.
  - kevin_thibedeau 1mo ago
    Bizarre that a style sheet mechanism can't do do something that is it's primary function.
    - xigoi 1mo ago
      I’m guessing that due to the way highlights can cross element boundaries, it would be difficult to support any styles that could change the layout.
      - capitainenemo 1mo ago
        That seems like it could also mess with mouse selections if the text moved when selected. maybe even causing endless jitter. I kinda wonder if "page scrolled 'cause X was selected" type data extraction attacks might play a slight role too. Although I suppose if you've managed to inject CSS all bets are off..
- tabwidth 1mo ago
  Replaced Shiki on a docs site, grammar pack was bigger than the rest of the JS. 2KB for color-only feels like a fair trade.
piratebroadcast 2mo ago
I'm not trying to be rude or unappreciative, but it's kinda crazy to me that the website itself doesn't contain the demo of the thing? I see sample code to implement it on my own site, but the site itself doesn't seem to have any highlighting or I highlighted some text and didn't see anything unusual? Maybe it's just me, maybe I'm missing something here? I'd like to see an example of what a thing does before straight up installing the code on my website.
- what 2mo ago
  The code snippets are highlighted, presumably using microlighter?
  - pcthrowaway 2mo ago
    That's what I assumed, but when I pasted this JS snippet from the blog post into the playground (ctrl+f "playground", selects JS) on the project page (https://davatron5000.github.io/microlighter/ https://davatron5000.github.io/microlighter/) if(document.querySelector('pre>code').length) { import('path/to/microlighter/microlighter.min.js'); } The highlighting looks completely different. I assumed the top-level commenter was being mildly obtuse, but it looks like they were (perhaps incidentally) correct
- tomtheelder 2mo ago
  The site linked to is a blog post about the app. The actual site is linked in there, and if you follow that link there are examples. OP probably should have put an example in this post. That said they look like... syntax highlighted code.
deleted 2mo ago
[deleted]
relativeadv 1mo ago
good to see dave still out there doing his thing

53 points by tobr 2mo ago

xigoi 2mo ago

Really cool! It’s a shame that the CSS Highlight API only allows changing the color and not the font.

SoftTalker 2mo ago
For me, a little highlighting goes a long way. I don't like my code looking like a box of Crayola crayons. Throwing in multiple fonts doesn't sound helpful at all.
- goodmythical 2mo ago
  #section in italics because it contains a bug I've not yet fixed
- xigoi 1mo ago
  I personally like having keywords and built-in identifiers in italic.
crummy 2mo ago
Or even setting bold would be nice.
- capitainenemo 2mo ago
  yeah, although text-stroke and text-shadow probably work even better with fixed width code since it avoids changing line lengths.
- kevin_thibedeau 1mo ago
  Bizarre that a style sheet mechanism can't do do something that is it's primary function.
  - xigoi 1mo ago
    I’m guessing that due to the way highlights can cross element boundaries, it would be difficult to support any styles that could change the layout.
    - capitainenemo 1mo ago
      That seems like it could also mess with mouse selections if the text moved when selected. maybe even causing endless jitter. I kinda wonder if "page scrolled 'cause X was selected" type data extraction attacks might play a slight role too. Although I suppose if you've managed to inject CSS all bets are off..
tabwidth 1mo ago
Replaced Shiki on a docs site, grammar pack was bigger than the rest of the JS. 2KB for color-only feels like a fair trade.

piratebroadcast 2mo ago

I'm not trying to be rude or unappreciative, but it's kinda crazy to me that the website itself doesn't contain the demo of the thing? I see sample code to implement it on my own site, but the site itself doesn't seem to have any highlighting or I highlighted some text and didn't see anything unusual? Maybe it's just me, maybe I'm missing something here? I'd like to see an example of what a thing does before straight up installing the code on my website.

what 2mo ago
The code snippets are highlighted, presumably using microlighter?
- pcthrowaway 2mo ago
  That's what I assumed, but when I pasted this JS snippet from the blog post into the playground (ctrl+f "playground", selects JS) on the project page (https://davatron5000.github.io/microlighter/ https://davatron5000.github.io/microlighter/) if(document.querySelector('pre>code').length) { import('path/to/microlighter/microlighter.min.js'); } The highlighting looks completely different. I assumed the top-level commenter was being mildly obtuse, but it looks like they were (perhaps incidentally) correct
tomtheelder 2mo ago
The site linked to is a blog post about the app. The actual site is linked in there, and if you follow that link there are examples. OP probably should have put an example in this post. That said they look like... syntax highlighted code.

deleted 2mo ago

[deleted]

relativeadv 1mo ago

good to see dave still out there doing his thing