[Javascript] CodeMirror - html+javascript 混和顯示+自動高度增加
2017-04-10
上篇文章 我們簡單介紹了CodeMirror ，今天我們要來繼續加上去一些貼心的小功能，像是這樣
基本上，就是增加兩個功能 1. html +javascript 混和 2. 高度自動長大，加上這個兩個能會越來越像是編輯器? !
這篇只是一個筆記文，基本上算不上什麼教學。
1. html + javascript 顯示 ，首先引入必須要的js ， CDN reference: https://cdnjs.com/libraries/codemirror
首先引入這些JS :
<!-- CodeMirror--> <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.js"></script> <!-- 下列的其實都為了 讓html +js 語言混和必需的js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/javascript/javascript.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/htmlmixed/htmlmixed.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/css/css.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/vbscript/vbscript.js"></script>
程式的部分 ，基本上就是要去指定editor 的 mode :
<script> var mixedMode = { name: "htmlmixed", scriptTypes: [{ matches: /\/x-handlebars-template|\/x-mustache/i, mode: null }, { matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript" }] }; var editor = CodeMirror.fromTextArea(document.getElementById("txtCode"), { //語言偵測用混和模式 mode: mixedMode, //開啟行號 lineNumbers: true, //選取游標 selectionPointer: true, //過長自動換行 lineWrapping: true });
這樣他就可以讓html + javascript + css 辨識關鍵字
2. 加入CSS讓他自動長大:
<style> .CodeMirror { border: 1px solid #eee; height: auto; } .CodeMirror-scroll { min-height: 300px; } </style>
加入這一段就可以自動長大 參考:https://codemirror.net/demo/resize.html
其實在操控codemirror的過程中很多枚枚角角，基本上我有碰到並解決的問題，我就是紀錄一下，讓後面的人可以直接複製貼上。