cheetsheet的最好的范例模式，少文字，多例子，以格子卡片的形式紧凑的显示

实验了新的想法，我们是否可以把一个笔记，看成是一棵树，这样print的时候，可以落到相应的叶子上，可以解决原先onclick事件只能把内容打到note末尾的问题，另外这棵树甚至可以安排布局，以简单的方式构造成多样化的cheetsheet!

1. 格子卡布局的定制特性，需要把原先note显示逻辑从note_core内部抽离出来，即原先属于note_core有layerout代码需要真正的放到note page区域，这个和一般性的页面-layout关系接近了。
   1.1 note.dart的签名build(BuildContext,Pen)的第二个参数，既由note page页面最接近它的layout提供，作为页面内容数据的容器，内容数据构成页面叶子树形结构，一个叶子就是原先的一个Cell
   1.2 代码生成时查找note.page所属layout.dart,并按layout.dart来定制传播build(BuildContext,Pen)的第二个参数
   1.3 layer的责任真正转换为通用layout，Pen的类型layout可以定制，所以，所以note page有了和layout直接交互的机会，比如，pen.topBarAreaAdd(Button) ,这种形式来模拟slot的概念（貌似强类型更好些）， 再比如cheetsheet型的layout，就自己分析Cell树，并重组织Widget结构后再展示。
2. 特殊的范例型内容cell，可以加个按钮看范例代码，这就需要绑定其所属code
   2.1 重建codeArea的识别逻辑，我看可以在线生成，不需要提前生成器搞
   2.2 在cell的print函数内用异常堆栈信息找到对应的codeArea并绑定之
3. 以上2点集成起来
4. 形成第一个可用的cheetsheet