X-rayHTML 使用教程

1、项目介绍

X-rayHTML 是一个用于构建文档页面的开源工具。它允许开发者在一个页面中同时展示代码示例和渲染结果，从而提高文档的可读性和实用性。X-rayHTML 通过简单的配置和数据属性，实现了代码片段的动态展示和隐藏，支持3D变换动画，并且兼容不支持3D变换的浏览器。

2、项目快速启动

安装

首先，你需要克隆项目仓库到本地：

git clone https://github.com/filamentgroup/X-rayHTML.git

然后，进入项目目录并安装依赖：

cd X-rayHTML
npm install

使用

在你的HTML文件中引入X-rayHTML的CSS和JS文件：

<link href="path/to/X-rayHTML.css" rel="stylesheet">
<script src="path/to/X-rayHTML.min.js"></script>

在你的HTML代码中添加数据属性以启用X-rayHTML功能：

<div data-xrayhtml>
  <pre><code>这里放你的代码</code></pre>
</div>

配置

你可以在JS文件中进行一些基本配置：

var pluginName = "xrayhtml";
var o = {
  text: {
    open: "查看源码",
    close: "查看演示"
  },
  classes: {
    button: "btn btn-small",
    open: "view-source",
    sourcepanel: "source-panel"
  },
  initSelector: "[data-" + pluginName + "]",
  defaultReveal: "inline"
};

3、应用案例和最佳实践

案例一：文档页面

在一个技术文档页面中，你可以使用X-rayHTML来展示代码示例和渲染结果，帮助用户更好地理解代码的实际效果。

<div data-xrayhtml>
  <pre><code>&lt;button class="btn"&gt;点击我&lt;/button&gt;</code></pre>
  <button class="btn">点击我</button>
</div>

案例二：教学网站

在教学网站中，X-rayHTML可以帮助学生实时查看代码的渲染结果，提高学习效率。

<div data-xrayhtml>
  <pre><code>&lt;h1&gt;欢迎来到编程世界&lt;/h1&gt;</code></pre>
  <h1>欢迎来到编程世界</h1>
</div>

4、典型生态项目

项目一：X-rayCSS

X-rayCSS 是一个与X-rayHTML类似的工具，专门用于展示CSS代码和渲染结果。它可以与X-rayHTML结合使用，提供更全面的代码展示功能。

项目二：X-rayJS

X-rayJS 是一个用于展示JavaScript代码和运行结果的工具。它可以帮助开发者更好地理解和调试JavaScript代码。

通过这些生态项目的结合使用，你可以构建一个功能强大的代码展示和教学平台。