[Javascript] 再次探索CodeMirror,熱鍵,自動排版,佈景主題

2019-07-23

很久很久以前寫過三篇文章 分享一個好用的Javascript Library - CodeMirrorCodeMirror - html+javascript 混和顯示+自動高度增加CodeMirror - 折合程式碼(fold gutters) ,因為一些因素,我又得碰到他了,接下來就是繼續介紹下面幾個功能



1. 套換佈景主題,這邊可以找到許多的佈景主題 ( https://cdnjs.com/libraries/codemirror ),其中我這邊就是展示套用 dracula , duotone-light 樣式


2. 加入 字詞提醒 首先引入 html and javascript hint 的 js

<!-- hint -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/javascript-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/xml-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/addon/hint/html-hint.js">


</script>

接下來就是在 init 的部分更改 extraKeys 變成 Alt-Right 因為預設是Ctrl + Space ,剛好跟我們中文系的輸入法打到,這樣換剛好會跟 Vistaul Studio  的一樣 :P


3.加入 Ctrl+K+D 重新整理程式碼,並且tab 還有空白出現字詞提醒,因為 Ctrl +K or Ctrl+D 都會觸發系統功能,而且是連續按壓,所以在這邊花了一點小時間處理一下




花了一些時間測試,參考了許多網站,希望之後自己在複習,心裡會比較有譜..

參考網站 :

html encode/decode :
https://blog.csdn.net/cuixiping/article/details/7846806
code mirror autocomplete:
https://codemirror.net/demo/complete.html
http://programmermagazine.github.io/201411/htm/article4.html
https://stackoverflow.com/....../codemirror......
code mirror theme:
https://codemirror.net/demo/theme.html#duotone-light
code mirror cdn:
https://cdnjs.com/libraries/codemirror
formatting:
https://codemirror.net/2/demo/formatting.html


當麻許的超技八 2014 | Donma Hsu Design.