设计与产品blog.glyphdrawing.club
内置语法高亮的字体
Font with Built-In Syntax Highlighting
2024 — 2025,它一次次回到首页
黑点是上首页(≥ 50 分)的那次投稿,空心点是没冲上去的投稿,点越大分数越高。
导读
这个页面介绍一种把语法高亮直接做进字体里的实验:字体本身就能让代码呈现出不同样式,从而不依赖页面脚本。它更像一次技术可行性展示,而非成熟工具。评论主要围绕其实用性、Web 臃肿问题,以及它能否帮助网页编辑器保留浏览器原生搜索展开。
为什么经久不衰:它把字体这一古老载体推到极限,用反常规的方式展示了一个巧妙实现,也顺带引发关于 Web 复杂度和编辑器设计的讨论,因此反复登上首页。
HN 评论精选
认为这是技术炫技,实用方案应是脚本生成 DOM 高亮。
我把这类东西看作类似能塞进 bootloader 的代码。它更多是技术挑战,而不是真的解决什么问题。如果你直接对手写文件跑个脚本,把语法高亮加成 DOM 元素,结果会好得多。不过我还是很喜欢看到这类东西。
cyanmagenta查看英文原文
I 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.
质疑双重标准,更偏好显式 JavaScript 方案。
网页里的脚本是臃肿,字体里的脚本就是好事?这倒是对臃肿的有趣定义。我更喜欢普通网页用本地安装字体,再加一段明确的 JavaScript 来高亮关键词。
vbezhenar查看英文原文
So 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.
指出此前已有热烈讨论并给出链接。
上次发布时有过大规模讨论:665 分 | 137 条评论 https://news.ycombinator.com/item?id=41245159
jasonjmcghee查看英文原文
Large discussion from the last time it was posted: 665 points | 137 comments https://news.ycombinator.com/item?id=41245159
看到它在保留原生搜索的编辑器上的潜力,并期待 Python 版本。
这很有意思。我还没见过好用的、带语法高亮的网页文本编辑器。它们都破坏浏览器原生查找功能,因为编辑区不能只用 textarea。用这种方法就有可能做到。我很好奇 Python 版本会有多可用?
mg查看英文原文
This 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?
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程,从基础概念一路讲到曲线求交、投影、曲率等进阶内容,并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示:在浏览器里实时渲染一片水面,展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议:永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议,主张在界面和绘画中改用深灰或带色相的暗色,并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开,探讨我们用来思考和表达复杂问题的媒介,以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验:团队做了一个更轻量的页面版本,起初从整体平均加载时间看反而更慢;按地理区域分层后才发现,轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com