这是一个将 BMYBBS 文章内容转换为 HTML 的库。
传统 BBS 最早只提供了终端界面,并且通过 ANSI 转义序列 提供了例如前景色、背景色、下划线、闪烁等指令,丰富了内容显示,推动了 ANSI 艺术 的流行。这些指令使用不可见字符 \033
以及其他可见字符插入到文本中。
随着 web 的发展,传统 BBS 也陆续提供了网页界面,NJU 09 就是一个在中国大陆高校 BBS 广泛使用的实现。Web 实现除了需要对应转换为 html 格式,还给文章带来了新的元素:附件的上传、展示。NJU09 的实现存在一些不足:
- 样式转换不完全(例如下划线、闪烁)
- web 方式几乎不适合使用转义序列编辑、预览
- 附件中只有图片会被转换使用
<img>
标签显示。其实还有 Flash 格式,只不过已经越来越少被使用了。相反随着技术发展,<video>
和<audio>
多媒体技术早已广泛使用,而 NJU 09 中一直没有实现。 - 同样对于未来可能需要引入新的“语法”,例如类似 Markdown 的代码块 (WIP)、链接。
因此,本项目的目标在于使用 JavaScript 实现一套 BMYBBS 内容“语法”的转换实现。以下示例中控制字符 \033
使用 *
表示,例如 *[0m
代表的内容是 \033[0m
。
npm install --save git://github.com/bmybbs/bmybbs-content-parser.git
import BMYParser from "@bmybbs/bmybbs-content-parser"
(async () => {
let content = {
text: [
"#attach bmybbs.png",
"```javascript",
"var foo = 42;",
"```",
"*[1;31mhello world*[0m"
].join("\n"),
attaches: [{
name: "bmybbs.png",
link: "http://example.com",
signature: [0xFF, 0xD8, 0xFF, 0xD8]
}]
}; // 通常由接口返回,也可以在浏览器内生成,以便预览
console.log(await BMYParser(content));
})();
其中 signature
是用来标识文件格式的 Magic Number(而非通过文件后缀名)。完整的列表参见 List of file signatures,BMYBBS Content Parser 使用 file-type 解析。
并不完全一致,此处为了便于阅读增加了换行和缩进。
<article>
<img src="http://example.com" alt="bmybbs.png">
<pre>
<code class="language-javascript">
var foo = 42;
</code>
</pre>
<p>
<span class="bmybbs-ansi bmybbs-ansi-red">hello world</span>
</p>
</article>
样式转换的结果是文本使用 span.bmybbs-ansi.bmybbs-ansi-*
包裹,仅提供类的约定,实际的显示需要使用者自行决定。其中,.bmybbs-ansi
是一个空的类,便于显示、移除样式,例如:
span.bmybbs-ansi.bmybbs-ansi-red {
color: red;
}
const bmybbs_spans = [].slice.call(document.querySelectorAll("span.bmybbs-ansi"));
// 所有元素移除 ANSI 样式
bmybbs_spans.forEach(el => el.classList.remove("bmybbs-ansi"));
// 所有元素恢复 ANSI 样式
bmybbs_spans.forEach(el => el.classList.add("bmybbs-ansi"));
TBD
可以使用 PrismJS 渲染,Webpack 需要借助 babel-plugin-prismjs 打包。
TBD
MIT