我们已经结合了[Asciidoctor](Opal(https://opalrb.com)将AsciiDoc渲染带到了浏览器！

简介

蛋白石

asciidoctor.js 使用 Opal Ruby-to-JavaScript 跨编译器直接生成 Asciidoctor 的 JavaScript 版本，Asciidoctor 是 AsciiDoc 的一种实现。结果就是可以在浏览器中渲染 AsciiDoc!

该项目主要包括一个Rake构建脚本，该脚本执行Opal编译器对Asciidoctor源代码进行编译，以生成asciidoctor.js脚本。

Opal对Ruby代码及其需要的库进行解析，然后将这些代码重写到Opal命名空间下的JavaScript代码中。生成的JavaScript可以在任何JavaScript运行时环境中执行，例如浏览器或node.js应用程序。

证明概念

当我第一次发现Opal时，我想，“是的，这可以工作。” 我当时不知道，实现这个概念证明不仅仅是一个小任务。

努力工作涉及填补Opal中的空白，以支持Asciidoctor使用的Ruby标准库的所有特性，以及修改Asciidoctor以使其与JavaScript施加的限制（例如不可变的字符串）兼容。

尽管还存在一些不足之处，我自豪地说，asciidoctor.js可以成功渲染完整的AsciiDoc用户指南（一个在Asciidoctor开发过程中一直作为合规性基准的文档）。

剧本

有两个脚本是通过Rake构建生成的，需要用它们来在浏览器中运行Asciidoctor：

opal.js

JavaScript中的Ruby运行时环境

asciidoctor.js

Asciidoctor的JavaScript版本

Warning

不要因为这些文件的大尺寸而烦恼。我们甚至还没有开始优化，仅仅是刚刚完成了概念验证。

既然如此，两个文件通过gzip压缩后效果都很不错，可以把asciidoctor.js从500K以上压缩到大约90K。Opal中有生成更高效代码的选项，但它们目前正引起一些问题。一旦我们解决了这些问题，生成文件的大小应该会变得相当可接受。

您需要将这两个文件加载到您的JavaScript环境中才能使用Asciidoctor。例如，在HTML页面中，添加这两个+<script>+标签（理想情况下放在页面底部）：

<script src="opal.js"></script>
<script src="asciidoctor.js"></script>

你可以通过运行描述在 README 中的示例来查看这些脚本的实际效果。

用法

与生成的代码进行交互，你可以：

  1. 编写用Ruby语言编写的代码，该代码能够嵌入原生的JavaScript环境中，Opal会将其编译成JavaScript。

  2. 直接在JavaScript中调用Opal生成的JavaScript API。

这是一个例子，展示了Ruby如何与原生JavaScript环境交互，在浏览器中渲染一串AsciiDoc文本。

data = %(= asciidoctor.js - Render AsciiDoc in your browser!
Dan Allen
2013-05-21

我们结合了[Asciidoctor](http://asciidoctor.org)和[Opal](https://opalrb.com)将AsciiDoc渲染带到了浏览器！

$window.addEventListener 'DOMContentLoaded', proc {
  html_doc = Asciidoctor.render(data, :safe => :safe,
    :attributes => %w(notitle! anchors imagesdir=./images))
  $document.getElementById('content').innerHTML = html_doc
}, false

对Asciidoctor的更改

目前，为了让Asciidoctor能够使用Opal进行编译，需要对其进行一些必要的更改。这些更改被保存在Asciidoctor git仓库的asciidoctor.js分支中，asciidoctor.js就是从这个分支编译而来的。最终的目标是消除所有这些差异，以便Asciidoctor能够直接被编译为JavaScript。

去玩吧！

现在是去玩 asciidoctor.js 的时候了。探究你能用它做什么以及如何改进它。然后，加入 Asciidoctor 或 Opal 的社区来帮助使得在浏览器中的 AsciiDoc 变得尽可能好！