npm 包 cirru-html-js 使用教程

Cirru HTML 是一种简单易用的 HTML 缩写语言。该语言被广泛用于前端框架的模板语言和静态页面生成。cirru-html-js 是一个开源的 npm 包，使用它可以将 Cirru HTML 转换为原生 HTML 代码，方便开发者更加高效、快捷地编写 HTML 代码。本文将介绍如何使用 cirru-html-js 来实现 Cirru HTML 转换为原生 HTML 代码的过程，并包含详细的使用示例。

安装

安装 cirru-html-js 可以使用 npm 命令行，如下：

npm install cirru-html-js

使用

在项目中引入 cirru-html-js:

const cirruHtml = require('cirru-html-js');

然后，你只需要将 Cirru HTML 作为输入，调用 cirruHtml 函数即可输出原生 HTML 代码。

示例

基本用法

Cirru HTML 的语法非常简单，基本上是 HTML 的缩写形式。下面是一个示例：

(div :class "container" :style "{width: '100px', height: '100px'}")
  (p)
    | Hello, Cirru HTML!
  (/p)
(/div)

这是一个使用 Cirru HTML 编写的简单的 div 元素，使用 cirru-html-js 可以轻松地将其转换为原生 HTML 代码，如下：

const html = cirruHtml("(div :class \"container\" :style \"{width: '100px', height: '100px'}\")\n  (p)\n    | Hello, Cirru HTML!\n  (/p)\n(/div)\n");

console.log(html);

输出：

<div class="container" style="{width: '100px', height: '100px'}">
  <p>
    Hello, Cirru HTML!
  </p>
</div>

嵌套

Cirru HTML 支持嵌套，可以用圆括号 () 来表示嵌套。在 cirru-html-js 中，同样支持嵌套转换。

例如：

const html = cirruHtml("(div :class \"container\")\n  (h1)\n    | Cirru\n    (span :style \"{color: 'red'}\")\n      | HTML\n  (/h1)\n  (p)\n    | This is an example of\n    (a :href \"https://www.github.com\")\n      | Cirru HTML\n    |.\n  (/p)\n(/div)\n");

输出：

-- -------------------- ---- -------
---- ------------------
  ----
    -----
    ----- -------------- --------
      ----
    -------
  -----
  ---
    ---- -- -- ------- --
    -- ------------------------------
      ----- ----
    -----
  ----
------

属性

Cirru HTML 使用冒号 : 来表示属性，可以很方便地设置元素的属性。

例如：

const html = cirruHtml("(a :href \"https://www.github.com\" :class \"link\")\n  | Cirru HTML\n(/a)\n");

输出：

<a href="https://www.github.com" class="link">
  Cirru HTML
</a>

文本

Cirru HTML 使用竖线 | 来表示文本内容。

例如：

const html = cirruHtml("(p)\n  | Hello, Cirru HTML!\n(/p)\n");

输出：

<p>
  Hello, Cirru HTML!
</p>

注释

Cirru HTML 使用双斜杆 // 来表示注释，可以方便地添加注释。

例如：

const html = cirruHtml("(div)\n  (p)\n    | This is an example.\n    // This is a comment.\n  (/p)\n(/div)\n");

输出：

<div>
  <p>
    This is an example.
  </p>
</div>

总结

Cirru HTML 是一种简单易用的 HTML 缩写语言，可以方便地在前端框架的模板语言和静态页面生成中使用。cirru-html-js 可以将 Cirru HTML 转换为原生 HTML 代码，方便开发者更加高效、快捷地编写 HTML 代码。在使用 cirru-html-js 时，我们可以通过示例了解 Cirru HTML 的语法规则，并通过 cirruHtml 函数将 Cirru HTML 转换为原生 HTML 代码，进而实现前端页面的开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75065