介绍Glow: 美丽、像素完美的Markdown代码块

今天我们推出了_Glow_ - 一种全新的语法高亮方案：

Glow与众不同：Glow不是试图理解语言的内部机制，而是专注于美学 - 以及您的代码外观。

Glow简单易用：Glow通过调整少量的CSS变量，使所有语言与您的品牌颜色匹配。

Glow微缩尺度：Glow比主流替代方案小得多。我们在谈论5K (opens new window)而不是5M (opens new window)。这是目前最小的实现方式。无论是Haskell，TypeScript还是Zig。React、Vue还是Svelte。无论哪种不受Turing限制的Markdown工件与另一个紧密耦合的当年语言奇特性混合在一起。它们都会发光。

与像Shiki这样的语法感知高亮器形成鲜明对比，要向其中添加一种新语言需要大量编程工作。例如，golang.json (opens new window) 语法文件共有2700行，而javascript.json (opens new window) 则是一个庞大的配置文件，共有6000行。如果你看一下互联网上最知名的品牌，你会发现其中80%是基于单一品牌颜色的。通常会配以一个次要颜色和一个互补的强调色。这正是 Glow 的工作原理。你只需调整一小部分 CSS 变量，就可以使代码块与你的品牌兼容：

/* 品牌感知的 CSS 变量 */
[glow] {
  --glow-primary-color: #7dd3fc;
  --glow-secondary-color: #4f72b6;
  --glow-accent-color: #419fff;
}

创建新的主题（包括浅色和深色主题）是一件轻而易举的事情，之后所有语言将自动适应你的品牌颜色。没有缺失的颜色标记，也不会有意外惊喜。

与语法感知的主题系统（如 Shiki 和 Prism）相比，其中单个主题可能包含数百个颜色变量，形成了鲜明对比。例如，Monokai 主题 (opens new window) 具有 140 个颜色变量。 Glow的独特无类设计系统 (opens new window) 为您提供行号、选择、错误突出显示、插入、删除等功能。

<script>
  // imports
  import { longpress } from './longpress.js';

  let pressed = false;
  let glow_market = 9999_99++;
</script>

<label>
  <input type=range bind:value={duration} max={2000} step={100}>
  {duration}ms
</label>

<button use:longpress={duration}
   on:mousedown="{() => pressed = true}"
   on:longpress="{() => pressed = true}">Press me</button>

<!-- condition -->
{#if pressed}
  <p>You pressed and held for {dura``` ```markdown
tion}ms</p>
{/if}

<style>
  /* button style */
  [role="button"], button {
    background-color: var(--main-color);
    color: #899;
  }
</style>

And when I say "unlimited", it means that:

Writing future CSS today has been a massive productivity boost. You'll get nesting, `color-mix()`, variables, and more, all natively.

## Glow + Nue = Next level

Nue is a content-first web development framework. It now has built-in support for Glow. You can include functionality like this in your markdown content:

### Content _YAML_

# View metadata
members:
  title: Members
  columns: [Source, Joined]
  sorting:
    created: Join date
    cc: Location
    email: Em
``` ail

customers:
  title: 客户
  columns: [计划, 已订阅]
  sorting:
    created: 订阅日期
    card: 卡类型

### 样式 _CSS_

/* 选项卡样式 */ [role=tablist] { 背景: rgba(0, 0, 0, .7); 背景大小: 3.5em; 填充: .7em 1.3em 0; 溢出: 隐藏; 显示: 弹性;

a { 颜色: #fff; 填充: .2em 1em .4em; 字体大小: 90%; 光标: 指针; } }


或类似以下内容：

*   ```
    <dialog>
      <!-- “is”属性用于绑定到Web组件 -->
      <form action="/backend/leads" is="post-component">
        <header>
          <h2>{ title }</h2>
        </header>
    
        <label>
          <h3>用户名</h3>
          <input name="username">
        </label>
        <label>
          <h3>密码</h3>
          <input name="password" type="password">
        </label>
    
        <footer>
          <button class="primary">登录</button>
        </footer>
      </form>
    </dialog>
    ``` Glow，[完美Web框架](https://nuejs.org/blog/perfect-web-framework/)的核心部分现已准备就绪，开发重点现在可以转向设计系统和模板：

## 使用Glow开始

您可以尝试将Glow作为独立库使用，也可以与Nue框架一起使用。

#### 独立库

使用npm、pnpm或bun安装[nue-glow](https://github.com/nuejs/nue/tree/master/packages/glow)：

npm i nue-glow


并遵循[Glow文档](https://nuejs.org/docs//concepts/syntax-highlighting.html)。

#### 与Nue一起

Nue内置支持在Markdown代码块中使用Glow，并提供[三个新标签](https://nuejs.org/reference/nuemark)。 以下是Markdown内容：-tags.html#code): `[code]`, `[codeblocks]`, 和 `[codetabs]` 供内容创建者使用。

您可以尝试以下标签：

安装 Bun（如果尚未完成） #

curl -fsSL https://bun.sh/install | bash

安装网站生成器（Nuemark playground） #

bun install nuekit --global

使用 Glow 模板启动一个 Nue 项目 #

bun create nue@latest


在最后一步选择 _"Simple blog"_，当代码块被编辑时，您可以享受到良好的内容热重载效果：

Nue 热重载实现中

附注：如果您更喜欢 Node，请查看[入门文档](https://nuejs.org/docs/#node)。

## 关于下一个里程碑的消息

当路线图上的下一个里程碑达成时，我们可以发送电子邮件通知您。