CodeMirror学习（4）

multiplex.html【示例针对html，复杂的标签嵌套问题】
html结构：

multiplex_html_code.pn

对应的页面展示：

multiplex_demo.png

可以看出：嵌套的尖括号被正确的解析了，并且被渲染成了橙黄色【 <<和 >>】，在 style中定义。但是 <和 >还是原来的文本显示。
需要引入的文件：

multiplex_link.png

js代码：

multiplex_js_code.png

---

mustache.html【mustache是一种前端的渲染模板，类似handlebars，此功能就是突出显示模板里的语法】

html结构：

mustache_html.png

对应的页面展示【可以看出和mustache相关的语法都被突出了颜色】：

mustache_demo.png

需要引入的文件：

mustache_link.png

js代码：

mustache_js.png

---

panel.html【在编辑器的前后添加对应的面板，该面板可以删除。没想到实际的用处？？？】

先看示例的页面显示：

panel_demo.png

对应的html结构：

panel_html.png

页面引入的文件：

panel_link.png

js代码【代码没仔细看，同样是CodeMirror的API，不熟悉。】：

panel_js.png

---

placeholder.html【给编辑输入区添加类似input输入框placeholder功能一样的功能】

页面展示【那段英文大致就是，当编辑区没有value，placeholder占位符就会显示，并且当源textarea有placeholder属性时，编辑器也会继承】：

placeholder_demo.png

代码区：

placeholder_code.png

---

preview.html【写html5页面时有预览的功能，预览放在一个iframe中】

页面：

preview_demo.png

所有代码：

preview_code.png

---

requirejs.html【requirejs模块加载示例：将所有的依赖关系加载到requirejs中，而不是显式的一下子就加载完成。另外页面加载的时候也是，整个页面加载完成后，编辑区域内才加载！惰性加载】

页面demo：

requirejs_demo.png

代码：

requirejs_code.png

---

resize.html【实现代码编辑区域的高度是自动随着代码的多少而显示，因此不会产生上下的滚动条。但是如果代码量过多，页面就会很长】

页面展示【少的代码】：

autoresize_demo.png

【多的代码】

autoresize_demo2.png

js代码：

autoresize_code.png

实现的关键是红框部分。

---

rulers.html【尺子】

页面展示：

rulers_demo.png

代码：

rulers_code.png

---

runmode.html【运行模式】
页面示例【点击按钮会运行编辑区内的代码。是运行还是仅仅只是展示？？？】：

runmode_demo.png

代码【 CodeMirror.runMode接收3个参数：text、mode、output 】：

runmode_code.png

---

search.html【搜索替换：按Alt+F，可在编辑区内进行搜索，只配置了一个快捷键】
页面：

---

<== 写不下去了，以后有时间再来补充，东西还是很多的，CodeMirror功能也很强大 ==>

---