4 ms·
Font with Built-In Syntax Highlighting (2024)
- vbezhenar 10mo agoSo script inside web page is bad, but script inside font is good? That's interesting definition of bloat. I'd prefer ordinary webpage using locally installed fonts with explicit JavaScript snippet to highlight keywords.
- benrutter 10mo agoUnless I missed it, the OP doesn't quote reducing bloat as a motivation- more just working without javascript. I took it to be along the lines of an "easier to work with" type motivation, rather than reducing package sizes.
- WesolyKubeczek 10mo agoRemember llama.otf?
- zappchance 10mo agollama.ttf https://fuglede.github.io/llama.ttf https://fuglede.github.io/llama.ttf
- blauditore 10mo agoIs it really a script though? IIUC it's more like contextual declaration (e.g. of previous char is X, then use style Y), no?
- deleted 10mo ago[deleted]
- Gracana 10mo agoPerhaps you could add this technology to Z80 sans, to get syntax highlighted Z80 disassembly. https://github.com/nevesnunes/z80-sans https://github.com/nevesnunes/z80-sans
- koct9i 10mo agoAnd add Z80 emulator as well. Just in case.
- ErroneousBosh 10mo agoWell someone else mentioned llama.ttf which is a font that embeds an llm, using Harfbuzz's WASM engine. So, you could absolutely write a WASM Z80 emulator and embed it in a font. Whether or not you could make it do anything useful, or how strong your grip on reality would remain after? I don't know. But it wasn't like you were doing anything else on the days between Christmas and New Year, right?
- zX41ZdbW 10mo ago> it breaks when your code goes to a newline. there's no way to keep context line to line... This is a blocker for my applications.
- cyanmagenta 10mo agoI view stuff like this kind of like code that fits into a bootloader or whatever. It’s really more of the technical challenge than to actually solve a problem. The result is much better if you just run a script on your hand-coded file to add syntax highlighting as DOM elements. Still, love seeing stuff like this.
- michaelsshaw 10mo agoFor blogs, I like the site to stay static. This is a neat way to keep it that way. Having your generator do it is better in my opinion though.
- balou23 10mo agoIn a similar vein: font with integrated story-telling LLM [1] [1] https://fuglede.github.io/llama.ttf/ https://fuglede.github.io/llama.ttf/
- spockz 10mo agoHas anyone tried this with PowerPoint yet? Our org is very PowerPoint centric and always struggle a bit with the workflow for code. Copy pasting from IntelliJ does give colours but none of the other niceties such as kerning or litigation. Screenshots are nice visually but a pain to maintain.
- Sayrus 10mo agoFrom the article cons section: > It only works where OpenType is supported. Fortunately, that's all major browsers and most modern programs. However, something like PowerPoint doesn't support OpenType.
- spockz 10mo agoThank you, I missed that third sentence.
- layer8 10mo ago*ligatures Is kerning a thing for monospace fonts?
- spockz 10mo agoYes, ligatures. No idea where “litigations” came from. I think there is still some kerning going on where the individual letters are placed closer together and the entire word has the same width so more spacing in between words.
- mock-possum 10mo ago> Works in <textarea> and <input>! Syntax highlighting inside <textarea> has been previously impossible, because textareas and inputs can only contain plain text. This is where the interesting Interesting indeed! This bit feels like a neat bit of hackery to keep in my back pocket for sure.
- cluckindan 10mo agoUsing a variable font with r, g, b axes for each alt would maybe make it possible to change the colors?
- mg 10mo agoThis is interesting. I have yet to see a good web based text editor with syntax highlighting. They all mess with the native search functionality of the browser. Because they can't just use a textarea for the edit area. With this approach, it would be possible. I wonder how usable a Python version of this would be?
- gethly 10mo agoFYI, IDEs and editors too don't use "textarea". Contenteditable essentially makes the web browser work like editor does.
- mg 10mo agoContenteditable plus the CSS Custom Highlight API (which highlights ranges instead of elements) might indeed allow for a good solution. But I have not yet seen an editor that does that.
- hyperhello 10mo agoI built a prototype that does work. https://hypervariety.com/ScriptHighlighter/ https://hypervariety.com/ScriptHighlighter/
- onion2k 10mo agoI have yet to see a good web based text editor with syntax highlighting. I slightly expect you to pull a "no true Scotsman" here and suggest it's actually no good because it doesn't really support mobile browsers very well, but Microsoft's Monaco editor that's driven from VS Code is quite good. https://microsoft.github.io/monaco-editor/ https://microsoft.github.io/monaco-editor/
- mg 10mo agoIt seems to have the same problems all of the web based editors I have seen have. Either they capture ctrl+f and take away the native search experience. Or they have a broken search experience. This one is in the latter category. When I hit ctrl+f on that page and type "export": First it says "1 of 4 matches" but nothing is highlighted. When I hit enter, it says "2 of 4 matches" and again, nothing is highlighted. When I hit enter again, it says "3 of 4 matches" and the first match is highlighted. When I hit enter again, it says "4 of 4 matches" and the second match is highlighted.
- exasperaited 10mo agoThis is a curious sort of hazy modern mirror image of the world of Sinclair computers, that embedded their BASIC parsing in the keyboard driver — that is to say, it essentially wasn't possible to type a syntactically incorrect BASIC program.
- TheRealPomax 10mo ago> The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript. But then why does the color disappear if I disallow scripts on this page? Instead of your font, now it uses Consolas. Are you using JS to load the font in? (if so... web fonts don't need JS to load =)
- california-og 10mo agoMost likely because your JS blocker also blocks custom fonts. It works fine without JS.
- TheRealPomax 10mo agoIt does not: with JS blocked, the stylesheet for the webfont never gets injected. Even though it shouldn't need injecting in the first place.
- california-og 10mo agoI'm 100% sure it does. Check again.
- TheRealPomax 10mo agoThen you need to curl the URL, pipe it to an .html file, and then search the resulting file for "@font-face". The only place that has the @font-face rule for this fancy font is inside <template> syntax, meaning it will do nothing (template content is inert) until JS clones that template into the DOM as active content.
- california-og 10mo agoThat's for the code-editor webcomponent, the rest of the site doesn't use JS.
- 10mo ago
- eviks 10mo ago> I want to keep things as simple as possible. The whole post proves the opposite is true!
- jasonjmcghee 10mo agoLarge discussion from the last time it was posted: 665 points | 137 comments https://news.ycombinator.com/item?id=41245159 https://news.ycombinator.com/item?id=41245159
- eichin 9mo agoHmm, is there a simple way to force chrome to use this for view source and/or Inspect? (didn't see anything in the earlier thread either, but those are the two really obvious places that a font would be a reasonable approach...)