I. Cơ bản
- Trang chủ: https://codemirror.net/
Một số tính năng hay:
- Code folding: thu nhỏ 1 tag
- Search - replace
- mattag: nhìn tag đầu và cuối
- runmode: hiện code dạng plain text
- overlay: hiện màu {{text}}
- lint: bắt lỗi
- merge view: so sánh 2 đoạn code
- fullscreen: phóng to code để xem toàn màn hình
- hint/showhint: gợi ý
- Lazy Mode Loading: tự chọn mode html, css hay js
II. Cài đặt và sử dụng
1. Thành phần cơ bản
|
1 2 3 |
<script src="lib/codemirror.js"></script> <link rel="stylesheet" href="lib/codemirror.css"> <script src="mode/javascript/javascript.js"></script> |
Sử dụng cơ bản
|
1 2 3 4 5 |
let element = document.getElementsByClassName("demoClass")[0]; let editor = CodeMirror(element , { lineNumbers: true, tabSize: 4, }); |
2. Chọn thêm mode
|
1 2 3 4 |
<script src="mode/css/css.js"></script> <script src="mode/xml/xml.js"></script> // mode: "css", // mode: "xml", |
3. Show hint - Gợi ý đỉnh cao
|
1 2 3 4 5 6 7 8 |
<!-- chon hint --> <script src="codemirror/addon/hint/show-hint.js"></script> <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css"> <script src="codemirror/addon/hint/css-hint.js"></script> <script src="codemirror/addon/hint/html-hint.js"></script> <script src="codemirror/addon/hint/xml-hint.js"></script> <script src="codemirror/addon/hint/javascript-hint.js"></script> //extraKeys: {"Ctrl-Space":"autocomplete"}, |
