Cuối cùng tôi đã đưa ra một cách siêu thanh lịch để làm điều này trong khoảng 5 dòng mã, dựa trên thực tế rằng đơn giản YAML trông rất giống Markdown.
Chúng tôi đang bắt đầu ra với điều này:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
Sử dụng regexps (trong trường hợp này, trong Perl) để loại bỏ các bắt đầu ---, và đặt dấu gạch nối trước khi chìa khóa trên mỗi dòng:
$data =~ s/^---\n//s;
$data =~ s/^(\s*)(\S.*)$/$1- $2/gm;
Voila, Markdown:
- all:
- foo: 1025
- bar:
- baz: 37628
- quux:
- a: 179
- b: 7
Bây giờ, chỉ cần chạy nó thông qua một proces Markdown sor:
use Text::Markdown qw(markdown);
print markdown($data);
Và bạn nhận được một danh sách HTML - sạch, ngữ nghĩa, tương thích ngược:
<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul></li>
</ul></li>
</ul>
YUI Treeview có thể nâng cao danh sách hiện có, vì vậy chúng tôi quấn nó tất cả lên:
<html><head>
<!-- CSS + JS served via YUI hosting: developer.yahoo.com/yui/articles/hosting/ -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/treeview/assets/skins/sam/treeview.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/treeview/treeview-min.js"></script>
</head><body>
<div id="markup" class="yui-skin-sam">
<!-- start Markdown-generated list -->
<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul></li>
</ul></li>
</ul>
<!-- end Markdown-generated list -->
</div>
<script type="text/javascript">
var treeInit = function() {
var tree = new YAHOO.widget.TreeView("markup");
tree.render();
};
YAHOO.util.Event.onDOMReady(treeInit);
</script>
</body></html>
Vì vậy, tất cả điều này làm việc ra khoảng 5 dòng mã (biến YAML thành Markdown, biến Markdown thành một danh sách HTML, và đặt danh sách HTML đó bên trong một tệp HTML mẫu.HTML được tạo/cải tiến dần dần của HTML được tạo ra, vì nó có thể xem được hoàn toàn trên các trình duyệt không phải là JavaScript dưới dạng danh sách cũ đơn giản.
Điều này là tốt đẹp, nhưng lưu ý xin vui lòng, danh sách đánh dấu phải được thụt vào bởi 4 ký tự cho mỗi cấp độ được spec tương thích. (2 không gian thụt lề sẽ hoạt động trong nhiều trình kết xuất đồ họa, tuy nhiên việc tiếp tục và mã lồng sẽ thường xuyên không hoạt động.) – ocodo