Nodejs版Cirru项目介绍，一套基于缩进的语法

Nodejs版Cirru项目介绍，一套基于缩进的语法

Cirru 是我的个人项目, 定义了一套基于缩进的语法, 然后这个语法很容易解析到语法树, 就可以用来玩和做一些比较有趣的事情, 但是我发现最有用的功能是用 Cirru 来替代 HTML 语法生成 HTML

比如这样一段 HTML, 不考虑缩进的话:

<meta charset="utf-8">
<div class="demo-a demo-b" data="root node">demo of text
  <span>nothing</span>plain text</div>
<div id="entry" class="c demo"></div>
<div class="demo"></div>
<div id="demo">content</div>
<div class="class-a"></div>

我可以在 Cirru 的语法上加上一些特殊符号, 写成这样:

meta (:charset utf-8)
div (:class demo-a demo-b)
  = demo of text
  :data root node
  span $ = nothing
  = plain text
#entry.demo (:class c)
div.demo
div#demo $ = content
.class-a

主页刚刚更新 http://cirru.org/ GitHub 主页是 https://github.com/cirru 一个 Twitter 帐号 https://twitter.com/cirrulang

页面上都是抓子项目 README 生成的文档, 都是英文的… 相关的项目有下面这些… 都是很小的项目, 但是数量看起来, 呵呵:

  • Parser
    • Cirru Parser in CoffeeScript
    • Cirru Parser in Go
  • Evaluater
    • Evaluater in Go
    • Evaluater in CoffeeScript
    • Cirru Shell
    • Cirru Table: concept of debugging
  • Converter
    • Convert JSON to Cirru
    • Convert Cirru to Mustache
    • HTML templating in Cirru
    • Write JavaScrip AST with Cirru
  • Editor Support
    • Sublime Text Package
    • Cirru Editor
    • Brackets Package
    • CodeMorror support
    • Ace Editor support
    • Atom Editor support
  • Highlighting
    • Rainbow Plugin
    • Highlight.js fork with Cirru syntax
    • Pygments fork with Cirru syntax
    • Custom-made Syntax Highlighting

12 回复

Nodejs版Cirru项目介绍，一套基于缩进的语法

概述

Cirru 是我开发的一个个人项目，它定义了一套基于缩进的语法。这种语法不仅容易解析为语法树，还可以用于各种有趣的用途。其中一个非常有用的功能是使用 Cirru 替代传统的 HTML 语法来生成 HTML。

HTML vs. Cirru 示例

假设我们有以下一段 HTML 代码（不考虑缩进）：

<meta charset="utf-8">
<div class="demo-a demo-b" data="root node">demo of text
  <span>nothing</span>plain text</div>
<div id="entry" class="c demo"></div>
<div class="demo"></div>
<div id="demo">content</div>
<div class="class-a"></div>

我们可以将这段 HTML 转换为 Cirru 语法，并添加一些特殊的符号：

meta (:charset utf-8)
div (:class demo-a demo-b)
  = demo of text
  :data root node
  span $ = nothing
  = plain text
#entry.demo (:class c)
div.demo
div#demo $ = content
.class-a

在这段 Cirru 代码中：

  • meta 和 div 等标签被直接写出来。
  • (:class demo-a demo-b) 表示设置类名。
  • = demo of text 表示文本内容。
  • :data root node 设置属性。
  • span $ = nothing 表示嵌套的标签和内容。
  • #entry.demo 表示带有 ID 和类名的标签。
  • div#demo $ = content 表示带有 ID 的标签及其内容。

Cirru 项目结构

主页：http://cirru.org/ GitHub：https://github.com/cirru Twitter：https://twitter.com/cirrulang

页面上的所有文档都是从各个子项目的 README 文件中抓取的，目前全部是英文的。

子项目列表

  1. Parser

    • Cirru Parser in CoffeeScript
    • Cirru Parser in Go

  2. Evaluater

    • Evaluater in Go
    • Evaluater in CoffeeScript
    • Cirru Shell
    • Cirru Table: 概念调试工具

  3. Converter

    • Convert JSON to Cirru
    • Convert Cirru to Mustache
    • HTML 模板化 Cirru
    • 使用 Cirru 编写 JavaScript AST

  4. Editor Support

    • Sublime Text Package
    • Cirru Editor
    • Brackets Package
    • CodeMirror 支持
    • Ace Editor 支持
    • Atom Editor 支持

  5. Highlighting

    • Rainbow 插件
    • Highlight.js 的 Cirru 语法支持
    • Pygments 的 Cirru 语法支持
    • 自定义语法高亮

这些子项目虽然都很小，但数量众多，涵盖了从解析器到编辑器支持等多个方面，展示了 Cirru 语言的广泛应用潜力。


又一个jade么？性能呢

我的功能少了一个数量级, 所以还没想过去测试性能… 要不给的 case 我用 Cirru HTML 写对应的看看?

是有多不想直接写HTML啊。。。

说到关键了, 但还可以再深入一点, 我造这个语法的原因, 花括号和尖括号这类语法, 一来干扰视线, 二来干扰思考代码的流程, 不能忍

生成html的话让我想起了jade

高大上的东西, 这个不好搞呀, 加油

看起来比较酷, 不过不前搞的没涉及深层的知识, 暂时还可以

特别好

看来有很多人不喜欢括号啊，甚至都有点极端了，

嗯, 做出来可以不用, 但是应该有人去做.

Nodejs 版 Cirru 项目提供了一种基于缩进的语法来简化编写结构化文本（如 HTML）的过程。这种语法可以轻松地被解析成语法树，并用于各种有趣的应用。

例如，我们可以使用 Cirru 语法来简化 HTML 的编写：

示例 HTML:

<meta charset="utf-8">
<div class="demo-a demo-b" data="root node">demo of text
  <span>nothing</span>plain text
</div>
<div id="entry" class="c demo"></div>
<div class="demo"></div>
<div id="demo">content</div>
<div class="class-a"></div>

相应的 Cirru 语法:

meta (:charset utf-8)
div (:class demo-a demo-b)
  = demo of text
  :data root node
  span $ = nothing
  = plain text
#entry.demo (:class c)
div.demo
div#demo $ = content
.class-a

解释：

  • (:charset utf-8) 对应 <meta charset="utf-8">
  • div (:class demo-a demo-b) 对应 <div class="demo-a demo-b">
  • :data root node 对应 data="root node"
  • span $ = nothing 对应 <span>nothing</span>
  • #entry.demo (:class c) 对应 <div id="entry" class="c demo"></div>

如何使用 Nodejs 处理 Cirru 语法？

你可以使用 JavaScript 和 Nodejs 解析 Cirru 语法。下面是一个简单的示例：

const parseCirru = require('cirru-parser');

const cirruCode = `
meta (:charset utf-8)
div (:class demo-a demo-b)
  = demo of text
  :data root node
  span $ = nothing
  = plain text
`;

const ast = parseCirru(cirruCode);
console.log(ast);

这段代码会将 Cirru 语法解析为一个抽象语法树（AST），便于进一步处理和转换。

总结

Nodejs 版 Cirru 项目提供了一种更简洁、更易读的方式来编写结构化文本，如 HTML。通过解析器将其转换为 AST，可以方便地进行后续处理或生成最终的输出。

回到顶部